js数字滑动时钟的简单实现(示例讲解)


Posted in Javascript onAugust 14, 2017

废话不多说,直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    body,ul{margin:0;padding: 0;}
    .content{margin:100px auto;width: 1000px;}
    .box{position: relative;float: left;width: 50px;height: 120px;overflow: hidden;}
    .box li{position: absolute;left: 0;width:100%;height: 120px;list-style:none;font-size:80px;font-weight: bold;background-color: #fff; line-height: 120px; text-align: center;}
    .colon{float: left;height: 120px;font-size: 80px;color: #e91e63;font-weight: bold;line-height: 100px;}
  </style>
</head>
<body>
  <div class="content">
  </div>
  <script type="text/javascript">
  (function(){
    var colors = ["#69D2E7", "#E20049", "#19215E", "#F38630", "#FA6900", "#FF4E50", "#F9D423", "#FFB6FF", "#474168", "#6ACAFC"];
    var content = document.querySelector('.content');
    var num = 0;
    var height = 120;
    var maxheight = (2-num)*height;
    var timeNum = [3,10,6,10,6,10];
    var position = [];
    var NumberBoxs = [];
    for(var i =0;i<10;i++){
      position.push((1-i)*height);
    };
    function NumberBox() {}
    NumberBox.prototype = {
      init : function () {
        var innerHTML = "<div class='box' id='box"+num+"'><ul>"
        this.num = num;
        num++;
        for(var i =0,l=timeNum[this.num];i<l;i++){
          innerHTML += "<li style='color:"+colors[i]+"'>"+i+"</li>";
        }
        innerHTML += "</ul><div>"
        content.innerHTML += innerHTML;
        if(num==2||num==4){content.innerHTML += "<div class='colon'>:</div>"}
      },
      dominit : function(){
        this.Ali = [].slice.call(document.getElementById('box'+this.num).getElementsByTagName('li'),0);    
        this.Ali.forEach(function(dom,i){
          dom.style.top = position[i] + "px";
          dom.style.transition = "top .8s";
        })  
        this.hasdom = true;  
      },
      toNum : function (n) {
        if(!this.hasdom){this.dominit();}
        n = ""+n;
        var p = this;
        var l = p.Ali.length-1;
        while(p.Ali[1].innerHTML!=n){
        p.Ali.unshift(p.Ali.pop());
        }
        p.Ali.forEach(function (dom,i) {
        dom.style.zIndex = (i==l)?"-1":"1";
        dom.style.top = position[i] + "px";
        })     
      }
    }
    for(var i=0;i<6;i++){
      var o = new NumberBox();
      o.init();
      NumberBoxs.push(o);
    }
    function getTime() {
      var time = new Date();
      return (""+Fixed2(time.getHours())+Fixed2(time.getMinutes())+Fixed2(time.getSeconds())).split("");
    }
    function Fixed2(n){
      return Number(n)<10?"0"+n:n;
    }
    (function () {
      var time = getTime();
      NumberBoxs.forEach(function(obj,i){
        obj.toNum(time[i]);
      });
      setTimeout(arguments.callee,1000);
    })()
  })();
  </script>
</body>
</html>

以上这篇js数字滑动时钟的简单实现(示例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery遍历Form示例代码
Sep 03 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
React更新渲染原理深入分析
Dec 24 Javascript
使用yeoman构建angular应用的方法
Aug 14 #Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 #Javascript
使用D3.js制作图表详解
Aug 13 #Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 #Javascript
react开发教程之React 组件之间的通信方式
Aug 12 #Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 #Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 #Javascript
You might like
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
YII路径的用法总结
2014/07/09 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
vue加载完成后的回调函数方法
2018/09/07 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
ES6 十大特性简介
2020/12/09 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
Python必须了解的35个关键词
2020/07/16 Python
Python调用飞书发送消息的示例
2020/11/10 Python
python 数据类型强制转换的总结
2021/01/25 Python
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
优秀毕业生的求职信
2014/07/21 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技