创建一个倒计时钟

时间:2016-10-22 15:19:57

标签: javascript jquery

我想创建一个倒计时手表,以天,小时,分钟和秒显示2017年8月14日左前的时间我有这个代码来显示实时(希望它可以帮助其他人)但我不喜欢'我知道如何根据我的需要进行编辑。

<script type="text/javascript">
tday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");

function GetClock(){
var d=new Date();
var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear();
if(nyear<1000) nyear+=1900;
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;

if(nhour==0){ap=" AM";nhour=12;}
else if(nhour<12){ap=" AM";}
else if(nhour==12){ap=" PM";}
else if(nhour>12){ap=" PM";nhour-=12;}

if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;

document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
}

window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>
<div id="clockbox"></div>

我用谷歌搜索了它,但我得到的只是jquery插件,我全都是jquery但我不想要没有愚蠢的插件。所以一旦设定的日期到来,我希望它显示00:00:00: 00(或其他一些替代品,比如制作计数器消失),直到我为明年编辑它。任何帮助很多apreeciated.thanks提前。

1 个答案:

答案 0 :(得分:0)

我昨天就用过这个:

https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/

我做了一些修改,因为我必须使用时间戳:

var currentTime = {
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0
};
var sending = false;
var $clockDays = $('.coupon-wrapper .clock-days');
var $clockHours = $('.coupon-wrapper .clock-hours');
var $clockMinutes = $('.coupon-wrapper .clock-minutes');
var $clockSeconds = $('.coupon-wrapper .clock-seconds');
var dataNow = $('.coupon-wrapper .cupon-time-value').attr('data-now');
var dataEndLine = $('.coupon-wrapper .cupon-time-value').attr('data-endline');
var countDownClock = {
    firstRun: true,
    getTimeRemaining: function (startTime, endTime){
        var t = endTime - startTime;
        var seconds = Math.floor( (t/1000) % 60 );
        var minutes = Math.floor( (t/1000/60) % 60 );
        var hours = Math.floor( (t/(1000*60*60)) % 24 );
        var days = Math.floor( t/(1000*60*60*24) );
        return {
            'total': t,
            'days': days,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        };
    },
    initializeClock: function(startTime, endTime){
        start = new Date(startTime * 1000);
        end = new Date(endTime * 1000);
        var timeinterval = setInterval(function(){
            var t = {};
            start.setSeconds(start.getSeconds() + 1);
            t = countDownClock.getTimeRemaining(start, end);
            if (countDownClock.isDifferentFromTheLastComparison(currentTime.days, t.days)) {
                $clockDays.text(t.days);
                currentTime.days = t.days;
            }
            if (countDownClock.isDifferentFromTheLastComparison(currentTime.hours, t.hours)) {
                $clockHours.text(('0' + t.hours).slice(-2));
                currentTime.hours = t.hours;
            }
            if (countDownClock.isDifferentFromTheLastComparison(currentTime.minutes, t.minutes)) {
                $clockMinutes.text(('0' + t.minutes).slice(-2));
                currentTime.minutes = t.minutes;
            }
            $clockSeconds.text(('0' + t.seconds).slice(-2));
            currentTime.seconds = t.seconds;
            if (countDownClock.firstRun) {
                countDownClock.firstRun = false;
                $('.coupon-wrapper .coupon-time-wrapper').fadeIn(200);
            }
            if(t.total <= 0){
                clearInterval(timeinterval);
            }
        },1000);
    },
    isDifferentFromTheLastComparison: function(currentValue, newValue) {
        if (currentValue != newValue) {
            return true;
        }
        return false;
    }
};
countDownClock.initializeClock(dataNow, dataEndLine);

重要信息:当页面加载时,clock div包装器显示为: