js倒计时

场景:给一个终点的时间戳。比如明天或者后天12:00:00 为终点时间。然后倒计时,不管页面刷新与否倒计时不误差!

实现原理:计算当前的时间戳,用终点时间戳减去当前时间戳。(结果可能是毫秒,如果是毫秒请转化为秒)计算的结果为妙,将秒转化为时间,实现倒计时。


<div class="container-fluid main">
    <h5>倒计时功能</h5>
    <hr>
    <a href="" class="btn btn-info timer"></a>
</div>

<script src="/js/jquery.slim.min.js" ></script>
<script type="text/javascript">
    function countdown() {//倒计时
        end_time=1508227190; //终止时间
        var curr_time = parseInt(Date.parse(new Date())/1000);
        var diff_time=parseInt(end_time-curr_time);// 倒计时时间差
        var h = Math.floor(diff_time / 3600);
        var m = Math.floor((diff_time / 60 % 60));
        var s = Math.floor((diff_time % 60));
        $('.timer').html(h + "时" + m + "分" + s + "秒");
        if (diff_time<=0) {
            $('.timer').html(0 + "时" + 0 + "分" + 0 + "秒");
        };
    }
    countdown();
    var start_time=setInterval('countdown()',1000);
</script>

测试结果:
为0秒的时候自动清除计时,并且为0时0分0秒。开始的时候没有暂停1秒迹象。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在开发过程中发现到我们锁屏或切到后台以后,h5界面写的js倒计时停止,不想通过原生监听,解决此问题尝试方法如下 1...
    非小惰阅读 11,293评论 0 4
  • var hourtime=prompt("输入下班时间,如下: ","17:30:00"); function d...
    eyuxiog阅读 3,153评论 0 0
  • 距离下一个元旦还有多久的倒计时
    唐墨痕阅读 2,350评论 0 0
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 14,020评论 6 13
  • 作者:王乐天 (荔林小学五年3班) (一)路上一个宁静的下午,前方的路是那么的平坦。我骑着单车,脚踩着踏板。风在耳...
    今宵无酒阅读 3,101评论 3 3

友情链接更多精彩内容