webapi，window对象，本地存储延迟函数 5秒消失的广告自定义消息提示利用递归实现 js执行机制 locat

延迟函数

 <body>
    <button>延迟执行某个操作</button>
    <button>解除延迟器</button>
    <script>
      let btn1 = document.querySelector('button:nth-of-type(1)')
      let btn2 = document.querySelector('button:nth-of-type(2)')
      let tid
      btn1.addEventListener('click', function() {
        // 开启一个延迟器，延迟执行一个操作
        tid = setTimeout(function() {
          console.log(123)
        }, 3000)
      })
      btn2.addEventListener('click', function() {
        // 开启一个延迟器，延迟执行一个操作
        clearTimeout(tid)
      })
    </script>
  </body>

5秒消失的广告

 <body>
    <button>返回</button>
    <img src="./images/ad.png" alt="" />
    <script>
      let img = document.querySelector('img')
      let button = document.querySelector('button')
      setTimeout(function() {
        img.style.display = 'none'
      }, 5000)

      button.addEventListener('click', function() {
        // history.back()
        history.go(-2)
      })
    </script>
  </body>

自定义消息提示

 <body>
    <button>登陆</button>
    <div class="tip"></div>
    <script>
      let btn = document.querySelector('button')
      let tip = document.querySelector('.tip')
      let tid

      btn.addEventListener('click', function() {
        // 模拟框架中的消息提示
        tip.innerText = '登陆成功'
        tip.style.display = 'block'

        // 三秒之后自动消失
        tid = setTimeout(function() {
          tip.style.display = 'none'
        }, 3000)

        // 鼠标移入到消息提示上之后，清除延迟函数
        tip.addEventListener('mouseenter', function() {
          // clearTimeout(tid)
          clearInterval(tid)
        })
        tip.addEventListener('mouseleave', function() {
          tid = setTimeout(function() {
            tip.style.display = 'none'
          }, 3000)
        })
      })
    </script>
  </body>

利用递归实现

 <body>
    <div></div>
    <script>
      let div = document.querySelector('div')
      // function interval() {
      //   div.innerHTML = new Date().toLocaleString()
      //   // 函数递归：函数内部调用函数自身
      //   setTimeout(interval,1000)
      // }
      // interval()

      // 定时器的第一次也是延迟执行的
      let tid = setInterval(function() {
        console.log(1)
        clearTimeout(tid)
      }, 3000)
    </script>
  </body>

js执行机制

<body>
  <button>点我啊</button>
  <script>
    //输出132，点击button之后才输出4，js代码从上往下执行，先是执行同步任务，然后执行异步任务
    //同步任务:console.log();
    let btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      console.log(4)
    })
    
    console.log(1)

    //异步任务有以下三种类型:
    // 1、普通事件，如 click、resize 等
    // 2、资源加载，如 load、error 等
    // 3、定时器，包括 setInterval、setTimeout 等

    setTimeout(function () {
      console.log(2)
    }, 3000)

    console.log(3)
  </script>
</body>

location对象

 <body>
    <button>帮我跳转到某个页面</button>
    <script> document.querySelector('button').addEventListener('click', function() {
        location.href = './03-5秒消失的广告.html'
      })
    </script>
  </body>

本地存储

 <body>
    <button>设置本地存储</button>
    <button>获取本地存储</button>
    <button>删除本地存储</button>
    <button>干掉所有本地存储</button>
    <script>
      document .querySelector('button:nth-of-type(1)') .addEventListener('click', function() {
          // 设置 -- 新增
          // localStorage.setItem(键，字符串值)
          localStorage.setItem('mykey', '我要放假了')
        })
      document.querySelector('button:nth-of-type(2)') .addEventListener('click', function() {
          // 获取  --  查询
          // localStorage.getItem(键) 返回这个键所对应的字符串值
          // 如果键不存在，就返回null
          let v = localStorage.getItem('mykey')
          console.log(v)
        })
      document.querySelector('button:nth-of-type(3)').addEventListener('click', function() {
          // 删除本地存储：删除指定名称的键和值，如果键不存在，也不会报错
          // localStorage.removeItem(键)
          localStorage.removeItem('mykey')
        })
      document .querySelector('button:nth-of-type(4)').addEventListener('click', function() {
          localStorage.clear() // 删除浏览器中的所有本地存储，谨慎使用
        })
    </script>
  </body>

本地存储存储的和获取的都是字符串

<body>
  <button>设置本地存储</button>
  <button>获取本地存储</button>
  <button>删除本地存储</button>
  <button>干掉所有本地存储</button>
  <p class="name"></p>
  <p class="age"></p>

  <script>
  // 本地存储只能存储字符串格式的数据，如果你存储的不是字符串，它默认就会调用存储数据的toString()，将数据转换为字符串
     let obj = { name: 'jack', age: 18 }
    document.querySelector('button:nth-of-type(1)').addEventListener('click', function () {

      // 将数据对象转换为json格式字符串
      // JSON.stringify(js对象):将js对象转换为json格式字符串
      localStorage.setItem('mykey', JSON.stringify(obj))
    })
    document.querySelector('button:nth-of-type(2)').addEventListener('click', function () {
      // 将json格式字符串重新转换为js对象
      // JSON.parse(json格式字符串)：将字符串转换为js对象
      console.log(JSON.parse(localStorage.getItem('mykey')));
    })
    document.querySelector('button:nth-of-type(3)').addEventListener('click', function () {
      console.log(localStorage.removeItem('mykey'));
    })

  </script>
</body>

自定义属性操作

  <body>
    <p>我是p元素</p>
    <input type="checkbox" checked />
    <button>添加一个自定义属性</button>
    <button>获取一个自定义属性</button>
    <button>移除一个自定义属性</button>

    <script>
      let p = document.querySelector('p')
      let input = document.querySelector('input')
      let btn1 = document.querySelector('button:nth-of-type(1)')
      let btn2 = document.querySelector('button:nth-of-type(2)')
      let btn3 = document.querySelector('button:nth-of-type(3)')

      btn1.addEventListener('click', function() {
        // 为元素设置自定义属性： 元素.setAttribute(自定义属性名称，值)
        // p.setAttribute('id', 10)
        input.setAttribute('myid', 10)
        input.setAttribute('class', 'abc')
        // input.setAttribute('checked', '')
        input.checked = false
      })
      btn2.addEventListener('click', function() {
        // 获取自定义属性的值：元素.getAttribute(自定义属性名称)
        console.log(input.getAttribute('myid'))
        console.log(input.getAttribute('class'))
      })
      btn3.addEventListener('click', function() {
        // 移除自定义属性：元素.removeAttribute(你想移除的自定义属性名称)
        p.removeAttribute('myindex')
      })
     </script>
  </body>

data自定义属性值

  <body>
    <p class="red" data-id="10" data-name="jack" data-age="20">我是p元素</p>
    <button>获取自定义属性的值</button>
    <script>
      let btn = document.querySelector('button')
      let p = document.querySelector('p')
      btn.addEventListener('click', function() {
        // dataset：可以获取当前元素的所有以data-开头的自定义属性，生成一个对象
        console.log(p.dataset)
      })
    </script>
  </body>