js定时器和案例

最新推荐文章于 2024-10-06 04:03:15 发布

十安十里

最新推荐文章于 2024-10-06 04:03:15 发布

阅读量64

点赞数

本文链接：https://blog.csdn.net/weixin_54447214/article/details/119840297

版权

javascript

js定时器和案例：

1.定时器语法简单 setTimeout() setInterval（）
前者执行只执行一次代码，后者循环执行
2.clearTimeout() clearInterval（）清除相应的

全部代码

	<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 500px;
            height: 200px;
            line-height: 200px;
            border: 1px solid red;
            margin: auto;
            text-align: center;
            margin-top: 100px;
            box-sizing: border-box;
        }
        .span {
            display: inline-block;
            width: 70px;
            height: 70px;
            line-height: 70px;
            border: 1px double red;
        }
        span {
            vertical-align: middle;
        }   
        #but {
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <span>秒杀价</span>
        <span id="d" class="span"></span>
        <span id="h" class="span"></span>
        <span id="m" class="span"></span>
        <span id="s" class="span"></span>
        <input class="span" id="but" type="button" value="开抢">
       //这块是隐藏的，时间跳出来的时候，会跑出来
    </div>
    <script>
        // 设置秒杀结束时间,
        var date = new Date('2021-8-20 20:20'), endtime = date.getTime();
        var d = h = m = s = time = 0;
        var timer = "";
        function select() {
            var now = new Date(), nowtime = now.getTime();
            // 现在的时间
            // 时间差,以秒为单位
            time = parseInt((endtime - nowtime) / 1000);
            if (time > 0) {
                // 天数
                d = parseInt(time / 86400);
                // 小时
                h = parseInt((time / 3600) % 24);
                // 分钟
                m = parseInt((time / 60) % 60);
                // 秒
                s = parseInt(time % 60);
		//这里是让其输出的数在个位的时候都是两位数
                d = d >= 10 ? d : '0' + d;
                h = h >=10 ? h : '0' + h;
                m = m >= 10 ? m : '0' + m;
                s = s >= 10 ? s : '0' + s;
            }
            else {
                // 清除时间
                clearInterval(timer);
                d = h = m = f = "00";
                document.getElementById('but').style.display = "block";
            }
            document.getElementById('d').innerHTML = d + '天';
            document.getElementById('h').innerHTML = h + '时';
            document.getElementById('m').innerHTML = m + '分';
            document.getElementById('s').innerHTML = s + '秒';
        }
        timer = setInterval(select, 1000);;
    </script>
</body>
</html>
``