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

前端 同时被 2 个专栏收录
41 篇文章 0 订阅
9 篇文章 0 订阅

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. 京东秒杀倒计时牌

在这里插入图片描述

实现要点:

  1. 利用setInterval每隔一秒触发自动变换数字

  2. 三个黑色盒子里面分别存入时/分/秒

  3. 给盒子用innerHTML写入时间

  4. 最后把这三个盒子定位到倒计时牌子里即可

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

注意:

  1. 首次执行时即每次刷新页面时, 时间不会立马显示, 因为函数会在一秒后再被触发
  2. 解决方式: 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盒子模型 */
        
        * {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        
        * {
            margin: 0px;
            padding: 0px;
        }
        
        a {
            color: #666;
            text-decoration: none;
        }
        
        .seckill-countdown {
            /* position: relative; */
            /* float: left; */
            display: block;
            width: 190px;
            height: 260px;
            margin: 100px auto;
            color: #fff;
            background-color: #e83632;
            background-image: url(images/jd_seckill.png);
            background-size: contain;
            background-repeat: no-repeat;
            padding-top: 31px;
            overflow: hidden;
            border-top: 31px pink;
        }
        
        .countdown-title {
            /* position: absolute;
            top: 31px;
            left: 0px; */
            width: 100%;
            font-size: 30px;
            font-weight: 700;
            text-align: center;
            /* margin-top: 31px; */
        }
        
        .countdown-main {
            margin: 130px auto auto auto;
            width: 130px;
            height: 30px;
        }
        
        span {
            float: left;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
        
        span:nth-child(n+2) {
            margin-left: 5px;
        }
    </style>
</head>

<body>

    <a href="https://miaosha.jd.com/" class="seckill-countdown" aria-label="京东秒杀">
        <div class="countdown-title">
            京东秒杀
        </div>
        <div class="countdown-main">
            <span class="hour"></span>
            <span class="minute"></span>
            <span class="second"></span>
        </div>

    </a>
    <script>
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2021-4-15 18:00:00'); //输入标准形式目标时间

        // 在刷新页面第一时间显示倒计时
        countDown();
        // 1. 获取当前时间
        // 2. 输入目标时间
        // 3. 倒计时=(目标时间毫秒数-当前时间毫秒数)转化为时分秒

        // 之前写过小组件: 输入标准时间, 返回与现在时间的差值
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>

</body>

</html>

二, location练习

1. 登录进的新页面获取用户名(location.search)

重点: location.search 字符串分割

<script>
    console.log(location.search); // ?uname=andy
    // 1.先去掉?  substr('起始的位置',截取几个字符);
    var params = location.search.substr(1); // uname=andy
    console.log(params);
    // 2. 利用=把字符串分割为数组 split('=');
    var arr = params.split('=');
    console.log(arr); // ["uname", "ANDY"]
    var div = document.querySelector('div');
    // 3.把数据写入div中
    div.innerHTML = arr[1] + '欢迎您';
</script>

2. 5s后自动跳转页面(location.href)

<script>
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    btn.addEventListener('click', function() {
        // console.log(location.href);
        location.href = 'http://www.itcast.cn';
    })
    var timer = 5;
    setInterval(function() {
        if (timer == 0) {
            location.href = 'http://www.itcast.cn';
        } else {
            div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
            timer--;
        }

    }, 1000);
</script>
  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值