這篇文章給大家分享的是有關javascript如何實現數字時鐘特效的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
先看效果，動態數字時鐘
用到了jQuery，但是只是用來獲取元素，只有一點點
面向對象開發
看代碼
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> <!-- 以下的內容寫到HTML內代碼太過冗余，使用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;
/* 設置溢出隱藏 */
}
.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));
}
/* 以下都是不同類名對應的透明度 */
.visible{
opacity: 1;
}
.close{
opacity: 0.25;
}
.far{
opacity: 0.15;
}
.distance{
opacity: 0.05;
}JS
function Index(dom, use) {
// 把傳進來的DOM元素轉數組
this.column = Array.from(dom);
// 把use轉到全局，這個是判斷要顯示的時制是112小時還是24小時
this.use = use;
// 這個數組是后面要設置的類名
this.classList = ['visible', 'close', 'far', 'distance', 'distance', 'distance', 'distance', 'distance'];
this.creatDom();
this.start();//開始
}
// 開始函數
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))'
// 設置移動
});
Array.from(ele.children).forEach(function (ele2, index2) {
var className = self.getClass(n, index2);
// 調用函數設置類名
$(ele2).attr('class', className);
})
})
}, 500);
};
// 為距離時間不一樣的元素設置不一樣的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取余轉為12小時制
return [this.use ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(function (p, n) {
return p + ('0' + n).slice(-2);
// 這里是吧個位數加0，比如1添加一個0后得到01，如果是12加0后事012，但是取數值后兩位，得到12
}, '')
};
// 由于把HTML元素都寫到HTML文件里，太過冗余，所以使用for循環添加進去
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);
}
};
// 第二個參數，true為24小時制，false為12小時制
new Index($('.column'), true);js的注釋我寫的比較全，應該可以看懂
感謝各位的閱讀！關于“javascript如何實現數字時鐘特效”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
