编程 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 相关文章推荐

js获取IFRAME当前的URL的方法

Nov 13 Javascript

js与C#进行时间戳转换

Nov 14 Javascript

AngularJS基础教程之简单介绍

Sep 27 Javascript

jquery插件ajaxupload实现文件上传操作

Dec 09 Javascript

浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结

Mar 16 Javascript

Bootstrap三种表单布局的使用方法

Jun 21 Javascript

JavaScript 深层克隆对象详解及实例

Nov 03 Javascript

Reactjs实现通用分页组件的实例代码

Jan 19 Javascript

前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来

Nov 14 jQuery

axios的拦截请求与响应方法

Aug 11 Javascript

express启用https使用小记

May 21 Javascript

vue中jsonp插件的使用方法示例

Sep 10 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