[Javascript]_[初级]_[获取日期的时间间隔-格式化日期时间]
Posted infoworld
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[Javascript]_[初级]_[获取日期的时间间隔-格式化日期时间]相关的知识，希望对你有一定的参考价值。
场景
- 在开发网站前端时，有时候需要
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 = /(\\d4)-(\\d2)-(\\d2)\\s(\\d2)\\:(\\d2)\\:(\\d2)/;
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:
参考
以上是关于[Javascript]_[初级]_[获取日期的时间间隔-格式化日期时间]的主要内容，如果未能解决你的问题，请参考以下文章
[Javascript]_[初级]_[获取日期的时间间隔-格式化日期时间]
[JavaScript]_[初级]_[关于forof或者for...of循环语句的用法]
[JavaScript]_[初级]_[关于forof或者for...of循环语句的用法]
[JavaScript]_[初级]_[关于forof或者for...of循环语句的用法]