Js 限时秒杀【倒计时】【案例】

2021-11-22 20:31:37 阅读：155 来源： 互联网

限时秒杀

限时秒杀（时间倒计时的操作）我们在生活中经常能见到，比如超市抽奖活动，比如某宝商城中某商品限时出售倒计时，再比如电影情节中定时炸弹，是不是来画面感了，铁铁…
在这里插入图片描述
那么这种定时炸弹，(⊙o⊙)…不，这种定时器是怎么做的呢？

废话不多说上代码：
样式：

 <style>
        body {
            background-color: gray;
        }
        
        ul {
            list-style: none;
        }
        
        ul li {
            border: 1px solid black;
            float: left;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-radius: 5px;
            margin-right: 10px;
        }
        
        ul li:nth-child(1) {
            width: 150px;
        }
        
        ul li:nth-child(5) {
            margin: 0;
        }
    </style>

结构：

	<ul>
        <li>开奖时间倒计时</li>
        <li id="d"></li>
        <li id="h"></li>
        <li id="c"></li>
        <li id="s"></li>
    </ul>


**行为：**
```javascript
 	<script>
        // 初始化时间变量
        var d = 0,
            h = 0,
            c = 0,
            s = 0;
        // 设置结束时间
        var endTime = new Date('2021-11-24 19:49:50').getTime();
        //设置定时器 dingshiqi =》 定时器
        var dingshiqi = setInterval(action, 1000);

        function action() {
            // 获取当前时间
            var now_time = new Date().getTime();
            // 距离结束剩余的时间    结束时间-现在时间
            var lase_time = (endTime - now_time) / 1000;
            // 判断是否结束倒计时
            if (lase_time > 0) {
                //计算剩余天数
                d = parseInt(lase_time / (60 * 60 * 24));
                // 计算剩余小时数
                h = parseInt((lase_time / (60 * 60)) % 24);
                // 计算剩余分钟数：
                c = parseInt((lase_time / 60) % 60);
                // 计算当前秒数
                s = parseInt(lase_time % 60);

                //设置输出的格式：（小于10的情况，前面加0）
                d = d < 10 ? '0' + d : d;
                h = h < 10 ? '0' + h : h;
                c = c < 10 ? '0' + c : c;
                s = s < 10 ? '0' + s : s;
            } else {
                clearInterval(dingshiqi);
                d = h = c = s = '00';
            }
            // 把数据传输到html中
            document.getElementById('d').innerHTML = d + '天';
            document.getElementById('h').innerHTML = h + '时';
            document.getElementById('c').innerHTML = c + '分';
            document.getElementById('s').innerHTML = s + '秒';
        }
    </script>

快拿去实现一下吧…

**tips:**定时器的时间是ms（毫秒），别忘了我们需要的是s（秒），记得除1000；
在这里插入图片描述

标签：60,限时,10,Js,倒计时,lase,time,var
来源： https://blog.csdn.net/egg_er/article/details/121479526

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Js 限时秒杀【倒计时】【案例】

限时秒杀