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


Posted in Javascript onMay 16, 2016

本文实例为大家分享了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程序设计有所帮助。

Javascript 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
jQuery构造函数init参数分析
May 13 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 #Javascript
JavaScript代码性能优化总结(推荐)
May 16 #Javascript
AngularJS学习笔记之依赖注入详解
May 16 #Javascript
javascript表单事件处理方法详解
May 15 #Javascript
基于jquery实现ajax无刷新评论
Aug 19 #Javascript
JavaScript代码性能优化总结篇
May 15 #Javascript
window.onload绑定多个事件的两种解决方案
May 15 #Javascript
You might like
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
详解webpack进阶之loader篇
2017/08/23 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
python绘制立方体的方法
2018/07/02 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
Python编写单元测试代码实例
2020/09/10 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
中国电视购物:快乐购
2017/02/04 全球购物
我的小天地教学反思
2014/04/30 职场文书
疾病捐款倡议书
2014/05/13 职场文书
教师创先争优承诺书
2015/04/27 职场文书
vue 实现上传组件
2021/05/31 Vue.js
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers