js流动式效果显示当前系统时间
更新时间：2016年05月16日 09:18:43 投稿：lijiao
这篇文章主要为大家详细介绍了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 style="font-family:Arial; width:400px; font-size:24px;">
<div id="divTime" style="text-align:center; line-height:1.5;">Time</div>
<div style="outline:solid 5px gray; position:relative; overflow:hidden; height:90px;">
<div id="divH" style="top:0px;"></div>
<div id="divM" style="top:30px;"></div>
<div id="divS" style="top:60px;"></div>
<div id="divLine" style="position:absolute; top:0px; left:50%; border-left:solid 1px red; height:90px;"></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程序设计有所帮助。
相关文章
大家都知道可以利用Threejs中的立方体或者球体实现全景图功能,下面这篇文章主要给大家介绍了关于threejs全景图和锚点编辑的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
Bootstrap提供了四种用于<img>类的样式，在本文给大家详细介绍，需要的朋友可以参考下2016-12-12
js获取参数的具体应用，欢迎加入脚本之家交流群2007-12-12
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
这篇文章主要介绍了javascript使用for循环批量注册的事件不能正确获取索引值的解决方法,对比分析了出现问题的代码与修改后的代码,并给出了采用闭包实现的方法,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
同C# 、Java一样我们可以手工调用垃圾回收程序，但是由于其消耗大量资源，而且我们手工调用的不会比浏览器判断的准确，所以不推荐手工调用垃圾回收2013-10-10
这篇文章主要介绍了JavaScript oncopy事件用法实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
当在使用流程的时候，比如有一个审核流程，有三个阶段：开始，审核中，审核成功。当在不同的阶段，做相应的进度显示，当显示时，是以动画的形式显示的。下面通过代码给大家介绍JS实现带动画效果的流程进度条，感兴趣的朋友一起看看吧2018-06-06
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
这篇文章主要介绍了javascript间隔调用和延时调用示例,介绍setInterval方法和clearInterval方法的使用方法，大家参考使用吧2014-01-01
这篇文章主要给大家介绍了关于前端无感刷新token的实现步骤,Axios无感知刷新令牌技术通过设置请求拦截器和刷新逻辑,确保API请求不会因令牌过期而中断,使用访问令牌和刷新令牌实现自动刷新,需要的朋友可以参考下2024-11-11
本文主要介绍了如何获取地址栏中的参数的两种方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论