瞭解Date對象,並運用html+css+JavaScript製作一個實時時鐘

Date對象

Date用來封裝時間

var time = new Date()//獲得客戶端的時間 
 var date = new Date("2019/11/11 00:00:01")//自定義創建一個時間
 var date_ms = new Date(46460646460)//計算從1970年開始的微秒數的時間

常用的date方法在這裏插入圖片描述
在這裏插入圖片描述

運用html+css+JavaScript製作一個實時時鐘

製作一個簡單但又有趣的時鐘的代碼如下:

<div id="xxx"></div>
#xxx{
			color:blue;
			font-size:50px;
			margin-left:32%;
			margin-top:20%;
		}
<script type="text/javascript">
		setInterval(function () {
			var time = new Date();
			var xxx = document.getElementById("xxx");
			var year = time.getFullYear();
			var month = time.getMonth()+1;
			var date = time.getDate();
			var hour = time.getHours();
			var minutes = time.getMinutes();
			var seconds = time.getSeconds();
			xxx.innerHTML = year + "年&nbsp;" + month + "月&nbsp;" + date + "日&nbsp;" + hour + ":" + minutes + ":" + seconds;
			},1000)
</script>

首先要熟悉的理解Date對象,需要注意的是date方法中getMonth()需要加一,並運用定時器setInterval每隔1000ms刷新,把時鐘展現在一個div中稍作修改樣式便製作出一個實時的時鐘。

~~~~~ end ~~~~~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章