BOM

定时器-延时函数

<script>
setTimeout(function(){

console.log('时间到了');
},5000)

// 清除延时函数
  let timer=setTimeout(回调函数,等待的毫秒数)
  clearTimeout(timer)

</script>

案例五秒消失广告

<style>
  img{
position: fixed;
bottom: 0;
left: 0;
  }
</style>
<body>
  
  <img src="./ad.png" alt="">
  <script>
    // 获取元素
    const img=document.querySelector('img')
    setTimeout(function(){
      img.style.display='none'
    },5000)

同步

异步

location对象

<!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>Document</title>
</head>
<body>
  <a href="#/my">我的</a>
  <a href="#/friend">关注</a>
  <a href="#/download">下载</a>
  <script>
    document.addEventListener('click',function(){
      // console.log(window.Location);

// location.href='http://www.baidu.com' //修改地址栏
console.log(location.search);
// 1.href 经常用href 利用js进行跳转
// console.log(location.href);
// location.hash 获取#后面的东西
console.log(location.hash);
//location.search 

// 方法
//重新加载当前的url
//  location.reload  刷新页面 ctrl+f5强制刷新 (true) 强制刷新
//加载指定的url
// location.assign('http://jd.com')  //会产生历史记录
//替换url
// location.replace('http://taobao.com') //不会产生历史记录
    })
    
  </script>
</body>
</html>

href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

案例五秒之后跳转

<!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>Document</title>
</head>
<body>
  页面会在<span>${i}</span>秒后跳转到百度,或者点击<a href="http://www.baidu.com">立即跳转</a>
  <script>
    const a=document.querySelector('a')
    // 设置倒计时
    let i=5;
   const timer= setInterval(function(){
      i--
      document.querySelector('span').innerHTML=i
      if(i===0){
        clearInterval(timer)
            location.href="http://www.baidu.com"
      }  

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

navigator对象

  <script>
    // navigator
    // 检测 userAgent（浏览器信息）
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn'
}
})()
// (function(){})()
// !function(){}()
  </script>

history对象

本地存储

<script>
    //永久存储在本地 除非手动删除
    //本地存储只能存储字符串
    // 要存储一个名字 
  localStorage.setItem('键','值')
  localStorage.setItem('uname','张三')

  //获取方式 都加引号
  console.log(localStorage.getItem('uname'));
  // 3.删除本地存储 只删除名字
  localStorage.removeItem('uname')
  //4.修改
  localStorage.setItem('uname','red')
  
  </script>

查看方式

本地存储分类- sessionStorage

存储复杂数据类型

<!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>Document</title>
</head>

<body>

  <script>
    const obj = {
      uname: 'pink',
      age: 18,
      gender: 'nv'
    }
    // 存
    // JSON.stringify(复杂数据类型)
    //1.JSON对象 属性和值有引号,而是引号统一是双引号
    // localStorage.setItem('userMessage',JSON.stringify(obj))//类型为JSON字符串
    // 取
    //   const re= localStorage.getItem('userMessage')
    //  const o=JSON.parse(re)
    //  console.log(o.uname);
    // //2. 吧json字符串转换为 对象
    // console.log(JSON.parse(localStorage.getItem('obj')));

    let arr = [{ uname: '张飞' }, { uname: '刘备' }, { uname: '吕布' }, { uname: '关羽' }]
    // 转换为字符串
    
    localStorage.setItem('userMessage',JSON.stringify(arr))
  const  re=JSON.parse(localStorage.getItem('mes'))
console.log(re);
     

    /*  // 复杂数据类型
      let arr = [{ name: '娃哈哈' }]
    // 转化为字符串
    const qq = JSON.stringify(arr)
    localStorage.setItem("wahaha", qq)

    // 再转化为复杂数据类型
    const aa = JSON.parse(qq)
    console.log(aa);    */
 
  </script>
</body>

</html>

因为本地存储里面取出来的是字符串，不是对象，无法直接使用

取出