jQuery实现钟表

最新推荐文章于 2021-08-04 07:42:42 发布

summer·

最新推荐文章于 2021-08-04 07:42:42 发布

阅读量823

点赞数 3

分类专栏： js小效果

本文链接：https://blog.csdn.net/weixin_45774485/article/details/112970811

版权

前端 javascript jquery css3

js小效果专栏收录该内容

7 篇文章 0 订阅

订阅专栏

通过jQuery实现一个简易的页面时钟效果

解析在代码中……

HTML部分：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态页面时钟</title>
    <link rel="stylesheet" href="clock.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-3.5.1.min.js"></script>
    <script src="clock.js"></script>
</body>

</html>

css部分：

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #0e141b;
}

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

.wrapper .column,
.wrapper .coln {
    display: inline-block;
    /*使每一列水平居中，且默认基于bottom对齐*/
    vertical-align: top;
    font-size: 86px;
    line-height: 86px;
    font-weight: 300;
    color: rgba(224, 230, 235, 0.9);
}

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

.coln {
    transform: translateY(calc(50vh - 43px));
}

.visible {
    opacity: 1;
}

.close {
    opacity: 0.3;
}

.far {
    opacity: 0.15;
}

.distance {
    opacity: 0.1;
}

JavaScript部分（注意引入jQuery文件）：

//获取时间
//时间与每一列一一对应   当前时间居中显示
//数字的显示，由opacity实现，通过设置class
function Index(dom, use24Hours) {
    this.column = Array.from(dom);
    this.use24Hours = use24Hours;
    this.classList = ['visible', 'close', 'far', 'far', 'distance', 'distance'];//通过数组内容表示离显示部分距离
    this.creatDom();//创建dom结构
    this.start();//开始
}
//动态获取时间
Index.prototype.start = function() {
    var _this = this;
    setInterval(function() {
        var c = _this.getClock();
        _this.column.forEach(function(ele, index) {
            var n = +c[index];
            var offset = n * 86;
            $(ele).css({
                'transform': 'translateY(calc(50vh - ' + offset + 'px - 43px))'
            })
            Array.from(ele.children).forEach(function(ele2, index2) {
                var className = _this.getClass(n, index2);
                $(ele2).attr('class', className);
            });
        })
    }, 1000);
}

Index.prototype.getClass = function(n, i) {
        var className = this.classList.find(function(ele, index) {
            return i - index == n || i + index == n;
        });
        return className || '';
    }
    //获得当前时间，并处理时间格式---->字符串格式
Index.prototype.getClock = function() {
        var d = new Date();
        return [this.use24Hours ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(function(p, n) {
            return p + ('0' + n).slice(-2);
        }, '');
    }
    //动态生成结构,使用面向对象方法
Index.prototype.creatDom = function creatDom() {
    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);