JS第十六次笔记1.BOM 1.1 JS的组成部分 1.2 BOM 1.3 window对象 1.4 定时器-延时函数

1.BOM

1.1 JS的组成部分

1.2 BOM

1.3 window对象

1.4 定时器-延时函数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>点击此处阻止爆炸</button>
  <script>
    //开启延时函数
    // setTimeout(function () {
    //   console.log('我是延时函数')
    // }, 1000)
    //注意：他会延迟执行代码，但是不会阻拦后续代码执行

    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      clearTimeout(timerid)
    })
    let timerid = setTimeout(function () {
      console.log('炸弹爆炸了')
    }, 3000)

  </script>


</body>

</html>

1.4.1案例：定时关闭广告

<!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>5秒钟自动关闭广告</title>
  <style>
    body {
      background-color: #07090c;
    }

    .ad {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .close {
      position: absolute;
      top: 95px;
      right: 4px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="ad">
    <img src="./images/tab00.png" alt="">
    <span class="close"></span>
    <button>点击这里关闭广告</button>
  </div>
  <script>
    const btn = document.querySelector('.close');
    btn.addEventListener('click', function () {
      //在当前事件中关闭广告（btn的父级是ad）
      btn.parentNode.style.display = 'none';
    })

    //2.延时函数可以关闭广告
    if (btn.click && btn.parentNode.style.display !== "none") {
      setTimeout(function () {
        btn.click();
      }, 2000)
    }
  </script>
</body>

</html>

1.5 location对象

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    //1.location 对象介绍
    //1. herf 属性=>获取整个地址栏内容
    //1.2herf也可以赋值，当做跳转页面使用
    console.log(location.href);
    location.href = 'https://www.baidu.com';

    //2.search 属性=>获取查询参数 =>在地址栏后面 采用？键=值的形式拼接

    console.log(location.search);
    //3.hash 属性=>获取的是地址栏中的hash值 #
    console.log(location.hash);
    //作用：后续vue中会用到hash值
    //4.reload方法 =>重新加载当前页面(刷新页面)
    //如果传参数true，则强制刷新页面=>从服务器获取最新的数据
    location.reload();

  </script>

</body>

</html>

1.5.1 案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    button {
      width: 50px;
      height: 50px;
      background-color: red;
    }
  </style>
</head>

<body>
  <button>X</button>
  <a
    href="https://uland.taobao.com/sem/tbsearch?clk1=befb6a5f7fc6be0a64e3c01eb78d3abd&keyword=%E7%B2%AE%E6%B2%B9%E7%B1%B3%E9%9D%A2&localImgKey=&msclkid=bf955f47e8e914af0c5638905834da32&page=1&q=%E7%B2%AE%E6%B2%B9%E7%B1%B3%E9%9D%A2&refpid=mm_2898300158_3078300397_115665800437&tab=all&upsId=befb6a5f7fc6be0a64e3c01eb78d3abd">
    3秒后自动跳至首页</a>

  <script>
    const a = document.querySelector('a');
    let num = 3

    let btn = document.querySelector('button');
    btn.addEventListener('click', function () {
      clearInterval(cancle);
    })
    //如果点击链接，跳转到首页，如果不点，则自动跳转首页
    let cancle = setInterval(function () {
      num = num - 1
      a.innerHTML = `${num}秒后自动跳至首页`
      //跳转
      if (num <= 0) {
        //清除定时器
        clearInterval(cancle)
        location.href = 'https://uland.taobao.com/sem/tbsearch?clk1=befb6a5f7fc6be0a64e3c01eb78d3abd&keyword=%E7%B2%AE%E6%B2%B9%E7%B1%B3%E9%9D%A2&localImgKey=&msclkid=bf955f47e8e914af0c5638905834da32&page=1&q=%E7%B2%AE%E6%B2%B9%E7%B1%B3%E9%9D%A2&refpid=mm_2898300158_3078300397_115665800437&tab=all&upsId=befb6a5f7fc6be0a64e3c01eb78d3abd'
      }

    }, 1000)
  </script>
</body>

</html>

1.6 navigator对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    //检测userAgent（浏览器信息）
    //立即执行函数
    (function(){
      const userAgent = navigator.userAgent;
      //检测是否为Android或者IOS设备
      const android=userAgent.match(/(Android);?[\s\/]+[\d.]+)?/)
      const iphone=userAgent.match(/(iPhone\sOS)\s([\d_]+)/);
      if(android||iphone){
        //如果是移动端，则跳转到移动端页面
       location.href='/mobile.html'
      }else{
        //PC端
      }
    })

  </script>
</body>
</html>

1.7 history对象

1.7.1 forward()+back()

//页面1
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>


<a href="file:///E:/DeskTop/day4/%E5%B0%8F%E5%85%94%E9%B2%9C%E6%A1%88%E4%BE%8B%E7%B4%A0%E6%9D%90/dom.html">点击跳转下一页面</a>

<button>前进</button>


<script>
  //前进
  document.querySelector('button').addEventListener('click', function () {
    history.forward()//返回上一页面
  })
  //后退

</script>
</body>

</html>

1.7.2 back()

//页面二
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <a href="http://www.itcast.cn">传智首页</a>
  <button>前进按钮</button>
  <input type="button" value="后退按钮" onclick="history.back()">

  <script>
    //前进
    document.querySelector('button').addEventListener('click', function () {
      history.forward()//返回上一页面
    })
    //后退

  </script>
</body>

</html>

1.7.3 go(数字(正为前进，负为后退))

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <a href="http://www.itcast.cn">传智首页</a>
  <button class="btn">go方法</button>
  <script>
    document.querySelector('.btn').addEventListener('click', function () {
      //点击按钮跳转到传智首页
      history.go(-1)
    })

  </script>
</body>

</html>

1.8 本地存储

1.8.1 localStorage

1.8.1.1

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    //本地存储 localStorage（持久化存储）
    //1.存数据 localstorage.setItem('key',value)/键，值 （只能存字符串）
    localStorage.setItem('name', '小明')
    //2.获取数据 localStorage.getItem('key')/键
    console.log(localStorage.getItem('name'))
    //3.删除数据 localStorage.removeItem('key')/键
    localStorage.removeItem('name')
    //4.清空数据 localStorage.clear()
    localStorage.clear()
  </script>
</body>

</html>

若未删除本地存储键值对，则可以在应用中的本地存储中找到存储的本地键值对如下图：

如果想要在控制台中输出对象名：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const obj = {//这是对象
      uname: '赵键',
      age: 35
    }
    //将obj存储到本地存储中
    //localStorage.setItem('objjj', obj)
    //意思是将obj这个复杂类型对象存储到一个名为objjj键的值中
    //得到值是字符串 ：
    // 
    // 
    // 
    // 所以不能直接存储 需要将复杂数据转换成JSON格式（字符串格式=>常用于前后端交互）
    //1. 需要使用JSON.parse()方法将对象转换为字符串
    const jsonStr = JSON.stringify(obj)//这是字符串
    localStorage.setItem('objjj', jsonStr)
    //上面两行代码可以简写为 localStorage.setItem('objjj', JSON.stringify(obj))

    // 2.将本地存储的数据取出来，获取用户名
    //注意：我们存储复杂数据类型的时候是存储字符串格式
    //所以我们取出来的也是字符串，没有办法直接使用（需要转换为js对象的形式使用）
    const result=localStorage.getItem('objjj')//这是对象
    const obj1=JSON.parse(result)//3.将字符串转换为对象,此时obj1就是对象了
    //上面两行代码可以简写为 const obj1=JSON.parse(localStorage.getItem('objjj'))
    console.log(obj1.uname)

    //总结：
    //本地存储能存复杂数据，但是需要将复杂数据进行转换 JSON.stringify()
    //取出来的数据需要经过JSON.parse()转换为js数据（对象,数据）

  </script>
</body>

</html>

### 1.8.2 sessionStorage（用法与localstorage一样）

![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2823d7f5174a4aa5bacdf4a7bc3a4010~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg54ix5rOh6ISa55qE6bih6IW_:q75.awebp?rk3s=f64ab15b&x-expires=1772776969&x-signature=i2ElAesoGZ8mXuZD7LQYB30AWlo%3D)

1.8.1.2 localstorage存储复杂数据类型

可以理解为：JSON stringify方法是就将那个js数据转化为字符串类型的JSON数据，因为被转化为字符串而不再是复杂数据类型，所以可以作为“值”输出

1.9综合案例

1.9.1 学生就业统计表

需要数据不丢失：运用到了本地存储

1.9.1.1 map方法和join方法介绍

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>

  </ul>
  <script>
    //map和join方法都可以操作数组，但最终结果是生成一个新数组
    const arr = ['a', 'b', 'c']

    const newArr = arr.map(function (item, index) {//生成一个新数组
      return item + '字母'//必须写上return  否则新数组拿到的都会显示‘undefined’
    })
    console.log(newArr)
  </script>
</body>

</html>

1.9.1.2 数组中map+join方法渲染页面思路

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>学生就业统计表</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <h1>学生就业统计表</h1>
  <form class="info" autocomplete="off">
    <input type="text" class="uname" name="uname" placeholder="姓名" />
    <input type="text" class="age" name="age" placeholder="年龄" />

    <input type="text" class="salary" name="salary" placeholder="薪资" />
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    <select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">
      <i class="iconfont icon-tianjia"></i>添加
    </button>
    <!-- <button type="reset">重置</button> -->
  </form>

  <div class="title">共有数据<span>0</span>条</div>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>录入时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td>1</td>
        <td>nihao</td>
        <td>23</td>
        <td>女</td>
        <td>12000</td>
        <td>北京</td>
        <td>2099/9/9 08:08:08</td>
        <td>
          <a href="javascript:">
            <i class="iconfont icon-shanchu"></i>
            删除
          </a>
        </td>
      </tr>

    </tbody>
  </table>
  <script>
    //参考数据
    const initData = [//这是一个数组 为复杂数据类型
      {
        stuId: 1,
        uname: '迪丽热巴',
        age: 22,
        gender: '女',
        salary: '12000',
        city: '北京',
        time: '2099/9/9 08:08:08'
      }, {
        stuId: 2,
        uname: '迪巴',
        age: 22,
        gender: '女',
        salary: '12000',
        city: '北京',
        time: '2099/9/9 08:08:08'
      }
    ]

    //为了验证下面的函数是否正确
    //先存入一个数据
    let data//全局变量=>存储本地获取的数据
    localStorage.setItem('data', JSON.stringify(initData))


    const tbody = document.querySelector('tbody')


    //业务1：渲染页面=>封装函数
    function render() {
      //1.1因为要做持久化存储，所以我们应该先去本地存储中查看是否存在数据
      //约定
      data = localStorage.getItem('data')

      //判断是否有data
      //存在数据=>一定是一个json字符串，=>需要转化为js对象
      //不存在数据=>就新建一个空数据，等待数据存储
      data = data ? JSON.parse(data) : []
      // console.log(data);
      //1.2遍历数组将数据处理
      const newArr = data.map(function (ele, index) {
        //console.log(ele,index);
        return `
         <tr>
        <td>${ele.stuId}</td>
        <td>${ele.uname}</td>
        <td>${ele.age}</td>
        <td>${ele.gender}</td>
        <td>${ele.salary}</td>
        <td>${ele.city}</td>
        <td>${ele.time}</td>
        <td>
          <a href="javascript:" data-id='${index}'>
            <i class="iconfont icon-shanchu"></i>
            删除
          </a>
        </td>
      </tr>`
      })

      //1.3将处理后的数组newArr拼接成字符串 join('')(用join转换为字符串)
      const str = newArr.join('')
      // console.log(str)
      //1.4将拼接好的字符串赋值给tbody

      tbody.innerHTML = str


    }

    render()
    //业务2：点击按钮新增数据
    const form = document.querySelector('form')
    //获取输入框
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const salary = document.querySelector('.salary')
    //过去下拉菜单的元素
    const gender = document.querySelector('.gender')
    const city = document.querySelector('.city')
    form.addEventListener('submit', function (e) {
      //阻止默认的form行为

      e.preventDefault()
      //2.2判断数据有效性
      if (!uname.value || !age.value || !salary.value) {
        alert('请输入完整数据!')//如果其中一个为空，就提示不能为空
      }

      //2.3新增数据=>对本地存储操作
      //将表单中的数据转换为{}格式

      const obj = {
        //情景：当删除了data数组里的某个用户，再添加新用户，id值可能会发生改变，所以需要获取当前数组的长度然后再加一
        // stuId: data.length + 1,
        //但当数组中的元素全部删除，那么没有最后一个元素了，所以要判断data是否为空数组
        stuId: data.length ? data[data.length - 1].stuId + 1 : 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value,
        time: new Date().toLocaleString()
      }
      data.push(obj)//将数据添加到data数组中
      //console.log(data)//但此时还没做本地存储
      //2.4把数组数据存储到本地存储里，利用JSON.stringify()存储为JSON字符串
      localStorage.setItem('data', JSON.stringify(data))

      //2.5 利用本地存储最新数据渲染页面和重置表单(通过调用render()函数的方式)
      render()
      //重置表单（使用表单.reset()方法）
      this.reset()//因为在from函数里，所以也可以写成this.reset()
    })
    //3.删除业务
    //给tbody绑定点击事件，事件委托的时间给删除按钮注册事件
    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {

        const id = e.target.dataset.id//自定义属性的id值

        const flag = confirm('确定删除吗？')
        if (!flag) {
          return alert('取消删除')


        }
        data.splice(id, 1)//删除数组中指定索引的元素，返回被删除的元素
        //本地存储修改
        localStorage.setItem('data', JSON.stringify(data))


        render()//重新渲染页面
      }
    })


  </script>
</body>

</html>