JavaScript實現(xiàn)鐘表案例
更新時間:2022年01月13日 08:52:21 作者:HAI6545
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)鐘表案例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(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/時針.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% ' /*時針一圈360度 12小時制 一共走12次 ?d 每小時30度 ?*/ ? ? ? ? hour.style.transform = "rotate(" + h * 30 + "deg)" ? ? ? ? hour.style.transformOrigin = ' ?center 60% ' ? ? },30) </script> ? </html>
效果:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Uni-App用uView組件庫中u-picker實現(xiàn)地區(qū)的省-市-區(qū)三級聯(lián)動、確認及回顯
最近項目要使用uni-app遇到省市縣三級聯(lián)動的問題,下面這篇文章主要給大家介紹了關(guān)于Uni-App用uView組件庫中u-picker實現(xiàn)地區(qū)的省-市-區(qū)三級聯(lián)動、確認及回顯的相關(guān)資料,需要的朋友可以參考下2023-12-12原生JS實現(xiàn)圖片無縫滾動方法(附帶封裝的運動框架)
下面小編就為大家?guī)硪黄鶭S實現(xiàn)圖片無縫滾動方法(附帶封裝的運動框架)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10javascript 動態(tài)改變層的Z-INDEX的代碼style.zIndex
javascript 動態(tài)改變層的Z-INDEX的代碼style.zIndex...2007-08-08JavaScript 使用Ckeditor+Ckfinder文件上傳案例詳解
這篇文章主要介紹了JavaScript 使用Ckeditor+Ckfinder文件上傳案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-08-08javascript中不提供sleep功能如何實現(xiàn)這個功能
javascript中不提供sleep功能,而我們時長會用到這個功能,下面與大家分享個不錯的解決方法,而且在不同的機器上的執(zhí)行速度是一致的2014-05-05