CSS3和js簡單數字時鐘程式碼
js程式碼
<script> 'use strict'; var size = 86; var columns = Array.from(document.getElementsByClassName('column')); var d = undefined, c = undefined; var classList = ['visible', 'close', 'far', 'far', 'distant', 'distant']; var use24HourClock = true; function padClock(p, n) { return p + ('0' + n).slice(-2); } function getClock() { d = new Date(); return [use24HourClock ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(padClock, ''); } function getClass(n, i2) { return classList.find(function (class_, classIndex) { return i2 - classIndex === n || i2 + classIndex === n; }) || ''; } var loop = setInterval(function () { c = getClock(); columns.forEach(function (ele, i) { var n = +c[i]; var offset = -n * size; ele.style.transform = 'translateY(calc(50vh + ' + offset + 'px - ' + size / 2 + 'px))'; Array.from(ele.children).forEach(function (ele2, i2) { ele2.className = 'num ' + getClass(n, i2); }); }); }, 200 + Math.E * 10); </script>
这是一款简单的自动获取本地时间的css3+js简单数字时钟代码,时分秒上下滚动动画切换网页时钟特效。
免責聲明
本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn
相關文章

03 Dec 2024
CSS3 過渡:「transition: all」與「transition: x」的效能影響關於 CSS3 過渡的效能效率,常見的...

14 Dec 2024
Safari 中 CSS3 動畫失效您遇到了 CSS3 動畫在 Safari 中無效的問題。儘管該動畫在支援 CSS3...


Hot Tools

CSS文字組合成心型動畫特效
CSS文字組合成心型動畫特效

CSS3 SVG表白花動畫特效
SS3 SVG表白花動畫特效是一款情人節動畫特效。

CSS的商城網站常用左側分類下拉導覽選單代碼
CSS的商城網站常用左側分類下拉導覽選單代碼

jQuery+CSS3情人節愛心特效
jQuery+CSS3情人節愛心特效是情人節懸掛擺動愛心動畫特效。

css3湯匙撈起湯圓動畫特效
一碗可愛的湯圓表情,湯匙撈起一個湯圓動畫特效

熱門文章
丟失記錄:Bloom&Rage -Corey和Dylan的鎖組合
19 Feb 2025
手游攻略
Longvinter:完整的釣魚指南
21 Feb 2025
手游攻略
KCD 2:Zhelejov Marshes的地圖位置和解決方案
19 Feb 2025
手游攻略
Hello Kitty Island冒險:重新啟動機器人任務演練
16 Feb 2025
手游攻略
丟失的唱片:Bloom&Rage-如何打開機艙門
19 Feb 2025
手游攻略