一、项目功能
实现一个网页版的时钟,可以显示年、月、日和时、分、秒。
二、项目技术
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()+" "+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的大小写。