这篇文章主要为大家详细介绍了js实现流动式时间效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js流动式时间的实现代码，供大家参考，具体内容如下
效果图：
实现代码：
<!DOCTYPE html>
<html>
<head>
<title>js流动时间</title>
<style type="text/css">
#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>
<div id="divTime">Time</div>
<div>
<div id="divH"></div>
<div id="divM"></div>
<div id="divS"></div>
<div id="divLine"></div>
</div>
</div>
<script type="text/javascript">
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程序设计有所帮助。
- 名著《平凡的世界》阅读心得体会最新
- 陪孩子读书的心得
- 陪孩子读书的阅读心得体会
- 2022年《平凡的世界》读书心得体会
- 陪孩子读书的心得体会
- 陪孩子读书心得大全
- 2022年平凡的世界阅读心得有感
- 读《平凡的世界》读书心得感想
- 2022平凡的世界阅读心得最新
- 陪孩子读书心得体会
- 名著《平凡的世界》阅读心得体会
- 2022年《平凡的世界》读后感想
- 中学生边城读书心得五篇范文
- 海底两万里读书心得600字范文
- 读书冰心心得7篇
- 《冰心》的读书心得
- 水浒传读书心得500字作文十篇
- 三字经读书心得和启迪作文十篇
- 鲁滨孙漂流记的读书心得650字10篇
- 2022年《城南旧事》读后感想
- 读《城南旧事》阅读心得体会
- 2022城南旧事读书心得最新
- 读《城南旧事》读书心得体会精选
- 城南旧事读书心得体会感悟
- 读《城南旧事》读书心得体会
- primary consideration
- primary constituent
- primary consumer
- primary-consumer
- primary data
- primary-data
- primary dealer
- primary-dealer
- primary demand
- primary-demand
- 旱苗得雨
- 旱魃为虐
- 时不再来
- 时不可失
- 时不我与
- 时不我待
- 时乖命蹇
- 时乖运乖
- 时乖运拙
- 时乖运舛
- 2022年昭通市威信县第一幼儿园招聘临聘教师公告
- 2022年广西工贸职业技术学校招聘教师公告
- 2022年玉溪长水实验中学教师招聘
- 2022年丽江市永胜实验中学招聘公告
- 2022年西双版纳州勐腊县县直属学校选调教师补充公告
- 2021年贵阳清镇市招聘幼儿园“两自一包”合同制（非编制)教学人员笔试公告
- 2021年贵阳清镇市招聘中小学教师笔试有关事项公告
- 2022年梧州岑溪市直接面试招聘中小学教师公告（贺州学院专场）
- 2022年昆明理工大学附属中学招聘公告
- 2022年昆明市官渡区冠益中学元月教师招聘公告