js流动式效果显示当前系统时间

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

js流动式效果显示当前系统时间

来源：易贤网阅读：910 次日期：2016-06-29 16:14:55

温馨提示：易贤网小编为您整理了“js流动式效果显示当前系统时间”,方便广大网友查阅！

这篇文章主要为大家详细介绍了js实现流动式时间效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js流动式时间的实现代码，供大家参考，具体内容如下

效果图：

实现代码：

<!DOCTYPE html>

<html>

<head>

<title>js流动时间</title>

#divH,

#divM,

#divS {

font-family: consal;

line-height: 30px;

position: absolute;

left: 0px;

width: 5760px;

color: white;

}

#divH {

background-color: #606;

}

#divM {

background-color: #060;

}

#divS {

background-color: #006;

}

#divH div,

#divM div,

#divS div {

float: left;

border-right: solid 1px gray;

text-align: center;

}

</style>

</head>

<body>

</div>

var divH = document.getElementById('divH');

var divM = document.getElementById('divM');

var divS = document.getElementById('divS');

var divTime = document.getElementById('divTime');

var aw = 2880;

var ww = 400;

var w = aw / 24;

for (var i = 0; i < 48; i++) {

var div = document.createElement('div');

div.style.width = (w - 1) + 'px';

div.innerHTML = i % 24;

divH.appendChild(div);

}

w = aw / 60;

for (var i = 0; i < 120; i++) {

var div = document.createElement('div');

div.style.width = (w - 1) + 'px';

div.innerHTML = i % 60;

divM.appendChild(div);

}

w = aw / 60;

for (var i = 0; i < 120; i++) {

var div = document.createElement('div');

div.style.width = (w - 1) + 'px';

div.innerHTML = i % 60;

divS.appendChild(div);

}

window.setInterval(run, 20);

function run() {

var dt = new Date();

var h = dt.getHours();

var m = dt.getMinutes();

var s = dt.getSeconds();

var f = dt.getMilliseconds();

divH.style.left = ((h > 12) ? 0 : -aw) + ww / 2 + (h * -120) - m * 2 + 'px';

l = 0;

divM.style.left = ((m > 30) ? 0 : -aw) + ww / 2 + (m * -48) - s / 1.2 + 'px';

l = 0;

divS.style.left = ((s > 30) ? 0 : -aw) + ww / 2 + (s * -48) - f * 48 / 1000 + 'px';

divTime.innerHTML = 'Time ' + h + ':' + m + ":" + s;

}

</script>

</body>

</html>

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

上一篇：JS闭包、作用域链、垃圾回收、内存泄露相关知识小结

下一篇：基于jquery实现ajax无刷新评论

易贤网手机网站地址：js流动式效果显示当前系统时间

由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！