html时钟表盘自适应屏幕,<js学习>数字时钟（自适应浏览器）

数字时钟，要求：在浏览器视区中心显示当前(日期)时间。

实现代码如下：

html代码：

-

-

&nbsp&nbsp&nbsp

&nbsp：

&nbsp：

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);

运行结果如下图，

image.png

已同时在PC和手机端浏览器测试成功，手机UC需关闭适应屏幕。