js(借助jquery库)实现倒计时

原创 2017年01月05日 11:55:30

不考虑样式,在此上一段 js倒计时的代码

function countDown(){
    var time_now = new Date();
    var time_end = new Date(2017, 0, 6,21,29,59);//月份记得减1
    time_end = time_end.valueOf();
    time_now = time_now.valueOf();
    var time_diff = time_end - time_now;
    if((time_diff - 1000) < 0){//倒计时已结束,根据需要自行调整
        clearInterval(count_down_timer);
        $('.count-day').html('0');
        $('.count-hour').html('0');
        $('.count-min').html('0');
        return;
    }
    time_diff = new Date(time_diff);

    var diff_day = (time_diff.getDate()-1).toString();//天
    var diff_hour = (time_diff.getHours()-8).toString();//时
    var diff_minute = (time_diff.getMinutes()).toString();//分 
    var diff_second = (time_diff.getSeconds()).toString();//秒
}
$(function(){
    countDown();
    count_down_timer = setInterval('countDown()',1000);//每秒轮询一次
});

这是用在距离倒计时的日子还有多少天、时、分、秒。

<!DOCTYPE html>
<html>
<head>
    <title>倒计时</title>
    <meta charset="utf-8">
</head>
<body>
    <script type="text/javascript">
        var SECOND_BASE = 1000;
        var MINUTE_BASE = 60 * SECOND_BASE;
        var HOUR_BASE = 60 * MINUTE_BASE;
        var DAY_BASE = 24 * HOUR_BASE;
        function getCountDown(time_end){
            var time_now = new Date();
            time_end = time_end.valueOf();
            time_now = time_now.valueOf();
            diff = time_end - time_now;
            var result = [0,0,0,0];
            if(diff < 1000){
                result[0] = -1;
            }else{
                result[0] = parseInt(diff / DAY_BASE);
                diff %= DAY_BASE;
                result[1] = parseInt(diff / HOUR_BASE);
                diff %= HOUR_BASE;
                result[2] = parseInt(diff / MINUTE_BASE);
                diff %= MINUTE_BASE;
                result[3] = parseInt(diff / SECOND_BASE);
            }
            return result;
        }

        window.onload = function() {
            var res = getCountDown(new Date(2017, 0, 6,21,29,59));
            console.log(res);
        }
    </script>
</body>
</html>

jquery/js实现一个网页同时调用多个倒计时(最新的)

jquery/js实现一个网页同时调用多个倒计时(最新的) 最近需要网页添加多个倒计时. 查阅网络,基本上都是千遍一律的不好用. 自己按需写了个.希望对大家有用. 有用请赞一个哦!...
  • wuchengzeng
  • wuchengzeng
  • 2015年11月25日 15:24
  • 2860

一个页面多个倒计时 js

jQuery倒计时(CountDown)小插件 可以用于一个页面多个倒计时,调用也非常方便。 /*jquery.countdown.js*/(function($){ var count...
  • baicp3
  • baicp3
  • 2014年03月30日 21:26
  • 2680

jquery如何实现倒计时效果

首先获取当前时间与目标时间的时间差,然后通过定时器更新这个时间差,就实现了倒计时效果。实现上述过程需要以下两个函数: 1 2 getTime()     ...
  • yongzhen150
  • yongzhen150
  • 2017年01月04日 15:48
  • 913

简单实用jquery实现数字读秒的倒计时代码

var intDiff = parseInt(900000);//倒计时总秒数量 function timer(intDiff){ window.setInterval(func...
  • qq_22074635
  • qq_22074635
  • 2016年01月29日 16:24
  • 1833

jquery 做一个小的倒计时效果

html 小米 Note 顶配版 全网通 香槟金 移动...
  • FungLeo
  • FungLeo
  • 2015年10月27日 13:08
  • 1247

点击按钮出现60秒倒计时js代码

无标题文档            var countdown=60;  function settime(val) {  if (countdown == 0) {  val.removeAttr...
  • caixiajia
  • caixiajia
  • 2016年10月13日 11:34
  • 1156

js实现发送短信验证码后60秒倒计时

js方法和jquery方法实现60秒倒计时
  • I_am_listen
  • I_am_listen
  • 2016年11月06日 20:35
  • 21533

点击按钮出现60秒禁用倒计时js代码

无标题文档 var countdown=60; function settime(val) { if (countdown == 0) { val.removeAttri...
  • wybshyy
  • wybshyy
  • 2016年08月04日 10:39
  • 2115

js使用setInterval实现倒计时

利用setInterval制作简单的js倒计时,点击按钮将触发定时器且按钮不可用html:获取校验码JS: var i; function getCode(){ $("#code"...
  • itmyhome
  • itmyhome
  • 2015年05月19日 22:14
  • 4006

JS实现倒计时三秒跳转后到新页面

为了是网站的页面更友好,更加人性化,我们往往会在操作错误或是成功的时候进行提示然后跳转到相应的页面。同时为了使页面更加美化,我们往往会加上倒计时跳转功能,也就是使网页上的秒杀呈现倒数显示。下面就是具体...
  • Zhihua_W
  • Zhihua_W
  • 2016年11月05日 09:26
  • 6422
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js(借助jquery库)实现倒计时
举报原因:
原因补充:

(最多只允许输入30个字)