WebApi第五天

最新推荐文章于 2022-02-15 22:56:23 发布

与生俱来人中首

最新推荐文章于 2022-02-15 22:56:23 发布

阅读量212

点赞数

本文链接：https://blog.csdn.net/Bear_with_her/article/details/118424466

版权

一、浏览器窗口的宽高

console.log(window.innerWidth, login.offsetWidth)=>浏览器窗口的宽
console.log(window.innerHeight, login.offsetHeight)=>浏览器窗口的高

二、window对象

// 等到页面上所有的资源全部加载完毕之后再触发
      window.onload = function () {
           // 窗体加载完成包括文档树的加载、还有图片、文件的加载完成。
           let box = document.querySelector('div');
           console.log(box); // div
           // img.offsetWidth img.offsetHeight
       };

三、延时器
语法：setTimeout(callback, time);
参数1：回调函数，时间到了就会执行。
参数2：延迟的时间毫秒数 1秒 = 1000毫秒
返回值：延时器的id，用于清除延时器
延时器的由于需要等待, 在等待期间, 后面的代码会先执行
四、定时器

 // 例：
   <body>
        <button>给我笑</button>
        <button>给我收</button>
      <script>
         let btns = document.querySelectorAll('button');
         let id; // 局部变量无法存储上一次的结果
         btns[0].onclick = function () {
               // 将上一次的定时器清除掉
               clearInterval(id);
               // 开启定时器 => 每一次调用这都一个新定时器, 将这个id都装到一个变量里面去咯.
               id = setInterval(function () {
               console.log('哈哈哈哈哈哈');
            }, 1000);
            // 异步任务: 事件处理函数, 延时器, 定时器
            // console.log('猜猜我是先执行还是后执行');
         };
         btns[1].onclick = function () {
             // 清除定时器
             // clearInterval(需要清除的定时器的id)
             clearInterval(id);
          };
      // 暴力开启定时器的问题
      // 解决
      // 1. 只要点击了之后,将按钮禁用掉.
      // 2. 每一次在开启新定时器之前,将上一次的定时器清除掉(需要保证装定时器id的变量是一个全局变量)
    </script>
  </body>

五、倒计时
1、思路
1. 使用结束时间(未来时间戳) - 开始时间(new Date()) 得到相差的毫秒数, 并转换成秒数
2. 开启定时器, 每一秒钟执行一次, 将获取的秒数自减
3. 将对应的秒数转换成易于阅读的时分秒
2、代码如下

<body>
    <div>距离中午吃饭还有: <span></span></div>
    <script>
      // 思路
      // 1. 使用结束时间(未来时间戳) - 开始时间(new Date()) 得到相差的毫秒数, 并转换成秒数
      // 2. 开启定时器, 每一秒钟执行一次, 将获取的秒数自减
      // 3. 将对应的秒数转换成易于阅读的时 分 秒

      let span = document.querySelector('span');

      // 获取未来时间戳
      let future = +new Date('2021-06-02 12:30:00');
      // 获取当下时间的时间戳 => 从后台获取 => 获取服务器的时间
      let now = +new Date();

      // 得到相差的秒数
      let dTime = Math.floor((future - now) / 1000);
      console.log(dTime);

      // 上来就执行一次 用于解决一秒钟之后才看到的问题
      fn();
      // 开启定时器 一秒钟执行一次
      let timerId = setInterval(fn, 1000);

      function fn() {
        // 将对应的秒数每一秒自行减1
        dTime--;

        // 在这里进行判断
        if (dTime <= 0) {
          // 清除定时器
          clearInterval(timerId);
          span.innerText = `00小时00分钟00秒`;
          return;
        }

        // 将对应的秒数转换成易于阅读的时分秒
        // 1小时 = 3600
        // console.log(dTime / 3600); // 有小数
        let h = Math.floor(dTime / 3600);
        // 1分钟 = 60
        // 取余 => 不够一个小时余下来的秒数
        // console.log(dTime % 3600);
        let m = Math.floor((dTime % 3600) / 60);
        // console.log(m);
        // 直接取余60即可 => 不够60秒
        let s = dTime % 60;
        span.innerText = `${addZero(h)}小时${addZero(m)}分钟${addZero(s)}秒`;
      }

      function addZero(n) {
        return n < 10 ? '0' + n : n;
      }
    </script>
  </body>

六、location对象

<script>
      // location对象也是window的一个属性，location其实对应的就是浏览器中的地址栏。
      document.querySelector('button').onclick = function () {
        // 进行页面跳转
        // console.log(location.href);
        // location.href = 'http://www.baidu.com';
        location.href = './08-history对象.html';
        // 刷新
        // location.reload();
      };
    </script>

七、定时跳转

 <body>
    支付成功, <span>5</span>秒之后跳转回世界名网
    <script>
      let span = document.querySelector('span');

      // 使用定时器倒计时
      // 作为全局变量 倒计时的初始秒数
      let count = 5;

      let timerId = setInterval(function () {
        count--;

        // 进行判断
        if (count <= 0) {
          // 清除定时器
          clearInterval(timerId);
          location.href = 'http://www.baidu.com';
        }

        span.innerText = count;
      }, 1000);
    </script>
  </body>

八、端型

 <script>
      if (navigator.userAgent.indexOf('Mobile') !== -1) {
        // 如果有
        // 跳转到手机端
        location.href = 'http://m.mi.com';
      } else {
        // 否则 跳转到PC端
        location.href = 'http://mi.com';
      }
    </script>

九、history对象=>表示页面的历史记录
1、前进
history.forward();
history.go(1);
2、后退
history.back();
history.go(-1);

与生俱来人中首

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebApi第五天

一、浏览器窗口的宽高console.log(window.innerWidth, login.offsetWidth)=>浏览器窗口的宽console.log(window.innerHeight, login.offsetHeight)=>浏览器窗口的高二、window对象// 等到页面上所有的资源全部加载完毕之后再触发 window.onload = function () { // 窗体加载完成包括文档树的加载、还有图片、文件的加载完成。...
复制链接

扫一扫