javascript實現(xiàn)數(shù)字時鐘特效

更新時間：2021年09月22日 08:36:10 作者：墨者羽晨

這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)數(shù)字時鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了javascript實現(xiàn)數(shù)字時鐘特效的具體代碼，供大家參考，具體內(nèi)容如下

先看效果，動態(tài)數(shù)字時鐘

用到了jQuery，但是只是用來獲取元素，只有一點點

面向?qū)ο箝_發(fā)

看代碼

HTML，自己引入jQuery和js，jQuery在前

<body>
    <div class="wrapper">
        <div class="column">
            <!-- 此div表示時的十位，只有0,1,2三個 -->
            <div>0</div>
            <div>1</div>
            <div>2</div>
        </div>
        <!-- 以下的內(nèi)容寫到HTML內(nèi)代碼太過冗余，使用js寫入 -->
        <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>
</body>

CSS

*{
     margin: 0;
     padding: 0;
}
html,body{
     height: 100%;
     width: 100%;
     background-color: #0e141b;
    overflow: hidden;
    /* 設(shè)置溢出隱藏 */
}
.wrapper{
    text-align: center;
    width: 100%;
}
.wrapper .column,
.wrapper .coln{
    display: inline-block;
    vertical-align: top;
    color: rgba(224,230,235,0.89);
    font-size: 86px;
    line-height: 86px;
    font-weight: 300;
}
.column{
    transition: all 300ms ease-in;
}
.coln{
    /* 冒號的位置 */
    transform: translateY(calc(50vh - 83px));
}
/* 以下都是不同類名對應(yīng)的透明度 */
.visible{
    opacity: 1;
}
.close{
    opacity: 0.25;
}
.far{
    opacity: 0.15;
}
.distance{
    opacity: 0.05;
}

JS

function Index(dom, use) {
    // 把傳進(jìn)來的DOM元素轉(zhuǎn)數(shù)組
    this.column = Array.from(dom);
    // 把use轉(zhuǎn)到全局，這個是判斷要顯示的時制是112小時還是24小時
    this.use = use;
    // 這個數(shù)組是后面要設(shè)置的類名
    this.classList = ['visible', 'close', 'far', 'distance', 'distance', 'distance', 'distance', 'distance'];
    this.creatDom();
    this.start();//開始
}
// 開始函數(shù)
Index.prototype.start = function () {
    var self = this;
    setInterval(function () {
        var c = self.getClock();
        // console.log(c);
        self.column.forEach(function (ele, index) {
            var n = + c[index];
            var offset = n * 86;//移動距離
            console.log(offset);
            $(ele).css({
                'transform': 'translateY(calc(50vh - ' + offset + 'px - 73px))'
                // 設(shè)置移動
            });
            Array.from(ele.children).forEach(function (ele2, index2) {
                var className = self.getClass(n, index2);
                // 調(diào)用函數(shù)設(shè)置類名
                $(ele2).attr('class', className);
            })
        })
    }, 500);
};
// 為距離時間不一樣的元素設(shè)置不一樣的class名
Index.prototype.getClass = function (n, i) {
    var className = this.classList.find(function (ele, index) {
        return i - index === n || i + index === n;
    })
    return className || "";
}
 
// 獲得時間并且格式化時間,字符串 21:06:09   ==>  210609
Index.prototype.getClock = function () {
    var d = new Date();
    // 這里走一個三目運算符，如果use是真（true）則取值，如果為假則12取余轉(zhuǎn)為12小時制
    return [this.use ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(function (p, n) {
        return p + ('0' + n).slice(-2);
        // 這里是吧個位數(shù)加0，比如1添加一個0后得到01，如果是12加0后事012，但是取數(shù)值后兩位，得到12
    }, '')
};
// 由于把HTML元素都寫到HTML文件里，太過冗余，所以使用for循環(huán)添加進(jìn)去
Index.prototype.creatDom = 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);
    }
};
 
// 第二個參數(shù)，true為24小時制，false為12小時制
new Index($('.column'), true);

js的注釋我寫的比較全，應(yīng)該可以看懂

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: