了解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 ~~~~~

发布了23 篇原创文章 · 获赞 49 · 访问量 1488

猜你喜欢

转载自blog.csdn.net/weixin_44701229/article/details/103004129