编程 Javascript

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程序设计有所帮助。

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

读jQuery之七判断点击了鼠标哪个键的代码

Jun 21 Javascript

如何让easyui gridview 宽度自适应窗口改变及fitColumns应用

Jan 25 Javascript

JavaScript中的Math.E属性使用详解

Jun 12 Javascript

js实现的星星评分功能函数

Dec 09 Javascript

利用vue写todolist单页应用

Dec 15 Javascript

jQuery图片拖动组件Dropzone用法示例

Jan 17 Javascript

jquery.cookie.js的介绍与使用方法

Feb 09 Javascript

使用electron制作满屏心特效的示例代码

Nov 27 Javascript

vue-cli脚手架引入弹出层layer插件的几种方法

Jun 24 Javascript

微信小程序swiper使用网络图片不显示问题解决

Dec 13 Javascript

详解JavaScript中精度失准问题及解决方法

Feb 04 Javascript

JavaScript控制台的更多功能

Apr 28 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