数字时钟,要求:在浏览器视区中心显示当前(日期)时间。
实现代码如下:
html代码:
<div>
<p>
<span name="ha"></span>-
<span name="ha"></span>-
<span name="ha"></span>   
<span name="ha"></span> :
<span name="ha"></span> :
<span name="ha"></span>
</p>
</div>
CSS代码:本篇的重难点在这里
*{
margin:0;
padding:0;
}
div{
width:100%;
background: #EEEEEE;
position: absolute;
top:0;
bottom:0;
}
p{
position: absolute;
top:50%;
width: 100%;
height:200px;
margin-top:-100px;
text-align: center;
line-height: 200px;
font-size: 40px;
}
js代码:核心功能实现
function cur_time() {
var date = new Date();
var y = date.getFullYear();
var M = date.getMonth() + 1;
var d = date.getDate();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var time = [y, M, d, h, m, s];
for (var i = 0; i < time.length; i++) {
(time[i] < 10) && (time[i] = '0' + time[i]);
document.getElementsByName("ha")[i].innerHTML=time[i];
}
}
cur_time();
setInterval(cur_time, 999);
运行结果如下图,
已同时在PC和手机端浏览器测试成功,手机UC需关闭适应屏幕。