js动态数字时钟

js动态数字时钟

主要用到知识点：

• 主要是通过数组的一些方法,如：array.from() array.reduce() array.find()
• 时间的处理和渲染

• 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);

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