我想创建一个倒计时手表,以天,小时,分钟和秒显示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提前。
答案 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包装器显示为: