js 实现倒计时

最新推荐文章于 2023-12-13 17:55:12 发布
最新推荐文章于 2023-12-13 17:55:12 发布
阅读量153 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41671425/article/details/81633701
版权 

    <html>
    <head>
    <meta charset="UTF-8">
        <title>js简单时分秒倒计时</title>
        <script type="text/javascript">
        function countTime() {
            //获取当前时间
            var date = new Date();
            var now = date.getTime();
            //设置截止时间
            var str="2018/8/14 00:00:00";
            var endDate = new Date(str);
            var end = endDate.getTime();

            //时间差
            var leftTime = end-now;
            //定义变量 d,h,m,s保存倒计时的时间
            var d,h,m,s;
            if (leftTime>=0) {
                d = Math.floor(leftTime/1000/60/60/24);
                h = Math.floor(leftTime/1000/60/60%24);
                m = Math.floor(leftTime/1000/60%60);
                s = Math.floor(leftTime/1000%60);
                h = checkTime(h);
                s = checkTime(s);
                m=checkTime(m);
            }

            //将倒计时赋值到div中
            document.getElementById("_d").innerHTML = d+"天";
            document.getElementById("_h").innerHTML = h+"时";
            document.getElementById("_m").innerHTML = m+"分";
            document.getElementById("_s").innerHTML = s+"秒";
            //递归每秒调用countTime方法，显示动态时间效果
            setTimeout(countTime,1000);
             function checkTime(i) {
                if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
     }
        countTime();
</script>
</head >
<body onload="countTime()" >
<div>
    <span id="_d">00</span>
    <span id="_h">00</span>
    <span id="_m">00</span>
    <span id="_s">00</span>
</div>
</body>
</html>

z效果

小小心LOVE
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现倒计时
09-20
javascript实现倒计时
js几种倒计时实现方式
douyiqing的博客
04-02 8697
1. 常见获取验证码60s倒计时 var second = 60; var timer; // 倒计时 function countDown(){ second--; if(second == 0){ second = 60 clearTimeout(timer) return } timer = s...
JS实现倒计时功能
热门推荐
qq_48954625的博客
12-27 4万+
一、前言 网站在做活动时，会出现一个截止时间倒计时的提示。效果如图： 二、分析 ①提示时间是每秒不断变化的，需要用到定时器(setInterval) //1000表示每隔一秒变化一次，单位为毫秒 setInterval(countDown, 1000); ②三个盒子通过innerHTML进行赋值，放入时、分、秒 ③计算当前时间到截至时间的时间（时间戳：指的不是当前时间，而是距离1970年1月1号过了多少毫秒） +new Date() ④截止时间的时间戳减当前时间的时间戳 ⑤通过..
javaScript实现倒计时功能
qq_65715980的博客
07-08 1万+
目录一、主要思路二、css样式三、html代码四、js内容五、完整代码展示六、效果展示1.通过内置时间函数实例化日期对象获取当前时间 new Date。2.因为时间无法减去时间，有可能生成负数，所以采用时间戳的方法得到毫秒数形式的剩余时间，然后再把剩余时间转换为天、时、分、秒格式。3.最后把所获得的内容赋值给定义的变量。主要为了内容在页面展示美观，稍微美化一下。 三、html代码 定义一个默认格式为JavaScript引入定义变量。 四、js内容 1.首先获取html里面的spans里的全部标签
JS倒计时两种种实现方式
Cover_face
08-10 1623
一：设置时长，进行倒计时。比如考试时间等等 代码如下： <html> <head> <meta charset="UTF-8"> <title>简单时长倒计时</title> <SCRIPT type="text/javascript"> var maxtime = 60 * 60; //一个小时，按秒计算，自己调整! function
javascript实现倒计时跳转页面
10-22
本文给大家介绍了如何使用javascript实现倒计时跳转到其他页面的方法以及实现原理，非常的简单实用，有需要的小伙伴可以参考下。
JavaScript实现倒计时
12-14
JavaScript实现倒计时
js定时器实现倒计时效果
10-19
主要为大家详细介绍了js定时器实现倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯js实现倒计时功能
10-20
本文主要介绍了通过js实现页面的倒计时功能的思路与方法，具有一定的参考价值，下面跟着小编一起来看下吧
用js做一个倒计时(时分秒),js中倒计时器怎么实现
wenangou的博客
11-14 3758
1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 02 分减去22分，结果会是负数的，所以要转换为毫秒；2.用时间戳来做，用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数；3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）。利用JavaScript函数做一个简单的倒计时。
JS实现倒计时效果
m0_55531470的博客
08-19 1万+
案例分析： 1、倒计时效果是不断变化的，因此我们需要定时器来自动变化(setInterval) 2、三个黑盒子里面分别存放时、分、秒 3、三个黑盒子利用innerHTML放入计算的小时、分钟、秒数 4、(程序读取需要时间)第一次执行也是间隔毫秒数，因此刷新页面时会有空白 5、最好采用封装函数的方式，这样先调用一次这个函数，防止刚开始刷新页面有空白问题 6...
js中倒计时器怎么实现,js如何实现倒计时秒
神经网络爱好者
11-03 562
大家好，小编为大家解答js倒计时三种简单实现方式的问题。很多人还不知道js中倒计时器怎么实现，现在让我们一起来看看吧！
Js时间倒计时
是个非常热爱生活、乐观、奋斗、努力的逗比青年
06-29 637
在JavaScript中，时间倒计时 下面代码会创建一个定时器，每秒钟更新一次倒计时，不是能难，记住关键字，运用关键字。好了，js实现倒计时，就写到这了，如果有不对的地方，希望多多指出，望与诸君共同进步！
js倒计时算法
fine1998_的博客
06-01 1062
目录一、Data对象二、时间戳三、封装倒计时函数 Data对象是js的内置对象，它本质上是一个构造函数，表示时间这一大类，包括年月日时分秒等。起始时间：1970年1月1日。Date对象包括的方法： 作用：获取Date对象距离1970年1月1日的总毫秒数。获取方法： 结果： 结果： 注意：函数封装的参数应给Date对象，才能获得完整的时间戳。
倒计时 js vue
最新发布
weixin_49523082的博客
12-13 92
【代码】倒计时 js vue。
JavaScript 实现倒计时
04-08
可以使用JavaScript setinterval()方法来实现倒计时。首先获取当前时间，计算出未来时间与当前时间的时间差，然后将时间差转换成小时，分钟，秒钟的格式，并更新HTML页面上的倒计时显示。代码示例: ``` // Set the ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值