网页时钟

一、项目功能

实现一个网页版的时钟,可以显示年、月、日和时、分、秒。

二、项目技术

JavaScript技术 主要使用Date类的一些方法。

三、实现步骤

1)定义一个Date对象,用于获取当前的时间。

2)定义一个日期字符串,即网页中显示的日期。

3)获取span标签的id属性,并命名为span。

4)对span对象设置innerHTML属性值。

四、代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网络时钟</title>
	</head>
	<body>
		当前系统时间是:
		<span id="spanTip"></span>
		<script>
			function getDate(){
				//定义一个日期对象(通过该对象获取日期字符串)
				var date=new Date();
				//定义一个日期字符串
				var datestr=date.getFullYear()+"."+(date.getMonth()+1)+"."+date.getDay()+"&nbsp;&nbsp;"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
				//dom操作:获取id属性值
				var span=document.getElementById("spanTip");
				//设置span对象的innerHTML属性
				span.innerHTML=datestr;
			}
			//定义定时器
			setInterval("getDate()",1000);
		</script>
	</body>
</html>

五、效果展示

当然,时间每隔1秒就会发生变化。效果展示为动态的,但其实代码是静态的。

innerHTML属性:几乎所有的元素都有该属性,innerHTML是一个字符串,用来设置或获取对象起始和结束的标签内的HTML。该属性区分大小写,因此要注意innerHTML的大小写。

猜你喜欢

转载自blog.csdn.net/smell201611010513/article/details/89244130
今日推荐