场景
- 在开发网站前端时，有时候需要
Javascript进行倒计时，并显示在页面上. 如何做？
说明
-
Javascript有内置的Date对象来处理日期，并且可以通过getTime获取自从UTC 1970来现在的总毫秒数。通过两个日期的总毫秒数相减，可以得到日期时间间隔。 -
计算日期时间间隔; 注意
JavaScript的原生Date对象的month是0-11,比如9代表10月份. -
Date对象有相关的getUTFXXX方法，可以得到UTC的年月日时分秒的数值。
例子
- 这个例子输入未来日期时间，获得到这个日期的倒计时，并格式化输出。
<html>
<body>
<div style="border: 1px solid red; width:400px;height: 100px;">
<a href="#">https://blog.csdn.net/infoworld</a>
<br/><br>
<input type="text" id="name" value="2021-12-20 12:12:12">
<input type="button" value="button" onclick="javascript:calcLeftMilliSeconds();">
<p id="output"></p>
</div>
</body>
<script type="text/javascript">
function splitDateTime(dateTime){
var reg = /(\d{4})-(\d{2})-(\d{2})\s(\d{2})\:(\d{2})\:(\d{2})/;
var dateStr = dateTime;
reg.test(dateStr); //true
var html = [];
html.push(parseInt(RegExp.$1));
html.push(parseInt(RegExp.$2));
html.push(parseInt(RegExp.$3));
html.push(parseInt(RegExp.$4));
html.push(parseInt(RegExp.$5));
html.push(parseInt(RegExp.$6));
return html;
}
function getOutputFormatDate(date){
var output = "";
if((date.getUTCFullYear() - 1970) >0)
output += ("<a>"+date.getUTCFullYear()+"</a>"+" Years ");
if(date.getUTCMonth() >0)
output += ("<a>"+(date.getUTCMonth()+1)+"</a>"+" Months ");
if((date.getUTCDate()-1) >0)
output += ("<a>"+(date.getUTCDate()-1)+"</a>"+" Days ");
output += ("<a>"+date.getUTCHours()+"</a>"+" Hours ");
output += ("<a>"+date.getUTCMinutes()+"</a>"+" Minutes ");
output += ("<a>"+date.getUTCSeconds()+"</a>"+" Seconds");
return output;
}
function calcDateTimeLeft(millisecond){
//GMT 1970 1 1
var date = new Date(millisecond);
return getOutputFormatDate(date);
}
gTimer = 0;
function calcLeftMilliSeconds() {
var inputValue = document.getElementById("name").value;
console.log(inputValue);
var dateArray = splitDateTime(inputValue);
var endDateTime = new Date(dateArray[0],dateArray[1]-1,dateArray[2],dateArray[3],dateArray[4],dateArray[5]);
var nowTime = new Date();
var dateTimeLeft = endDateTime.getTime()-new Date().getTime();
console.log("BEGIN: "+gTimer);
if(gTimer){
console.log(gTimer);
clearInterval(gTimer);
}
gTimer = setInterval(function(){
dateTimeLeft -= 1000;
if(dateTimeLeft <= 0)
clearInterval(gTimer);
//gTimes--;
var output1 = calcDateTimeLeft(dateTimeLeft);
document.getElementById("output").innerHTML = output1;
},1000);
console.log(gTimer);
}
</script>
</html>
图1: