javascript實現數字時鐘特效
阿新 • • 發佈：2021-09-22
本文例項為大家分享了實現數字時鐘特效的具體程式碼，供大家參考，具體內容如下
先看效果，動態數字時鐘
用到了，但是隻是用來獲取元素，只有一點點
面向物件開發
看程式碼
HTML，自己引入jQuery和，jQuery在前
<body>
<div class="wrapper">
<div class="column">
<!-- 此div表示時的十位，只有0,1,2三個 -->
<div>0</div>
<div>1</div>
<div>2</div>
</div>
<!-- 以下的內容寫到HTML內程式碼太過冗餘，使用js寫入 -->URqulEYVg
*{
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: twww.cppcns.com
JS
function Index(dom,use) {
// 把傳進來的DOM元素轉陣列
this.column = Array.from(dom);
// 把use轉到全域性，這個是判斷要顯示的時制是112小時還是24小時
this.use = use;
// 這個陣列是後面要設定的類名
this.classList = ['visible','close','far','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 classNamehttp://www.cppcns.com || "";
}
// 獲得時間並且格式化時間,字串 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&gwww.cppcns.comt;';
$(".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的註釋我寫的比較全，應該可以看懂
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。