setInterval() 定时器 —— 倒计时(秒杀之类的)

最新推荐文章于 2021-09-14 16:39:50 发布
最新推荐文章于 2021-09-14 16:39:50 发布
阅读量575 收藏 2
点赞数 1
文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45645902/article/details/105875149
版权

思路
 这个倒计时是不断变化的，因此需要定时器来自动变化(setInterval)
 三个黑色盒子里面分别存放时分秒，利用 innerHTML 放入计算的小时分钟秒数
 第一次执行也是间隔亳秒数，因此刚刷新页面会有空白。最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题

<!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>
        .box {
   
            margin: 100px auto;
            width: 280px;
        }

        .day,
        .hour,
        .minute,
        .second {
   
            display: inline-block;
            width: 60px;
            line-height: 50px;
            margin: auto
最低0.47元/天 解锁文章
没人回复我哼
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中利用setInterval实现验证码倒计时
q850593913的博客
05-28 384
vue中利用setInterval实现验证码倒计时 setInterval基本用法 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式 setInterval( function () { console.log('hello'); }, 3000) 每隔三秒输出一个 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭 由 s
秒杀定时器
ScumStudy的博客
09-11 158
<div class="box"> <span class="one">限时秒杀</span> <span id="d" class="one"></span> <span class="one">:</span> <span id="h" class="one"></span> <span class=".
京东定时自动秒杀工具
06-23
京东定时自动秒杀工具 python，扫描京东二维码登录，设置时间，定时自动抢购
JS实现倒计时三秒钟跳转到新的页面
怎奈你何的博客
04-01 3454
代码如下： <div id="box"> <p>页面在 <span id="Os">5</span> s后跳转 </p> </div> <script> var Os=document.getElementById("Os"); var num=5; var timer=setInterval(function () { num--;
setInterval()和setTimeout()定时器的区别
荣默默的博客
02-23 566
首先我们都知道，这两个是定时器，现在我就来说说它们两者的区别： setTimeout是代表经过多长时间执行一次，而这次是在加载body的时候，去执行一次表达式，次数是一次 ，所以如果你想让它再 加载就得重新刷新一次即可； 而setInterva函数是从载入后，每隔指定的时间就执行一次表达式，是多次循环执行 相同点： 调用形式一样： setTimeout("testFun()",3000)
实现倒计时的效果（3秒倒计时）
weixin_30319097的博客
06-05 1099
<script> var count=3; //这里设置的是3秒 window.setInterval(go,1000); function go(){ count--; if(count==0) window.location.href="$!url"; } </script> 转载于:https://www.cnblogs....
js定时器setInterval() 和setTimeout()的区别
weixin_34413802的博客
11-30 169
setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的function，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。 不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码；而setTimeout只执行一次那段代码，所以一般setTime...
php中setinterval,JS使用setInterval计时器实现挑战10秒
weixin_39762856的博客
03-21 197
JS实现挑战10秒，主要用到setInterval计时器，供大家参考，具体内容如下效果图## 完整代码js计时器挑战10.00秒00:00var n= 0, timer=null;var txt=document.getElementById("time");//开始计时function oStart() {clearInterval(timer);timer=setInterval(functi...
setInterval() 定时器 —— 发送短信验证码倒计时
赚钱养自个儿的博客
05-01 518
    学习来源：https://www.bilibili.com/video/BV1HJ41147DG   要求  点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信。 思路  1、按钮点击之后，使用禁用 disabled = true;  2、同时按钮里面的内容会变化，注意 button 里面的内容通过 innerHTML 修改  3、里面秒数是有变化的，因此需要用到定时器 &am...
详解微信小程序用定时器实现倒计时效果
11-28
如果实现简单的60s倒计时效果，我们可直接使用setInterval即可，但是在微信小程序中，我们需要用微信小程序的语法，这时就会遇到一个难题，那就是怎么关闭定时器的问题，下面给出实例。 WXML代码 倒计时：...
html5利用setInterval实现新年元旦倒计时
12-14
html5利用setInterval实现新年元旦倒计时
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
12-28
时钟 　最简单的时钟制作办法是通过正则表达式的exec()方法，将时间对象的字符串中的时间部分截取出来，使用定时器刷新即可 <div id=myDiv></div> [removed] myDiv[removed] = /\d\d:\...　简易倒计时就是每
vue setInterval 定时器失效的解决方式
10-15
主要介绍了vue setInterval 定时器失效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JS使用setInterval实现的简单计时器功能示例
12-09
本文实例讲述了JS使用setInterval实现的简单计时器功能。分享给大家供大家参考，具体如下： 使用setInterval实现计时，并且满60秒向分钟进一，满60分钟向小时进一。 <!DOCTYPE html> <html> <head>...
定时器的秒杀应用
weixin_44809440的博客
04-15 72
定时器的秒杀应用 Document
js实现倒计时
dawuafang
07-24 87
&lt;SCRIPT LANGUAGE="JavaScript"&gt; &lt;!-- var maxtime = 60*60;//60*60 //一个小时，按秒计算，自己调整! function CountDown(){ if(maxtime&gt;=0){ //minutes = Math.floor(maxtime/60); seconds = Math.floor(maxt...
js中利用setInterval实现简单的倒计时
bear06的博客
11-17 5593
以下代码实现在中插入一个10秒倒计时           var num=10;                                                                                               //初始化计数器             document.getElementById("div1").inner
JS setInterval()/setTimeout()——实现动态时间，倒计时
足各路
01-07 9412
一.动态时间 1.setInterval() 实现 html部分： &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;meta charset=&amp;amp;amp;amp;am
[js] 秒表计时 （setInterval clearInterval） 防止多个定时器的同时触发
qq_14993591的博客
09-14 888
点击开始 开始/继续 计时 每一秒 秒数 累加1 满 60 就 向前进位 累加数值 清零 点击停止 停止 计时 清除定时器 停止定时器程序的执行 点击重置 重置 计时 code: <div>00:00:00</div> <button name="start">开始</button> <button name="stop">停止</button> <button name="reset"&gt.
用js定时器写出京东倒计时秒杀
最新发布
06-01
好的，以下是一个简单的使用 JavaScript 定时器实现的京东倒计时秒杀的示例代码： HTML 代码： ```html <div id="countdown"></div> ``` JavaScript 代码： ```javascript // 设置秒杀结束时间，这里以2022年1月1日0点为例 var endTime = new Date('2022-01-01 00:00:00').getTime(); // 获取倒计时元素 var countdown = document.getElementById('countdown'); // 定义定时器 var timer = setInterval(function() { // 获取当前时间 var now = new Date().getTime(); // 计算距离秒杀结束的时间 var distance = endTime - now; // 计算剩余时间 var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // 显示剩余时间 countdown.innerHTML = '距离秒杀结束：' + days + '天 ' + hours + '小时 ' + minutes + '分 ' + seconds + '秒'; // 如果秒杀时间已经结束，则清除定时器 if (distance < 0) { clearInterval(timer); countdown.innerHTML = '秒杀已结束'; } }, 1000); // 定时器每秒钟执行一次 ``` 这段代码会在页面中显示一个倒计时，显示距离 2022 年 1 月 1 日 0 点的剩余时间，每秒钟更新一次，当时间到达后会显示秒杀已结束。你可以根据实际情况修改代码中的秒杀结束时间和倒计时元素的 ID。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值