JS-WebAPI-BOM练习题(定时器/页面跳转)

最新推荐文章于 2022-11-20 20:40:23 发布

阿门阿前下的蜗牛

最新推荐文章于 2022-11-20 20:40:23 发布

阅读量713

点赞数

分类专栏：前端练习

本文链接：https://blog.csdn.net/Fky_mie/article/details/114941979

版权

本文介绍了JavaScript的BOM（浏览器对象模型）练习，包括定时器的应用，如3秒后自动关闭广告和京东秒杀倒计时的实现，以及location对象的使用，如通过location.search获取登录用户名和设置5秒后自动跳转页面的方法。通过这些实例，深入理解JavaScript的定时器和页面导航功能。

摘要由CSDN通过智能技术生成

JS-API第5天-BOM练习题

文章目录

JS-API第5天-BOM练习题

一, 定时器练习

练习1. 3秒后自动关闭广告

<body>
    <img src="images/cj.jpg" alt="" class="ad">
    <script>
        var ad = document.querySelector('.ad');
        setTimeout(function() {
    
            ad.style.display = 'none';
        }, 5000);
    </script>
</body>

练习2. 京东秒杀倒计时牌

在这里插入图片描述

实现要点:

利用setInterval每隔一秒触发自动变换数字
三个黑色盒子里面分别存入时/分/秒
给盒子用innerHTML写入时间
最后把这三个盒子定位到倒计时牌子里即可

待改进: 超过倒计时停止计时

注意:

首次执行时即每次刷新页面时, 时间不会立马显示, 因为函数会在一秒后再被触发
解决方式: 0s时, 有两件事同时发送: 调用一次函数 && 定时器开启, 这样0s时函数被调用能防止空白. 即, 把函数在定时器前调用一次

<!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>秒杀倒计时牌子</title>
    <style>
        /* 特殊样式补充： */
        /* CSS3盒子模型 */
        
        * {