字符串，内置对象，Math和date ,浏览器对象，计时器

字符串String

一、如何创建字符串

1:字面量的创建方式 var str = “123”; var s=‘123’

2:构造函数的方式 new String()

      方式一(推荐):  var str = ‘亲’；    //基本类型 
      定义了一个字符串变量str，内容为'亲'
 
      方式二: var str = new String(“hello”);       //引用类型
      定义一个字符串变量str，内容为hello，
      注意: 此刻str为引用类型(object对象)
      用new产生的变量都是引用类型的变量，也叫对象
 
      方式三: var str = String(‘hello’);
      基本类型: string, number, boolean, undefined,null等
      引用类型/对象: Array , Date, Object, String, Function等

二、属性

legth 字符串的长度

例如 :  var str = “how are you”;
   	 	console.log(str.length);
		console.log(str[0]);  //获取字符串中对应下标的字符

​

三、方法

(查，替，截，转)

// 查
      var str = 'A我是中国人,a我爱我的祖国中国人'
      // var oStr = new String('中国人民解放军')   //字符串对象
      // console.log(typeof str, typeof oStr)

      // console.log(str.length) //字符串的长度  12

      // str.indexOf('字符串', start)
      // 查找字符串在指定父串中第一次出现的下标位置，没有，返回-1
      // console.log(str.indexOf('中国人', 3)) //12

      // str.lastIndexOf('字符串',start)
      // 查找字符串在指定父串中最后一次出现的下标位置，没有，返回-1
      // console.log(str.lastIndexOf('中国人', 8)) //2

      // charAt(下标)  通过下标返回指定位置的字符
      // console.log(str.charAt(3)) //国

      for (var i = 0, len = str.length; i < len; i++) {
        // console.log(str.charAt(i))
      }

      // charCodeAt(下标)  通过下标返回指定位置字符的编码值
      // console.log(str.charCodeAt(0))
      // console.log(str.charCodeAt(7))

      // 替
      // replace(旧串, 新串) 替换字符串有指定的字符串，一次只能替换一个

      // console.log(str.replace('中国', 'hello'))

      // 截
      // substring(start,end)  从最小下标截取到大的下标位置(包含小的下标,不包含大的下标)

      console.log(str.substring(4, 9)) //国人,a我

      // substr(start,length) 截取指定长度的字符串
      console.log(str.substr(4, 9)) //国人,a我爱我的祖

      // slice(start,end) 下标可以是负值， 总是从左向右截取，(包含开始 不包含结束)

      console.log(str.slice(4, 9)) //国人,a我
      console.log(str.slice(-9, -4)) //我爱我的祖

      // 转
      // toUpperCase()  小写字母转大写字母
      // toLowerCase()  大写字母转小写字母
      // split('切割符',长度) 字符串转数组

      var str1 = 'Good Good Study,Day Day Up'
      console.log(str1.toUpperCase())
      console.log(str1.toLowerCase())
      console.log(str1.split(' '))

内置对象

js提供了自定义对象，内置对象

内置对象：js内部提供的对象，包含各种属性和方法给开发者调用

Math 数组 字符串 document.write console.log…

Math

js是提供的一个”数学高手“对象，他提供了一些进行数学运算的方法

Math.PI 圆周率
Math.abs() 返回一个数的绝对值
Math.ceil() 返回大于或等于一个给定数的最小整数
Math.sqrt() 返回的是一个数的平方根。
Math.trunc() 返回的是一个数的整数部分，不管正数还是负数，直接去掉小数点及之后的部分。

1.求近似数
Math.round() 四舍五入
注: 负数 >0.5 进一 <=0.5 舍去

console.log(Math.round(4.5)) //5
console.log(Math.round(4.4)) //4
console.log(Math.round(-4.5)) //-4
console.log(Math.round(-4.500001)) //-5
console.log(Math.round(-4.4)) //-4

2.Math.ceil() 向上取整

// 向上取整
console.log(Math.ceil(4.5)) //5
console.log(Math.ceil(4.4)) //5
console.log(Math.ceil(-4.5)) //-4
console.log(Math.ceil(-4.500001)) //-4
console.log(Math.ceil(-4.4)) //-4

3.Math.floor() 向下取整

console.log(Math.floor(4.5)) //4
console.log(Math.floor(4.4)) //4
console.log(Math.floor(-4.5)) //-5
console.log(Math.floor(-4.500001)) //-5
console.log(Math.floor(-4.4)) //-5

求最值
Math.max() 求最大值
扩展 Math.max.apply(null,数组)

Math.min() 求最小值
扩展 Math.min.apply(null,数组)

	console.log(Math.max(23, 1, 2, 33, 444, 34))

      // 扩展 Math.max.apply(null,数组)
      var arr = [4, 23, 2, 44, 11, 12, 31]
      console.log(Math.max.apply(null, arr)) //44

      console.log(Math.min(23, 1, 2, 33, 444, 34))

      // 扩展 Math.min.apply(null,数组)

      console.log(Math.min.apply(null, arr)) //2

求随机数
Math.random() 取到 >=0 && <1的数

万能公式 Math.floor(Math.random()*(max-min+1)+min)

console.log(Math.random())
      // 15     5   5~15
      var max = 15
      var min = 5
      console.log(Math.floor(Math.random() * (max - min + 1) + min))
      //  Math.random()*11 0~10

Date日期

Date对象和Math对象不一样，Date是一个构造函数，使用时需要实例化后才能使用其中具体的方法和属性，Date实例是用来处理日期和时间的

获取当前时间

var date = new Date()

获取指定时间的日期对象

var date=new Date('2022/8/8')

date实例的方法

getFullYear()	 //返回当前日期的年 2022
getMonth()	//月份 返回的月份小1个月，记得+1
getDate()	//返回的是几号
getDay()	//返回的是星期几  周一到周六返回的是1~6 周日返回的是 0
getHours()	//时
getMinutes()	//分
getSeconds()	//秒

格式化年月日

var date = new Date()
console.log(date.getFullYear()) //返回当前日期的年 2022
console.log(date.getMonth()) //月份 返回的月份小1个月，记得+1
console.log(date.getDate()) //返回的是几号
console.log(date.getDay()) //返回的是星期几  周一到周六返回的是1~6 周日返回的是0

// 写一个2021年8月8日

var year = date.getFullYear()
var month = date.getMonth() + 1
var dates = date.getDate()
var arr = [
    '星期日',
    '星期一',
    '星期二',
    '星期三',
    '星期四',
    '星期五',
    '星期六',
]
var day = date.getDay()
console.log(
'今天是' + year + '年' + month + '月' + dates + '日' + arr[day]
)

封装一个函数 返回当前的时分秒

var date = new Date()
console.log(date.getHours()) //时
console.log(date.getMinutes()) //分
console.log(date.getSeconds()) //秒

// 封装一个函数  返回当前的时分秒   22：01：03
function getTimer() {
    var time = new Date()
    var h = time.getHours()
    h = h < 10 ? '0' + h : h
    var m = time.getMinutes()
    m = m < 10 ? '0' + m : m
    var s = time.getSeconds()
    s = s < 10 ? '0' + s : s
    return h + ':' + m + ':' + s
}

console.log(getTimer())

毫秒数

       // 获取Date总的毫秒数(时间戳)，不是当前的毫秒数，而是目前距离1970年1月1日过了多少毫秒数
      var date = new Date()
      console.log(date.valueOf()) //现在时间距离1970年1月1日的毫秒数

      console.log(date.getTime())

      // 简单的写法 --最常用
      var date1 = +new Date() //
      console.log(date1)

      // h5 新增的
      console.log(Date.now())

浏览器对象

BOM —浏览器对象模型

BOM的顶级对象是window

BOM下的子对象有：document ，history，location ，navigatior screen

跳转页面

//window.location.href=""
//location.href=""

obtn.onclick=function(){
	//window.location.href='http://www.baidu.com'
	location.href='http://www.baidu.com"
}

刷新页面

//location.reload(true)
obtn.onclick=function(){
	//重新刷新页面
	location.reload(true)
}

获取浏览器信息

navigator.userAgent

window的方法

alert()
confirm()
prompt()
open()
close()

计时器*

setInterval(表达式，毫秒值) 间隙性计时器
clearInterval() 清除计时器
setTimeout(表达式，毫秒值) 一次性计时器（定时器）
clearTimeout()清除计时器

案例一：显示当前时间

<body>
    <div></div>
    <script>
        let div = document.querySelector("div");
        setInterval(function () {
            let time = new Date();
            let hours = time.getHours();
            let minutes = time.getMinutes();
            let seconds = time.getSeconds();
            h1.innerHTML = `${hours}:${minutes}:${seconds}`;
        }, 1000)
    </script>
</body>

案例二：秒表

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo27</title>
</head>
 
<body>
    <button class="start">开始</button>
    <button class="pause">暂停</button>
    <button class="stop">重置</button>
    <h1></h1>
    <script>
        let start = document.querySelector(".start");
        let pause = document.querySelector(".pause");
        let stop = document.querySelector(".stop");
        let h1 = document.querySelector("h1");
        let seconds = 0;
        let ms = 0;
        h1.innerHTML = `${seconds}:${ms}`;
 
        let timer = null;
 
        start.onclick = function () {
            // 重复点击开始按钮时，先停止上一次的计时器
            clearInterval(timer);
            timer = setInterval(() => {
                if (ms === 9) {
                    ++seconds;
                    ms = 0;
                }
                ++ms;
                h1.innerHTML = `${seconds}:${ms}`;
            }, 100);
        }
 
        pause.onclick = function () {
            clearInterval(timer);
        }
 
        stop.onclick = function () {
            clearInterval(timer);
            seconds = 0;
            ms = 0;
            h1.innerHTML = `${seconds}:${ms}`;
        }
    </script>
</body>
 
</html>