只因小黑子的JavaScript入土过程第三章

JavaScript系列教程第三章

3.1 数组的常用方法1：影响原数组

●数组是一个复杂数据类型，我们在操作它的时候就不能再想基本数据类型一样操作了

比如我们想改变一个数组

//创建一个数组
var arr=[1，2，3]
//我们想把数组变成只有1和2
arr = [1, 2]

。这样肯定是不合理，因为这样不是在改变之前的数组
。相当于新弄了一个数组给到arr 这个变量了
。既相当于把arr里面存储的地址给换了，也就是把存储空间换掉了，而不是在之前的空间里面修改
。所以我们就需要借助一些方法,在不改变存储空间的情况下，把存储空间里面的数据改变了

3.1.1 push :在末尾添加元素,返回值为数组的长度

使用push 方法追加一个元素在末尾
使用push后，push属性的返回值为数组的长度

  <script>
    var arr=[1,2,3]
    var res=arr. push(4)
    console.log(arr)
    console.log("返回值：",res)
  </script>

3.1.2 pop 删除后面的元素,返回值为删除的元素

  <script>
    var arr=[1,2,3,"steve"]
    var res=arr. pop()
    console.log(arr)
    console.log("返回值：",res)
  </script>

3.1.2 unshift 从前面追加元素,返回值是数组长度

  <script>
    var arr=[1,2,3,"steve"]
    var res=arr.unshift("van")
    console.log(arr)
    console.log("返回值：",res)
  </script>

3.1.3 shift 删除数组的第一个元素,并返回第一个元素的值

  <script>
    var arr=[1,2,3,"steve"]
    var res=arr.shift()
    console.log(arr)
    console.log("返回值：",res)
  </script>

3.1.4 splice 可以在任意位置增加或删除

一、

删除：语法
var 变量名= 数组名.splice( 下标位置，要删除的数组数量)
返回被删除的元素

  <script>
    var arr=[1,2,3,"steve"]
    var res=arr.splice(0,2)
    console.log(arr)
    console.log("返回值：",res)

    var arr=[1,2,3,"steve"]
    var res=arr.splice(1,3)
    console.log(arr)
    console.log("返回值：",res)
  </script>

二、

增加：语法
在splice中加上第三个参数

  <script>
    var arr=[1,2,3,"steve"]
    var res=arr.splice(1,0,"van")
    console.log(arr)
    console.log("返回值：",res)
    //想要在不删除的基础上添加，就把删除数调为0，上面表示从索引1的数——2的前面开始添加splice参数

    var arr=[1,2,3,"steve"]
    var res=arr.splice(1,2,"van")
    console.log(arr)
    console.log("返回值：",res)
    //删除从索引1——2开始的两个数，然后添加splice参数
  </script>

3.1.5 reverse 只是把数组的顺序颠倒

返回倒序的数组

  <script>
    var arr=[1,3,2,"steve"]
    var res=arr.reverse()
    console.log(arr)
    console.log("返回值：",res)
  </script>

3.1.6 sort 排序会按照位数进行排列

一、如果直接添加sort()

  <script>
    var arr=[11,22,567,7,3,"steve"]
    console.log(arr)
    var res=arr.sort()
    console.log(arr)
    console.log("返回值：",res)
  </script>

这里排序是先看个位数从小到大，再看十位数从小到大，依次到百位等，字符串留最后

二、sort(function(x,y))
在这里，x-y（前面减后面）就是从小到大，y-x（后面减前面）就是从大到小。

  <script>
    var arr=[11,22,567,7,3,"steve"]
    console.log(arr)
    var res=arr.sort(
      function(x,y)
      {
        return y-x
      }
      )
    console.log(arr)
    console.log("返回值：",res)

    var arr=[11,22,567,7,3,"steve"]
    console.log(arr)
    var res=arr.sort(
      function(x,y)
      {
        return x-y
      }
      )
    console.log(arr)
    console.log("返回值：",res)
  </script>

3.2 数组的常用方法2：不影响原数组

3.2.1 conact 拼接

可以拼接数组和值，返回值为拼接的新数组
新复制一个数组的方式，不影响原来的数组：利用concat空参数来快速复制参数

  <script>
    var arr1=[1,2,3]
    var arr2=[4,5,6]
    var arr3=arr1.concat(arr2,7,"steve")
    console.log(arr1,arr2,arr3)

    var arr4=arr1.concat() //concat什么都不接：新复制一个数组的方式，不影响原来的数组
    arr4.pop()
    console.log(arr1,arr4)
  </script>

3.2.2 join转换为字符串

join可以改变数组在浏览器中的连接方式，数组中系统默认用逗号链接

  <script>
    var arr = [1, 2, 3, 4, 5]
    var arr = [1, 2, 3, 4, 5]
    document.write(arr+"<br>"+arr.join("|"))
  </script>

案例应用：
用来修改数组中系统默认的逗号链接方式

  <script>
    var arr=[]
    for(var i=0;i<5;i++)
    {
      arr.push("<li>"+i+"</li>")
    }
    document.write(arr+"<br>")

    var arr=[]
    for(var i=0;i<5;i++)
    {
      arr.push("<li>"+i+"</li>")
    }
    document.write(arr.join(""))
  </script>

3.2.3 slice 截取数组的一部分

slice 截取(开始索引，结束索引)
索引只包括前面不包括后面
slice()空值，新复制数组的方式

  <script>
    var arr1=["aaa","bbb","ccc","ddd","eee"]
    var arr2=arr1.slice(0,2)//从索引0——第一个开始，到索引2结束截取不包括索引2
    console.log(arr1,arr2)
    
    var arr2=arr1.slice(2)//一个值表示从索引2开始一直到最后结束
    console.log(arr1,arr2)

    var arr2=arr1.slice()//空值，新复制数组的方式
    console.log(arr1,arr2)

   //复数表示从后面看索引-1表示最后面的数，索引-2表示倒数第二个，依次类推
    var arr2=arr1.slice(2,-2)//从索引2——第3个开始，到索引-2——倒数第二结束截取不包括索引-2
    console.log(arr1,arr2)
  </script>

3.2.4 indexOf 返回查找元素的索引值

若indexOf 返回值为-1，即证明数组中没有这个元素

  <script>
    var arr1=["aaa","bbb","ccc","ddd","eee"]
    var res=arr1.indexOf("aaa")
    console.log(res)

    var arr1=["aaa","bbb","ccc","ddd","eee"]
    var res=arr1.indexOf("abc")
    console.log(res)
    
   //若有相同的值，indexOf只能查找第一个元素，可以在iindexOf中添加一个参数，这个参数的意思就是从这个索引开始查询
    var arr1=["aaa","bbb","ccc","aaa"]
    var res=arr1.indexOf("aaa",4)
    console.log(res)
  </script>

3.2.5 lastIndexOf 从后面开始返回查找元素的索引值

从后面开始查找，与indexOf类似，返回-1也代表找不到

  <script>
    var arr1=["ddd","bbb","ccc","aaa","eee"]
    var res=arr1.lastIndexOf("aaa")
    console.log(res)
  </script>

3.3 数组去重

3.3.1 for循环利用indexOf选择

使用arr2作为载体，判断arr2中是否有重复的

  <script>
    var arr = [1, 2, 3, 4, 3, 5, 6, 2, 1]
    var arr2 = []
    for (var i = 0; i < arr.length; i++) {
      if (arr2.indexOf(arr[i]) === -1) {
        arr2.push(arr[i])
      }//用来判断数组arr2的索引值是否不存在，如果不存在则复制arr的元素值
      //倘若i=6,arr[6]为元素倒数第二个——2，那么arr2.indexOf(2)显然在i=1的时候就已经存在
      //既然存在就不会继续复制arr的元素值
    }
    console.log(arr, arr2) 
  </script>

3.3.2 利用对象遍历

当对象的键有同样内容时，只会显示一个

  <script>
    var obj={}
    obj[2]="asddsfgsdgasdf"
    obj[2]="asddsfgsdgasdf"
    console.log(obj)
  </script>

利用这个特性可以进行数组去重

  <script>
    var arr = [1, 2, 3, 4, 3, 5, 6, 2, 1]
    var obj = {}
    for (var i = 0; i < arr.length; i++) {
      obj[arr[i]] = "随便"
    }
    console.log(obj)
    var arr2 = []
    for (var i in obj) {
      arr2.push(i - 0)//将字符串转为数字，若没有则是字符串)
    }
    console.log(arr2)
  </script>

3.3.3 new set

  <script>
    var arr = [1, 2, 3, 4, 3, 5, 6, 2, 1]
    var set1=new set(arr)
    console.log(set1)//set结构自动过滤重复内容
    var arr1=Array.from(set1)//将set结构转换为数组
    console.log(arr1)
  </script>

3.4 数组常用方法3

3.4.1 foreach遍历

一般我们是用for循环遍历，JS中还能使用forEach()来进行遍历。这个方法只支持IE8以上的浏览器。IE8以下的浏览器不支持使用forEach()方法，还是使用for来遍历

forEach()方法需要一个函数作为参数，由我们创建的但是不由我们调用的，成为回调函数。数组中有几个元素，函数就会执行几次，每次执行时，浏览器会将遍历到的元素，以实参的形式传进来，定义的形参可以来读取这些内容。浏览器会在函数中传递三个参数。

• 第一个参数，就是当前正在遍历的元素。 value
• 第二个参数，就是当前正在遍历元素的索引。 index
• 第三个参数，就是正在遍历的数组。

案例：

  <script>
    var arr = ["aaa", "bbb", "ccc", "ddd"]
    //回调函数
    arr.forEach(function (item,index,arr){
      console.log(item,index,arr)
    })//index查看索引值
  </script>

3.4.2 map 映射

map() 方法返回一个新数组，这个新数组：由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

map() 不会对空数组进行检测。

map() 不会改变原始数组。
　
案例：
1.

  <script>
    var arr = [1, 2, 3, 4]
    var arr2 = arr.map(function (item) {
      return item * item * item
    })
    console.log(arr2)
  </script>

2.

 <script>
    var arr = ["xiaoming","kerwin","tiechui"]
    var arr2 = arr.map(function (item) {
      return "<li>" + item + "</li>"
    })
    console.log(arr, arr2)
    document.write(arr2.join("")) 
  </script>

3.4.3 filter 过滤

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，然后进行过滤筛选。

返回值：过滤的原数组的元素以新数组的形式表达

注意： filter() 不会对空数组进行检测。
       filter() 不会改变原始数组。       

  <script>
    var arr = [
      {
        name:'aaa',
        price:100
      }
      ,
      {
        name:'bbb',
        price:200
      }
      ,
      {
        name:'ccc',
        price:300
      }
    ]
    var arr2 = arr.filter(
      function(item){
        return item.price>200
      }
    )
    console.log(arr2)
  </script>

3.4.4 every 判断是否每一个都满足条件

检查数组中的所有元素并执行函数，如果函数在任何数组循环中返回false并且不检查剩余元素，则此循环退出。
数组没有值，every（）方法不会执行。
它也不会改变原始数组。
返回值：true或false
案例：

  <script>
    var arr = [80, 90, 92, 94]
    var arr2 = arr.every(function (item) {
      return item >= 90
    })
    console.log(arr2)
  </script>

3.4.5 some 只要判断是否有一个满足条件

some方法如果遇到符合 true条件的元素 就不在执行了。

如果都为 false 才返回false。

不会改变原数组

  <script>
    var arr = [80, 90, 92, 94]
    var arr2 = arr.some(function (item) {
      return item >= 90
    })
    console.log(arr2)
  </script>

3.4.6 find 寻找元素

find() 方法返回值：通过测试（函数内判断）的数组的元素的值。
！与filte的返回值形式不同

如果没有符合条件的元素返回 undefined

find() 对于空数组，函数是不会执行的。

find() 并没有改变数组的原始值。

  <script>
    var arr = [{
      name: "语文",
      grade: 90,
    },
    {
      name: "数学",
      grade: 95
    },
    {
      name: "体育",
      grade: 100
    }
    ]
    var arr2 = arr.find(function (item) {
      return item.grade === 100
    })
        console.log(arr2)
  </script>

3.4.7 reduce 叠加

reduce第一个参数为回调函数，第二个参数为初始值，若初始值为100，就会从100开始相加

  <script>
    var arr = [1, 2, 3, 4]
    var arr2 = arr.reduce(function (prev, item) {
      return prev + item
    }, 100)
    console.log(arr2)
  </script>

原理：
第一次：prev 0 item 1
第二次：prev 1 item 2
第三次：prev 3 item 3
第四次：prev 6 item 4
第五次：prev 10
所以arr2=function的10+100=110

若第二给参数为空串，则reduce复制原数组的元素变成字符串，然后拼串

  <script>
    var arr = [1, 2, 3, 4]
    var arr2 = arr.reduce(function (prev, item) {
      return prev + item
    }, "")
    console.log(arr2)
  </script>

3.5 字符串的基本操作

• 字符串是基本数据类型，想要相同的字符串，直接复制就可以了，它与数组不同

  <script>
    var str=String("hello")
    console.log(str+"world")
    //两种字符串写法没有区别
    var str2=new String("hello")
    console.log(str2+"world")

    str2.length=0//length 只能读取不能改写，原本长多少就是多少
    console.log(str2)

    console.log(str2[1])//索引也是只能读取不能改写
  </script>

3.6 统计字符出现次数案例

  <script>
    var str="abcabcab"
    // 统计类型:
    // a是3个，b是3个，c是2个
    // [a,3,b,3,c,2]
    // {a:3,b:3,C:2}
    var obj={}
    for(var i=0;i<str.length;i++)
    {
      console.log(str[i])
      var key=str[i]
      if(obj[key])
      {
        obj[key]++
      }
      else{
        obj[key]=1
      }
    }
    console.log(obj)
  </script>

3.7 字符串常用方法

3.7.1charAt()返回索引所对应的字符

使用chartAt(索引值)方法可以返回索引所对应的字符

  <script>
    var str="steve"
    var str1=str.charAt(0)
    console.log(str1)
  </script>

3.7.2 charCodeAt()返回字符所对应的字符编码

  <script>
    var str="steve"
    var str1=str.charCodeAt(0)
    console.log(str1)
  </script>

s的ASCII码值

3.7.3 formCharCode()可以将获取的数字转化为相对应的字符

  <script>
    var arr=[]
    for(var i=65;i<91;i++)
    {
      arr.push(String.fromCharCode(i))//对空数组添加由String.fromCharCode转换数字
    }
    console.log(arr)
  </script>

3.7.4 toUpperCase()可以将字符串所有字母转化为大写

  <script>
    var str = "asfBHBasNJKB"
    var str1 = str.toUpperCase()
    console.log(str1)
  </script>

3.7.5 toLowerCase()可以将字符串所有字母转化为小写

  <script>
    var str = "asfBHBasNJKB"
    var str1 = str.toLowerCase()
    console.log(str1)
  </script>

3.7.6 截取

截取
substr(开始的索引值,截取的长度)
substring（开始的索引值 ，结束索引）
slice（开始的索引值， 结束索引)同数组的截取相同

一、substr(开始的索引值,截取的长度)

  <script>
    var str = "asfBHBasNJKB"
    var str1=str.substr(0,3)
    console.log(str1)
  </script>

二、substring（开始的索引值 ，结束索引） 包前不包后

索引只包括前面不包括后面，不能像slice一样利用负数索引

  <script>
    var str = "asfBHBasNJKB"
    var str1=str.substring(1,5)
    console.log(str1)
  </script>

  <script>
    var str = "asfBHBasNJKB"
    var str1=str.substring(1)
    console.log(str1)
  </script>

3.7.7 replace 替换

replace替换
只能替换遇到的第一个，若想都替换，使用for循环或是用正则表达式

  <script>
    var str="steve"
    var str1=str.replace("e","*")
    console.log(str1)
  </script>

3.7.8 split 分割

split可以将一个字符串分割成一个数组

  <script>
    var str="a|b|c|d"
    console.log(str.split("|"))
  </script>

若split空

  <script>
    var str="a|b|c|d"
    console.log(str.split(""))
  </script>

3.7.9 indexOf和lastIndexOf

用法与数组部分的indexOf和lastIndexOf相同，都是查询索引

3.7.10 concat 连接字符串

  <script>
    var str = "abcd"
    var str1 = str.concat("ef")
    console.log(str1)
  </script>

3.7.11 trim 去掉首尾空格

trim去掉首尾空格
trimStart（）=trimLeft（）去掉首空格
trimEnd（）=trimRight（）去掉尾空格

  <script>
    var str = " hell word "
    console.log("|"+str+"|")
    console.log("|"+str.trim()+"|")
  </script>

3.8 模糊查询

  <script>
    var arr = ["aaa", "abc", "bcc", "bcd", "ddd", "ccd"]
    var input = prompt("请输入查询的内容：")
    var res = arr.filter(function (item) {
      return item.indexOf(input) > -1 
    })
    console.log(res)
  </script>

3.9 json格式字符串

前后端链接的通道，可以转化为对象
要求严格，属性名必须加上双引号，最后不能有多余的逗号
1.

格式
var 变量名='{ "属性名"：值，"属性名"：值}'或
var 变量名="{ '属性名'：值，'属性名'：值}"

转化方式
var 对象名 =JSON.parse(json字符串名)

JSON.parse形式把json格式弄成字符串

  <script>
    var str ='{"name":"steve","age":18}'
    var obj =JSON.parse(str)
    console.log(str,obj)
  </script>

2.
JSON.stringify形式把字符串弄成json格式

语法；var 字符串名 =JSON.stringify(对象名)

  <script>
    var str ={"name":"steve","age":18}
    var obj=JSON.stringify(str)
    console.log(str,obj)
  </script>

3.10 模板字符串

  <script>
    var arr=["aaa","bbb","cccc"]
    var arr2=arr.map(
      function(item){
        return `<li>${item}</li>`
      }
    )//每个映射出来成为新组成的数组
    console.log(arr2)
    document.write(arr2.join(""))//join将元素间的逗号去掉
  </script>

3.10.1 ``（反引号）可以简单的让字符串进行换行操作

使用`(反引号)

  <script>
    var myhtml =`<li>111111</li>
    <li>222222</li>
    <li>333333</li>`
  </script>

3.10.2 ${}可以替换后台的变量

  <script>
    var b = "steve"
    var a = `my name is ${b} ${10+20} ${10>20?'aaa':'bbb'}`
    document.write(a)
  </script>

这里用到了反引号，而不是常用的双引号单引号，且${b}这个大括号就相当于一个js环境，所有的js的东西都可以使用

3.11 数字常用方法

3.11.1 toFixed()保留小数位

返回类型是字符串（如果要进行数值的加减，需要先把返回值-0再进行操作）
参数是要保留的小数位数
1.

  <script>
    var a=321.123951515641
    console.log(a.toFixed(3))
</script>

2.

 <script>
    var a=321.123951515641
    console.log(a.toFixed(3)-0+100)
</script>

没有-0时

-0后

3.11.2 Math 对象

一、random生成随机数

可以取随机数取值范围是0~1不包括1但是包括0，传参数没有太大作用，还是随机生成数

  <script>
    console.log(Math.random())
  </script>

二、round 四舍五入取整

  <script>
    var a=724.9684616
    console.log(Math.round(a))
</script>

三、ceil 向上取整 和 floor 向下取整

  <script>
    var a=321.19
    var b=123.99
    console.log(Math.ceil(a))
    console.log(Math.floor(b)) 
</script>

四、abs 取绝对值

不会有负数出现

  <script>
    var b = -123.34
    console.log(Math.abs(b))
  </script>

五、sqrt 取平方根

  <script>
    var a = 9
    console.log(Math.sqrt(a))
  </script>

六、pow 求指数

  <script>
    console.log(Math.pow(2,5))
</script>

22222

七、max 求最大参数 和 min 求最小参数

  <script>
    console.log(Math.max(1, 2, 4, 48,3,9))
    console.log(Math.min(1, 2, 4, 48,3,9))
  </script>

八、PI 生成圆周率

  <script>
    console.log(Math.PI)
  </script>

3.12 随机整数案例

  <script>
    var res = Math.floor(Math.random() * 10)
    console.log(res)//0-10不包含10

    var res = Math.floor(Math.random() * (10 + 1))
    console.log(res)//0-10包含10把random后面乘的数转换成11就行了，同理，若是0-100，把数就换成101

    var res = Math.floor(Math.random() * 10) + 10
    console.log(res)//10-20不包含20

    var res = Math.floor(Math.random() * 11) + 10
    console.log(res)//10-20包含20
  </script>

以函数形式表现

  <script>
    //函数从最小值到最大值取值,担不包含最大值
    function getRad(min, max) {
      if (min > max) {
        console.error("参数有误")
      }
      return Math.floor(Math.random() * (max - min)) + min
    }
    console.log(getRad(20,30))
  </script>

3.13时间对象

1.1个传参是毫秒数

  <script>
    var date = new Date(1000)//1个传参是毫秒数
    console.log(date)//注：时间会从1970年开始添加
  </script>

2. 2个传参可以控制时间
月份与数组一样，是从0开始记录的，所以代码第二个参数虽然是0，但是显示的是1月份

  <script>
    var date = new Date(2023,0)
    console.log(date)//月份与数组一样，是从0开始记录的，所以上述代码第二个参数虽然是0，但是显示的是1月份
  </script>

3.多个参数
数字时

  <script>
    var date = new Date(2023, 8, 9, 10, 5, 10)
    console.log(date)
  </script>

字符串时
年月日用-或/相连，时分秒用：相连

  <script>
    var date = new Date("2023-9-9 10:5:10")
    console.log(date)
  </script>

都为

2023年9月9日，10：05:10

3.14 时间对象常用方法

3.14.1 get 获取实际时间

  <script>
    var date = new Date()
    console.log(date.getFullYear())//得到实际年的时间
    console.log(date.getMonth())//得到实际月的时间
    console.log(date.getDate())//得到实际日的时间
    console.log(date.getDay())//得到实际获取周的信息，周日是0，周一到周六是1-6
    console.log(date.getHours())//得到时
    console.log(date.getMinutes())//得到实际分
    console.log(date.getSeconds())//得到实际秒
    console.log(date.getMilliseconds())//得到实际毫秒
  </script>

即现在是2023年1月12日，因为月份是从0开始计数，所以是一月

2.

  <script>
    var date = new Date()
    console.log(date.getTime())//得到时间截取
  </script>

即默认现在距离1970年的毫秒数

3.14.2 set 设置时间

1.单独设置

  <script>
    var date = new Date()
    console.log(date)

    date.setFullYear(2025)//设置年
    console.log(date)

    date.setMonth(5)//设置月
    console.log(date)

    date.setDate(25)//设置日期
    console.log(date)

    date.setHours(13)//设置时
    console.log(date)

    date.setMinutes(50)//设置分
    console.log(date)

    date.setSeconds(59)//设置秒
    console.log(date)
  </script>

2. 写入获得的时间代码修改

  <script>
    var date = new Date()
    date.setTime(1673496648100)
    console.log(date)
  </script>

3.15 定时器

3.15.1 setTimeout 倒计时计时器

  <script>
    setTimeout(function () {
      alert("wdnmd")
    }, 2000) //注册计时器2秒后打印.2000毫秒
  </script>

3.15.2 setInterval 间隔计时器

setInterval(要执行的函数，多长时间后执行)
与倒计时计时器原理基本相同语法，只是将倒计时转换成了间隔

  <script>
    setInterval(function () {
      console.log("wdnmd")
    }, 2000) //2秒后输出
  </script>

  <script>
    setInterval(function () {
      console.log(new Date())
    }, 2000) //每2秒后一直输出实际时间
  </script>

3.15.3 clear() 清除定时器

  <button id="btn1">清除定时器-延时</button>
  <button id="btn2">清除定时器-间隔</button>
  <script>
    var time1 = setTimeout(function () {
      console.log("steve")
    }, 1000)
    var time2 = setInterval(function () {
      console.log(new Date())
    }, 2000)
    console.log(time1, time2)

    console.log(btn1, btn2)//直接通过id，拿到按钮对象

    btn1.onclick = function () {
      console.log("btn1 click")//表示能通过点击触发
      clearTimeout(time1)//触发后将time1清掉
    }
    btn2.onclick = function () {
      console.log("btn2 click")
      clearInterval(time2)
    }
  </script>

点击按钮就会清除计时器

3.15.4 异步执行问题

异步执行即，按照顺序，原本是setTimeout先执行，再执行console.log（“2222222”），但是由于计时器的存在，使得setTimeout的语句后执行，这样就叫做异步执行
同步执行是一定在异步执行之前的
若同步执行陷入死循环，则异步永远也不会执行

  <script>
   console.log("111111")
   setTimeout(
    function(){
      console.log("steve")
    },2000)
    console.log("222222")
  </script>

2秒后异步执行是否执行要看同步执行是否忙完

3.16 倒计时案例

连续调用多次可以实现覆盖的效果原理

    <div class="box"></div>
    <script>
        box.innerHTML="111111"
        box.innerHTML="222222"
        box.innerHTML="333333"//连续调用多次可以实现覆盖的效果
    </script>

实现倒计时需要封装一个函数

  <div id="box"></div>
  <script>
    var currentDate = new Date()
    var targetDate = new Date("2023/1/15")
    console.log(targetDate - currentDate)//时间间隔（时间戳）差值比如195088365毫秒

    function diffTime(current, target) {
      var sub = Math.ceil((target - current) / 1000)//去除后面的三位，计算得出的相差总秒数并向上取整比如195089

      var day = parseInt(sub / (60 * 60 * 24))//相差总秒数/一天的总秒数=相差天数的值比如2.25797454天

      var hours = parseInt(sub % (60 * 60 * 24) / (60 * 60))//利用相差天数取余的值（也就是0.几天的总秒数）/3600秒（也就是1h）=相差天数的剩多少个小时

      var minutes = parseInt(sub % (60 * 60) / 60)//利用相差天数取余的值（也就是0.几天的总秒数）/60秒（也就是1min）=相差天数的剩多少分钟

      var seconds = sub % 60//除以60相当于把相差的分钟得到了，那么相差分钟的小数点后就是剩于的秒数
      var obj = {
        day: day,
        hours: hours,
        minutes: minutes,
        second: seconds
      }
      return obj
    }

    setInterval(
      function () {
        var currentDate = new Date()
        var res = diffTime(currentDate, targetDate)
        // document.write(`京东618-${res.day}天${res.hours}时${res.minutes}分${res.second}秒`)
        // document.write("<br>")不能起到覆盖的效果
        box.innerHTML = `京东618-${res.day}天${res.hours}时${res.minutes}分${res.second}秒`
      }, 1000)
  </script>

3.17BOM

3.18获取浏览器窗口的尺寸

  <script>
    console.log(window.innerHeight, innerHeight)
    console.log(window.innerWidth, innerWidth)
  </script>

3.19浏览器弹出层

3.19.1 window.alert 是在浏览器弹出一个提示框

  <script>
    window.alert('1111111')
  </script>

3.19.2 confirm 是在浏览器弹出一个询问框

一般用于点击选择
当你点击确定的时候，就会得到 true
当你点击取消的时候，就会得到 false

  <button id="btn">click</button>
  <script>
    btn.onclick =function(){
      var res =confirm("你确定删除吗？")
      console.log(res)
      if(res){

      }
    }
  </script>

3.19.3 prompt 是在浏览器弹出一个输入框

  <script>
    var str = window.prompt('请输入内容')
    console.log(str)
  </script>

3.20浏览器的地址栏

3.20.1 location.href

  <button id="btn"> 下一个页面</button>
  <script>
    console.log(location.href) //地址

    btn.onclick = function () {
      location.href = "http://www.baidu.com"
    }
  </script>

点击前

点击后会跳转到百度页面

3.20.2 location.reload

location.reload() 这个方法会重新加载一遍页面，就相当于刷新是一个道理
注意： 不要写在全局，不然浏览器就会一直处在刷新状态

  <button id="btn"> 下一个页面</button>
  <button id="btn2"> 刷新</button>
  <script>
    console.log(location.href) //地址

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

    btn2.onclick = function(){
      location.reload()
    }
  </script>

点击后会刷新页面

3.21浏览器的常见事件

3.21.1 浏览器的 onload 事件

<head>

  <script>
    window.onload = function () {
      //页面所有得资源都加载完后执行 (图片，视频，dom )
      console.log("加载完成")
      console.log(btn)
    }
  </script>
</head>
<body>
  <button id="btn"></button>
</body>

在head中写，如果不是在onload中写，btn就会显示未定义

3.21.2 浏览器的 onresize 事件

这个 onresize 事件是检测当前浏览器窗口的大小发生改变的时候触发
作用：通过 onresize 排版横屏和竖屏切换在不同浏览器中合理显示

<script>
     window.onresize=function(){
        console.log("aaaa")}
</script>

3.21.3 浏览器的 onscroll 事件

这个 onscroll 事件是当浏览器的滚动条滚动的时候触发
或者鼠标滚轮滚动的时候触发
注意：前提是页面的高度要超过浏览器的可是窗口才可以
作用：鼠标滚动达到一定距离，可以设置显示块

  <style>
    body{
      height: 2000px;
    }
  </style>
  <script>
    window.onscroll = function () {
      console.log("scroll")
    }
  </script>

3.22浏览器滚动距离

浏览器内的内容即然可以滚动，那么我们就可以获取到浏览器滚动的距离
浏览器没有动，只不过是页面向上走了
所以，这个已经不能单纯的算是浏览器的内容了，而是我们页面的内容
所以不是在用 window 对象了，而是使用 document 对象

3.23.1 scrollTop

获取的是页面向上滚动的距离,只要浏览器的滚动条滚动，就会出现滚动距离，显示滚上去的距离

一共有两个获取方式
document.body.scrollTop
document.documentElement.scrollTop

两个都是获取页面向上滚动的距离

区别：
IE 浏览器
  -没有 DOCTYPE 声明的时候，用这两个都行
  -有 DOCTYPE 声明的时候，只能用 document.documentElement.scrollTop
  
Chrome 和 FireFox
   -没有 DOCTYPE 声明的时候，用 document.body.scrollTop
   -有 DOCTYPE 声明的时候，用 document.documentElement.scrollTop（一般用这个）
   
Safari
两个都不用，使用一个单独的方法 window.pageYOffset
 -所以使用的时候一般是把console.log(document.body.scrollTop)和
 - console.log(document.documentElement.scrollTop)一起使用，确保兼容性

  <style>
    body{
      height: 2000px;
    }
  </style>
  <script>
    window.onscroll=function(){
      console.log(document.documentElement.scrollTop||
      document.body.scrollTop)
    }
  </script>

3.23.2 scrollLeft

获取页面向左滚动的距离 也是两个方法
document.body.scrollLeft
document.documentElementLeft
两个之间的区别和之前的 scrollTop 一样

  <style>
    body {
      height: 2000px;
      width: 2000px;
    }
  </style>
  <script>
    window.onscroll = function () {
      console.log(document.body.scrollLeft)
      console.log(document.documentElement.scrollLeft)
    }
  </script>

3.23.3 鼠标滚动实现原理

  <div style="height:300px ;width: 100px;"></div>
  <button id="btn">回到顶部</button>
  <style>
    body {
      height: 2000px;
    }
  </style>
  <script>
    window.onscroll = function () 
    {
      console.log(document.documentElement.scrollTop ||
        document.body.scrollTop)
      if ((document.documentElement.scrollTopII || document.body.
        scrollTop)>100) {
        console.log("显示回到顶部按钮")
      }else {
        console.log("隐藏回到顶部按钮")
      }
    }
    btn.onclick=function()
    {
      // 1.两个数字写法
      // window.scrollTo(0,0)

      // 2.2个对象写法
      window.scrollTo(
        {
          left:0,
          top:0
        }
      )
    }
  </script>

3.24浏览器打开标签页

使用window的open属性,可以打开新标签页
使用window的close属性,可以关闭本身的标签页

  <button id="btn">打开新页面</button>
  <button id="btn2">关闭</button>
  <script>
    btn.onclick = function () {
      window.open("http://www.baidu.com")
    }
    btn2.onclick =function(){
      window.close()
    }
  </script>

3.23浏览器的历史记录

3.24浏览器本地存储

3.24.1 localStorage

增 
只能存字符串，所以，如果要存储多个数据，可以利用JSON字符串把对象转化为字符串，取出时再转化为对象
localStorage.setItem("name","kerwin")
第一个参数是名称，可以任意取，第二个参数是要取的数据

取
localStorage.getItem("name")返回值为取出来的数据

删
localStorage.removeItem("name")

清空
localStorage.clear()

3.24.2 sessionStorage

增
sessionStorage.setItem("name","kerwin")

取
sessionStorage.getItem("name")

删
sessionStorage.removeItem("name")

清空
sessionStorage.clear()

localStorage与sessionStorage的区别

永久存储 localStorage
会话存储 sessionStorage 关闭页面就丢失

3.25 记住用户名案例

<body>
  <div>
    用户名：
    <input type="text" id="username">
  </div>

  <div>
    密码：
    <input type="password" id="password">
  </div>

  <div>
    <button id="login">登录</button>
  </div>
  <script>
    //先获取用户名，密码信息进行存储
    var uservalue = localStorage.getItem("uesrname")
    var passvalue = localStorage.getItem("password")

    username.value = uservalue
    password.value = passvalue

    login.onclick = function () {
      localStorage.setItem("uesrname", username.value)
      localStorage.setItem("password", password.value)
    }
  </script>