首页 > 编程语言> > [Javascript]_[初级]_[获取日期的时间间隔-格式化日期时间]

[Javascript]_[初级]_[获取日期的时间间隔-格式化日期时间]

2021-12-19 18:32:35 作者：互联网

场景

在开发网站前端时，有时候需要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:

参考

标签：格式化,dateArray,Javascript,Date,var,日期,html,date,output
来源： https://blog.csdn.net/infoworld/article/details/122027515