欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js动态数字时钟

程序员文章站 2022-04-15 17:06:58
js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 炫酷的数字时间效果 直接看效果 html: css: js: 参考自:腾讯课堂渡一教育 ......

js动态数字时钟

主要用到知识点:

  • 主要是通过数组的一些方法,如:array.from() array.reduce() array.find()
  • 时间的处理和渲染
  • js用到面向对象的写法

    实现的功能

  • 炫酷的数字时间效果
  • 直接看效果

js动态数字时钟

html:

    <div class="wraper">
        <div class="column">
            <div class="item">0</div>
            <div class="item">1</div>
            <div class="item">2</div>
        </div>
        <div class="column ten"></div>
        <div class="colon">:</div>
        <div class="column six"></div>
        <div class="column ten"></div>
        <div class="colon">:</div>
        <div class="column six"></div>
        <div class="column ten"></div>
    </div>

css:

    * {
        margin: 0;
        padding: 0;
    }
    html,
    body {
        width: 100%;
        height: 100%;
        background-color: #0e141b;
    }
    .wraper {
        width: 100%;
        height: 100%;
        text-align: center;
        overflow: hidden;
    }
    .column,
    .colon {
        display: inline-block;
        vertical-align: top;
        color: #fff;
        font-size: 86px;
        line-height: 86px;
        font-weight: 300;
        transform: translatey(50vh);
        margin-top: -43px;
        transition: all 0.3s;
    }
    .visible {
        opacity: 1;
        box-shadow: 0px 0px 20px #fff;
        border-radius: 5px;
    }
    .near1 {
     opacity: 0.7;
    }
    .near2 {
        opacity: 0.6;
    }
    .near3 {
        opacity: 0.4;
    }
    .far1 {
        opacity: 0.3;
    }
    .far2 {
        opacity: 0.2;
    }
    .far3 {
        opacity: 0.1;
    }
    .none {
        opacity: 0.05;
    }

js:

    function time(bom,use24){
        this.bom = array.from(bom);
        this.format = use24;
        this.classlist = ['visible', 'near1', 'near2','near3', 'far1', 'far2', 'far3'];
        this.creatdom();
        this.settime();
    }
    //生成dom元素
    time.prototype.creatdom=function(){
        for(let i=0;i<6;i++){
            let odiv = "<div class='item'>"+i+"</div>";
            $('.six').append(odiv);
        }
        for(let i=0;i<10;i++){
            let idiv = "<div class='item'>" + i + "</div>";
            $('.ten').append(idiv);
        }
    }  
    //设置当前时间到页面
    time.prototype.settime = function(){
        let self =this;
        setinterval(function(){
            let presenttime = self.gettime();
            self.bom.foreach((ele,index)=>{
                var n = +presenttime[index];
                var offset = n * 86;
                $(ele).css({
                margintop:-43 - offset +'px'
                })
                array.from(ele.children).foreach(function (ele1,index1){
                    $(ele1).attr('class', self.getclassname(n,index1));
                })
            })
        },500)
    }
    time.prototype.getclassname = function(n,i){
        let classname = this.classlist.find(function(item,index){
            return i - index === n || i + index === n;
        })
        // console.log(classname)
        return classname || 'none';
    }
    //获取当前时间并处理
    time.prototype.gettime=function(){
        let data = new date();
        let timearr =[];
        let timestr = '';
        timearr.push(this.format ? data.gethours() : data.gethours() % 12 || 12, data.getminutes(),data.getseconds());
        timestr = timearr.reduce(function(p,n){
            return p + ('0' + n).slice(-2);
        },'');
        return timestr;
    }
    new time($('.column'),true);

参考自:腾讯课堂渡一教育