<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
#box{
width:400px;
height:502px;
border:2pxsolidorange;
margin:50pxauto;
font-size:48px;
text-align:center;
}
#ym{
height:100px;
line-height:100px;
}
#d{
height:200px;
line-height:200px;
background-color:orange;
font-size:72px;
}
#w{
height:100px;
line-height:100px;
}
#hms{
height:100px;
line-height:100px;
}
</style>
</head>
<body>
<divid="box">
<divid="ym"></div>
<divid="d"></div>
<divid="w"></div>
<divid="hms"></div>
</div>
<script>
//调用getDateAndTime方法
getDateAndTime();
//启动定时器，调用getDateAndTime方法
window.setInterval(getDateAndTime,1000);
functiongetDateAndTime(){
//获取系统当前的日期时间
vardate=newDate();
//提取日期时间构成的元素
varyear=date.getFullYear();
varmonth=date.getMonth()+1;
varday=date.getDate();
varweek=date.getDay();
varhour=date.getHours();
varminute=date.getMinutes();
varsecond=date.getSeconds();
//处理week的格式
switch(week){
case0:
week='星期日';
break;
case1:
week='星期一';
break;
case2:
week='星期二';
break;
case3:
week='星期三';
break;
case4:
week='星期四';
break;
case5:
week='星期五';
break;
case6:
week='星期六';
break;
}
//定义函数处理时分秒的格式
functionformatHMS(time){
if(time<10){
return'0'+time;
}else{
returntime;
}
}
//获取页面元素
varym=document.getElementById('ym');
vard=document.getElementById('d');
varw=document.getElementById('w');
varhms=document.getElementById('hms');
//将日期时间写入到页面
ym.innerHTML=year+'年'+month+'月';
d.innerHTML=day;
w.innerHTML=week;
hms.innerHTML=hour+'时'+minute+'分'+second+'秒';
}
</script>
</body>
</html>
|
运行时间载入中.....