Js实现动态时钟

最新推荐文章于 2022-03-16 10:22:07 发布

续木

最新推荐文章于 2022-03-16 10:22:07 发布

阅读量152

点赞数 1

分类专栏：实例

本文链接：https://blog.csdn.net/weixin_45681557/article/details/104299427

版权

实例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

获取日期字符
添加日期对应结构运动
数值显示动态透明度

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./demo.css">
    </head>

    <body>

        <div class="wrapper">
            <div class="column">
                <div>0</div>
                <div>1</div>
                <div>2</div>
            </div>
            <div class="column ten"></div>
            <div class="coln">:</div>

            <div class="column six"></div>
            <div class="column ten"></div>
            <div class="coln">:</div>

            <div class="column six"></div>
            <div class="column ten"></div>
        </div>


        <script src="./jquery.js"></script>
        <script src="./demo.js"></script>
    </body>

</html>

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #0e141b;
    overflow: hidden;
}

.wrapper {
    width: 100%;
    text-align: center;
}

.wrapper .column,
.wrapper .coln {
    display: inline-block;
    color: rgba(224, 230, 230, 0.89);
    vertical-align: top;
    font-size: 86px;
    line-height: 86px;
    font-weight: 300;
}

.columu {
    transition: all 300ms ease-in;
}

.coln {
    /* css3运算符 */
    transform: translateY(calc(50vh - 43px));
}

.visible {
    opacity: 1;
}

.close {
    opacity: 0.35;
}

.far {
    opacity: 0.15;
}

.distance {
    opacity: 0.1;
}

function Index(dom, use24Hours) {
    this.column = Array.from(dom); //dom节点数组
    this.use24Hours = use24Hours; //时间判断锁
    this.createDom(); //节点生成
    this.start(); //运动函数
    this.classList = ['visible', 'close', 'far', 'far', 'distance', 'distance']; //时间透明数组

};



Index.prototype.start = function () {
    var self = this; //改指向为Index
    setInterval(function () {
        var c = self.getClock(); //时间获取函数
        // console.log(c);
        self.column.forEach(function (ele, index) {
            var n = +c[index]; //n相应dom结构位置的时间数
            var offset = n * 86; //运动距离
            $(ele).css({ //添加样式
                'transform': 'translateY(calc(50vh - ' + offset + 'px - 43px))'
            });

            Array.from(ele.children).forEach(function (ele2, index2) { //获取当前dom的位置
                var className = self.getClass(n, index2); //添加判断完的类名
                $(ele2).attr('class', className); //添加
            })
        })
    }, 500);
};
Index.prototype.getClass = function (n, i) { //n为dom结构位置的时间数，i为dom位置
    var className = this.classList.find(function (ele, index) { //index为类名数组键位
        return i - index === n || i + index === n; //判断完成返回
    });
    return className || '';
}

Index.prototype.getClock = function () {
    var d = new Date(); //累加器，判断锁状态进行处理，返回值进行加0处理
    return [this.use24Hours ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(function (p, n) {
        return p + ('0' + n).slice(-2);
    }, '')
};

//动态加入dom结构
Index.prototype.createDom = function () {
    for (var i = 0; i < 6; i++) {
        var oDiv = '<div>' + i + '</div>';
        $('.six').append(oDiv);
    }
    for (var i = 0; i < 10; i++) {
        var iDiv = '<div>' + i + '</div>';
        $('.ten').append(iDiv);
    }
};

new Index($('.column'), true); //dom结构和锁参数

续木

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js实现动态时钟

获取日期字符添加日期对应结构运动数值显示动态透明度<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...
复制链接

扫一扫

专栏目录