web APIs 第三天：window对象， 延时器，定时器，时间戳， location对象， navigator对象， histroy对象，本地存储

原创 已于 2024-12-12 15:41:42 修改 · 424 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

于 2024-12-02 20:45:54 首次发布

1.window对象

<!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>
    // window 对象：var 声明的全局变量 都是 Window 对象的属性；全局函数是 Window 对象的方法
    // console.log(window)
    // window.alert('window.alert')
    // ar定义的变量和function函数都是window对象的属性和方法
   var username = '小红'
   console.log(username)
   console.log(window.username)
   

   //let age=18
// console.log(window.age)

function fn(){
console.log('这是函数')

}
   window.fn()
  </script>
</body>
</html>

2. 延时器

<!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>
    // 语法：setTimeout（回调函数，等待的毫秒数）
    // setTimeout 定义延迟器
    // 变量名一般用timer
   let timer = setTimeout(function(){
    console.log('我3000毫秒后出现的')
    
   },3000)

    //clearTimeout 清除延迟器
    // 语法：clearTimeout(延迟器的id)
    clearTimeout(timer)
    
  </script>
</body>
</html>

3.案例-五秒自动关闭

<!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/ad.png" alt="">
    <span class="close"></span>
  </div>
  <script>
    // 单击按钮关闭广告；不点关闭，5秒后自动关闭
    // 点X给div添加display：none
    // 单击关闭
  const ad = document.querySelector('.ad')
  const xx = document.querySelector('.close')
  // 点击事件
  xx.addEventListener('click',function(){
    //ad的样式，display点击后隐藏
    ad.style.display = 'none'
  })

  // 自动关闭
  // 延迟器语法：setTimeout(回调函数，等待的毫秒
setTimeout(()=>{
//ad的样式，display点击后隐藏
//ad.style.display = 'none'
//调用点击事件
xx.click()
},5000)
  </script>
</body>

</html>

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 class="btn1">开启定时器</button>
  <button class="btn2">关闭定时器</button>

  <script>
    // setInterval(函数, 间隔时间)

    // 匿名函数
    // setInterval(function () {
    //   console.log('定时器')
    // }, 2000)

    // 定义函数
    // setInterval(fn, 2000)
    // function fn() {
    //   console.log('定时器函数')
    // }

    const btn1 = document.querySelector('.btn1')
    const btn2 = document.querySelector('.btn2')

    // 全局变量
    let timer = null

    //  点击事件，里面写定时器的效果
    btn1.addEventListener('click', function () {
      // 定时器：setInterval（函数，毫秒为单位时间）
      // setInterval开启定时器
      // 防抖 -- 开启一个定时器之前，关掉之前的定时器
      clearInterval(timer)     //连续点击'这是间隔执行的' 会重复开启定时器 会让速度过快
      timer = setInterval(function () {
        console.log('这是间隔执行的')
      }, 2000)


    })
    btn2.addEventListener('click', function () {
      //clearInterval（定时器的id）
      // clearInterval暂停定时器
      clearInterval(timer)
    })


  </script>
</body>

</html>

5.时间戳

<!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 date = new Date()
  //  const date = new Date()
  // 现在的时间
  const date = new Date('2222-2-2 2:22:22')

  // console.log(+new getTime())
    // console.log(+new Date())
    // 
    console.log(+new Date('2222-2-2 2 2:22:2'))
    console.log(Date.new())
 
    
  </script>
</body>
</html>

6.案例-倒计时

<!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>
  <style>
    .countdown {
      width: 240px;
      height: 305px;
      text-align: center;
      line-height: 1;
      color: #fff;
      background-color: brown;
      /* background-size: 240px; */
      /* float: left; */
      overflow: hidden;
    }

    .countdown .next {
      font-size: 16px;
      margin: 25px 0 14px;
    }

    .countdown .title {
      font-size: 33px;
    }

    .countdown .tips {
      margin-top: 80px;
      font-size: 23px;
    }

    .countdown small {
      font-size: 17px;
    }

    .countdown .clock {
      width: 142px;
      margin: 18px auto 0;
      overflow: hidden;
    }

    .countdown .clock span,
    .countdown .clock i {
      display: block;
      text-align: center;
      line-height: 34px;
      font-size: 23px;
      float: left;
    }

    .countdown .clock span {
      width: 34px;
      height: 34px;
      border-radius: 2px;
      background-color: #303430;
    }

    .countdown .clock i {
      width: 20px;
      font-style: normal;
    }
  </style>
</head>

<body>
  <div class="countdown">
    <p class="next">今天是2222年2月22日</p>
    <p class="title">下班倒计时</p>
    <p class="clock">
      <span id="hour">00</span>
      <i>:</i>
      <span id="minutes">25</span>
      <i>:</i>
      <span id="second">20</span>
    </p>
    <p class="tips">18:30:00下课</p>
  </div>
  <script>
    // 倒计时案例 当前距离  2023年1月28日 18:30 还剩多少时间

    //  转换公式
    //  h = parseInt(总秒数 / 60 / 60 % 24)   //   计算小时
    //  m = parseInt(总秒数 / 60 % 60)        //   计算分数
    //  s = parseInt(总秒数 % 60)             //   计算当前秒数

    // 1. 封装 getTimer 函数： 将来的时间戳减去现在的时间戳可以得到剩余的时间戳
   // 晚上6：30的时间戳－现在的时间戳
  //  new是创建的对象，+是转成数字类型的
  function tt (){
    // 晚上的时间戳
    const end = +new Date('2024-11-24 21:30:00')
   
  //  获取现在的时间戳
   const now = Date.now()

    const num = (end - now) / 1000   //算的是秒数
    // console.log(num)
    // 
    let h = parseInt(num / 60 / 60 % 24)
   //小于10的数字补0
    h =h<10 ? '0'+ h:h
   let m = parseInt(num / 60 % 60)        //   计算分数
    m = m<10 ? '0' + m:m
   let s = parseInt(num % 60) 
    s = s<10 ? '0' + s:s
    // 的毫秒数转时分秒

    // 写入到span标签
    // innerHTML输出细节
    document.querySelector('#hour').innerHTML = h
    document.querySelector('#minutes').innerHTML = m
    document.querySelector('#second').innerHTML = s
  }
   tt()
  //  计时器1秒一变
   setInterval(tt,1000)
  // 思路：每隔一秒执行一次，代码放到setInterval里面
  //未来时间－现在时间→转秒数→转时分秒→写入到html页面

  </script>
</body>

</html>

7.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>
  <form action="">
    <input type="text" name="username">
    <button>提交</button>
  </form>

  <a href="#/music">音乐</a>

  <button class="btn">刷新</button>
  
  <script>
    // location是对象，它拆分并保存了URL(是自己定义的)地址的各个组成部分
    console.log(location)
    // 跳转地址
    // href:属性，获取完整的URL地址，赋值时用于地址的跳转 (重点)
    // location.href = 'http://www.baidu.com'

    // 表单点按钮可以触发提交事件 → submit
    const form = document.querySelector('form')
    form.addEventListener('submit',function(e){
      // console.log(11)
      
      // 拿 路径 ？后面的 -- 查询参数
      // search:属性，获取地址中携带的参数，符号？后面部分
      console.log(location.search)
      // e.preventDefault阻止跳转
      e.preventDefault()
      
    })
    const a = document.querySelector('a')
    a.addEventListener('click',function(){
      // 获得#后面
      // hash:属性，获取地址中的啥希值，符号#后面部分
      console.log(location.hash)
      
    })

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

8.案例-五秒之后页面跳转

<!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>
    strong {
      color: red;
    }
  </style>
</head>
<body>
  
  支付成功<strong>5</strong>秒钟之后跳转首页

  <script>
    // 在页面查找到strong标签
  const shrong = document.querySelector('strong')
    let num = 5
    // 开启定时器，给秒钟跳转的判断条件
    setInterval(function(){
      num--
      if(num<=0){
        // 判断条件在秒数小于等于0时，跳转页面
        location.href = 'http://www.baidu.com'
        // 最好跳转后，return退出当前函数，让后面代码不执行
        return
      }
      // innerHTML获取标签的内容
      shrong.innerHTML = num
      
      
    },1000)
   
    // 
  </script>
</body>
</html>

9.navigator对象

<!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>navigator对象</title>
</head>

<body>
  PC端页面
  <script>
    // 检测 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'
      }
    })()


  </script>
</body>

</html>

10.histroy对象

<!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>histroy对象</title>
</head>
<a href="./10-histroy对象.html">跳转到10页面</a>
<body>
  <button class="back">←后退</button>
  <button class="forward">前进→</button>
  <script>
    // console.log(window)
    //window.alert（带window对象的alert')
    // histroy对象方法
    varusername='小红'
    console.log(username)
    console.log(window.username)
    
    //let age=18
    // console.log(window.age)
    

    function fn (){
      console.log(这是函数)

    }
    window.fn()
  </script>
</body>

</html>

11.本地储存-基本类型

<!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.setItem 存储数据
    // 类名相同后面的会覆盖前面的
    localStorage.setItem('name','蓝莓')
    localStorage.setItem('name','肉松')


    //localStorage. getItem读取数据
   console.log( localStorage.getItem('name'))
   
   

    //localStorage.removeIte 删除数据
   localStorage.removeItem('name')
  </script>
</body>
</html>

12.本地储存-基本类型

<!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 pig = {
      name: '佩奇',
      age: 5
    }

    // localStorage.setItem('zhu', pig)  // [object Object]
    localStorage.setItem('zhu',JSON.stringify(pig))
    // console.log(JSON.stringify(pig))
    // localStorage.getItem读取数据
    console.log(localStorage.getItem('zhu'))   //JSON是格式的名字
  //  想要用对象转换JsoN.parse把json格式的字符串转回复杂类型数字
  const newobj = JSON.parse(localStorage.getItem('zhu'))
  console.log(newobj.name)
    
   



  //存储复杂类型的数据先转成JSON格式的字符串
  //"name"："佩奇”--JSON格式的字符串的引号都是双引号
  //console.log(JsoN.stringify(pig))


  //1.基本类型－直接写数据存储
  //2．复杂类型
  //存：先JSoN.stringify转成JSoN格式的字符串
  //取：JSON.parse转回原有复杂类型
    
  </script>
</body>
</html>

13.set类型

<!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 s = new Set()
  // s.add是添加数据
  //   s.add(1)
  //   s.add(10)
  //   s.add(100)
  //  s.delete是删除
  //   s.delete(10)

  //   console.log(s)
    
  const arr = [10,20,30,20,50]

  // /转集合→再转回数组（...展开运算）
  // console.log()
  const s = new Set(arr)
  console.log([...new Set(arr)])
  </script>
</body>
</html>

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值