JavaScript實(shí)現(xiàn)鐘表案例

更新時(shí)間：2022年01月13日 08:52:21 作者：HAI6545

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

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)鐘表效果的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
?
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
.clock {
? ? width: 600px;
? ? height: 600px;
? ? margin: 100px auto;
? ? background: url(/image/shizhong.jpg) 600px/600px;
? ? position: relative;
}
.clock .h {
? ? width: 100%;
? ? height: 100%;
? ? background: url(/image/時(shí)針.jpg) no-repeat center center;
? ? background-size: 35px;
? ? z-index: 1;
? ? position: absolute;
? ? left: -3px;
? ? top: -60px;
}
?
.clock .m {
? ??
? ? width: 100%;
? ? height: 100%;
? ? background: url(/image/分針.jpg) no-repeat center center;
? ? background-size: 35px;
? ? z-index: 2;
? ? position: absolute;
? ? left: -3px;
? ? top: -95px;
}
?
.clock .s {
? ? width: 100%;
? ? height: 100%;
? ? background: url(/image/秒針.jpg) no-repeat center center;
? ? background-size: 25px;
? ? z-index: 3;
? ? position: absolute;
? ? left: -3px;
? ? top: -95px;
}
? ? </style>
</head>
?
<body>
? ? <div class="clock">
? ? ? ? <div class="h" id="hour"></div>
? ? ? ? <div class="m" id="min"></div>
? ? ? ? <div class="s" id="second"></div>
? ? </div>
</body>
<script>
? ? var h = document.querySelector(".h")
? ? var m = document.querySelector(".m")
? ? var s = document.querySelector(".s")?
? ? var s = m = h = ms = 0;
?
? ? setInterval(function () {
? ? ? ? var date = new Date()
? ? ? ? ms = date.getMilliseconds()/* 現(xiàn)在的毫秒 */
? ? ? ? s = date.getSeconds() + ms / 1000;
? ? ? ? m = date.getMinutes() + s / 60;
? ? ? ? h = date.getHours() % 12 + m / 60;
? ? ? ??
? ? ? ? /*秒針一圈360度 一共60秒 每秒6度 */
? ? ? ? second.style.transform = "rotate(" + s * 6 + "deg)"
? ? ? ? second.style.transformOrigin = ' ?center 67% '
? ? ? ? /*分針一圈360度 一圈走60次 每分鐘6度 ?*/
? ? ? ? min.style.transform = "rotate(" + m * 6 + "deg)"
? ? ? ? min.style.transformOrigin = ' ?center 67% '
/*時(shí)針一圈360度 12小時(shí)制 一共走12次 ?d 每小時(shí)30度 ?*/
? ? ? ? hour.style.transform = "rotate(" + h * 30 + "deg)"
? ? ? ? hour.style.transformOrigin = ' ?center 60% '
? ? },30)
</script>
?
</html>

效果：

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

您可能感興趣的文章:

js
鐘表

相關(guān)文章

js實(shí)現(xiàn)簡(jiǎn)單的手風(fēng)琴效果
本文主要介紹了js實(shí)現(xiàn)簡(jiǎn)單手風(fēng)琴效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
JS截取字符串常用方法詳細(xì)整理
截取字符串的使用比較廣泛，有很多中方法，本文粗略的整理了一些，感興趣的額朋友可以才參考下
2013-10-10
JS+css 圖片自動(dòng)縮放自適應(yīng)大小
編輯器上傳的圖片太大了，把FF和IE撐的走形，所以希望圖片在某些頁面里要有固定大小，如果需要某個(gè)范圍，用getElementByname來設(shè)定，也是一個(gè)道理：
2013-08-08
微信小程序開發(fā)之大轉(zhuǎn)盤仿天貓超市抽獎(jiǎng)實(shí)例
本篇文章主要介紹了微信小程序開發(fā)之大轉(zhuǎn)盤仿天貓超市抽獎(jiǎng)實(shí)例，這里整理了詳細(xì)的代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2016-12-12
JavaScript實(shí)現(xiàn)的背景自動(dòng)變色代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的背景自動(dòng)變色代碼,涉及JavaScript數(shù)組操作結(jié)合定時(shí)函數(shù)實(shí)現(xiàn)修改頁面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
寫出更好的JavaScript程序之undefined篇（中）
前一篇我介紹了幾種廣為使用的利用undefined這個(gè)概念值的辦法，這一篇我會(huì)介紹一些不太常見的辦法，其中還包括一個(gè)很巧妙的，我個(gè)人覺得很值得推廣的辦法。
2009-11-11
Javascript下的urlencode編碼解碼方法附decodeURIComponent
而本文，就大概說說如何在js中通過系統(tǒng)自帶的函數(shù)去解決這個(gè)問題。
2010-04-04
js實(shí)現(xiàn)加載更多功能實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)加載更多功能的方法,以實(shí)例演示了加載更多的代碼實(shí)現(xiàn),非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2016-10-10
微信sdk實(shí)現(xiàn)禁止微信分享(使用原生php實(shí)現(xiàn))
這篇文章主要介紹了微信sdk實(shí)現(xiàn)禁止微信分享(使用原生php實(shí)現(xiàn))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
微信小程序播放背景音樂的實(shí)例代碼
這篇文章主要介紹了微信小程序播放背景音樂,實(shí)現(xiàn)原理是通過wx.getBackgroundAudioManager獲取全局唯一的背景音頻管理器，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2022-01-01