使用CSS和Js實現時鐘效果

通過div和css構建時鐘的表盤和指標

通過css動畫實現指標跳動效果

通過js獲取時間，並設定初始值

效果如圖所示：

具體**如下

lang="en">

charset="utf-8" />
使用css和js實現時鐘 title>
.clock
.clock_pan
.clock_ge
.clock_ge-0
.clock_ge-1
.clock_ge-2
.clock_ge-3
.clock_ge-4
.clock_ge-5
.clock_short
.clock_long
.clock_zhen
/* 通過設定animation-duration的不同時間，達到不同指標的效果*/
.clock_hour
.clock_minute
/* 通過animation-timing-function:steps(60,start) 達到秒針跳動的效果 */
.clock_second
@keyframes clockrotate
100%
}style>
head>
class="clock">
class="clock_pan">
class="clock_ge clock_ge-0">
div>
class="clock_ge clock_ge-1">
div>
class="clock_ge clock_ge-2">
div>
class="clock_ge clock_ge-3">
div>
class="clock_ge clock_ge-4">
div>
class="clock_ge clock_ge-5">
div>
div>
class="clock_short">
div>
class="clock_long">
div>
class="clock_zhen clock_hour">
div>
class="clock_zhen clock_minute">
div>
class="clock_zhen clock_second">
div>
div>
//通過date()物件獲取當前時間
var odate = new
date();
var seconds = odate.getseconds();
var miniutes = odate.getminutes();
var hour = odate.gethours();
//通過設定animation-delay為負值，使動畫馬上開始，跳過設定秒數進入動畫。
document.queryselector('.clock_hour').style.animationdelay = -(hour * 3600 + miniutes * 60 + seconds) + 's';
document.queryselector('.clock_minute').style.animationdelay = -(miniutes * 60 + seconds) + 's';
document.queryselector('.clock_second').style.animationdelay = -(seconds) + 's';
script>
body>
html>

使用js實現時鐘效果

首先在單元格中輸入下面的 然後使用html顯示內容。這個寬高可以根據自己需要填。然後在預覽方式中新增載入結束事件 var dom document.getelementbyid view var ctx dom.getcontext 2d var width ctx.canvas.width var...

React實現時鐘效果

嗯，我又來了，這次的demo是乙個魔力小時鐘，永不停歇的小時鐘 此處省略n聲嘀嗒嘀嗒 用來實時顯示當前的時間，哇哈哈 日常生活中看到的時鐘通常都是由時針 分針 秒針組成，這三根針不停地轉動，用以顯示當前的時間，那麼站在乙隻程式猿的角度，每根針究竟是如何轉動起來的？又是以什麼角度在轉動？我一直認為，學...

js 實現簡易時鐘效果

大江東去，浪淘盡，千古風流人物。故壘西邊，人道是，三國周郎赤壁。亂石穿空，驚濤拍岸，捲起千堆雪。江山如畫，一時多少豪傑。遙想公瑾當年，小喬初嫁了，雄姿英發。羽扇綸巾，談笑間，檣櫓灰飛煙滅。故國神遊，多情應笑我，早生華髮。人生如夢，一尊還酹江月。來自奔跑的panda部落，panda每天與您一起進步 d...