js+css3實現簡單時鐘特效
本文實例為大家分享了js+css3實現簡單時鐘的具體代碼，供大家參考，具體內容如下
1.實現了時鐘的特效，可以轉動，時間準確，畫面美觀大氣；2.用到了css3的transform: rotate，transform-origin:,偽元素，border-radius，定位，z-index等等
效果如圖：
代碼如下：
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>CSS3時鐘特效</title> <link rel='shortcut icon' type='image/x-icon' href='http://www.piao2010.com/bcjs/img/an.ico' /> <style> /*表盤邊框*/ .clock { /* 設置大小 */ width: 400px; height: 400px; position: relative; margin: 40px auto; /*上邊距*/ border-radius: 50%; /*圓形*/ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5); /*表盤陰影*/ background: #F5DEB3; border: 10px solid #FFFF00; } /*畫刻度的面板*/ .box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /*用來裝刻度和數字的div*/ .box div { width: 0px; height: 200px; position: absolute; left: 200px; /*旋轉*/ transform: rotate(0deg); /*設置基點為右下角*/ transform-origin: bottom right; background: rgba(255, 0, 0, 0.5); } /*數字*/ .box div i { float: left; margin-top: 20px; margin-left: -10px; font-style: normal; width: 20px; text-align: center; font-style: 18px; } /*小刻度*/ .box div::after { content: ''; position: absolute; background: #484848; width: 2px; height: 10px; left: -1px; } /*大刻度*/ .box div.five::after { position: absolute; content: ''; width: 4px; height: 20px; left: -2px; top: 0; background: #484848; border-radius: 0 0 2px 2px; } /*秒針樣式*/ .second { width: 1px; height: 200px; background: red; position: absolute; left: 200px; /*距離表盤寬度一半*/ margin-top: 30px; z-index: 10; transform: rotate(0deg); transform-origin: center 170px; /*定位旋轉位置*/ } /*圓心樣式*/ .second::after { content: ''; position: absolute; width: 20px; height: 20px; background: red; border-radius: 50%; bottom: 20px; left: -10px; } /*分針樣式*/ .minute { width: 2px; height: 140px; background: #8b8b8d; position: absolute; left: 199px; margin-top: 60px; z-index: 9; transform-origin: center bottom; transform: rotate(12deg); animation: minute 60s linear infinite; } /*時針樣式*/ .hour { width: 6px; height: 100px; background: #333; position: absolute; left: 197px; margin-top: 100px; z-index: 8; border-radius: 3px; transform: rotate(2deg); transform-origin: center bottom; animation: minute 60s linear infinite; } </style> </head> <body> <div class='clock'> <div class='box'></div> <div class='second'></div> <div class='minute'></div> <div class='hour'></div> </div> <script> var box = document.getElementsByClassName('box')[0]; var ssObj = document.getElementsByClassName('second')[0]; var mmObj = document.getElementsByClassName('minute')[0]; var hhObj = document.getElementsByClassName('hour')[0]; /*獲取當前時間*/ var date = new Date(); var hh = date.getHours(); var mm = date.getMinutes(); var ss = date.getSeconds(); /*計算頁面指針加載時的角度*/ hhDeg = 360 * (hh % 12) / 12; mmDeg = 360 * mm / 60; ssDeg = 360 * ss / 60; hhObj.style.transform = 'rotate(' + hhDeg + 'deg)'; mmObj.style.transform = 'rotate(' + mmDeg + 'deg)'; ssObj.style.transform = 'rotate(' + ssDeg + 'deg)'; // 定義初始刻度的度數 var Deg = 0; /*畫刻度*/ for (var i = 0; i < 60; i++) { var div1 = document.createElement('div'); //創建一個div var hourNum = i / 5; //當為5時 if (hourNum == 0) hourNum = 12; if (i % 5 == 0) { //大刻度 div1.className = 'five'; div1.innerHTML = '<i>' + hourNum + '</i>' } div1.style.transform = 'rotate(' + Deg + 'deg)'; box.appendChild(div1); Deg += 6;// 每兩個刻度之間是6度 } /*指針轉動的函數*/ function drawSS() { // 秒針的度數 ssDeg = 360 * ss / 60; // 分針的度數 mmDeg1 = 360 * mm / 60; // 時針的度數 hhDeg1 = 360 * (hh % 12) / 12; // 分針每秒走的位置 mmDeg = mmDeg1 + (6 * ss / 60); // 時針每分鐘走的位置 hhDeg = hhDeg1 + (30 * mm / 60); hhObj.style.transform = 'rotate(' + hhDeg + 'deg)'; mmObj.style.transform = 'rotate(' + mmDeg + 'deg)'; ssObj.style.transform = 'rotate(' + ssDeg + 'deg)'; ss += 1; if (ss > 60) { ss = 1; mm += 1; } if (mm == 60) { mm = 0; hh += 1; } setTimeout(function() { drawSS(); }, 1000); } drawSS(); </script> </body></html>
精簡版：
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>CSS3時鐘特效</title> <link rel='shortcut icon' type='image/x-icon' href='http://www.piao2010.com/bcjs/img/an.ico' /> <style> /*表盤邊框*/ .clock { /* 設置大小 */ width: 400px; height: 400px; position: relative; margin: 40px auto; /*上邊距*/ border-radius: 50%; /*圓形*/ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5); /*表盤陰影*/ background: #F5DEB3; border: 10px solid #FFFF00; } /*畫刻度的面板*/ .box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /*用來裝刻度的div*/ .box div { width: 0px; height: 200px; position: absolute; left: 200px; /*旋轉*/ transform: rotate(0deg); /*設置基點為右下角*/ transform-origin: bottom right; background: rgba(255, 0, 0, 0.5); } /*小刻度*/ .box div:after { content: ''; position: absolute; background: #484848; width: 2px; height: 10px; left: -1px; } /*大刻度*/ .box div.five:after { position: absolute; content: ''; width: 4px; height: 20px; left: -2px; top: 0; background: #484848; border-radius: 0 0 2px 2px; } /*秒針樣式*/ .second { width: 1px; height: 200px; background: red; position: absolute; left: 200px; /*距離表盤寬度一半*/ margin-top: 30px; z-index: 10; transform: rotate(0deg); transform-origin: center 170px; /*定位旋轉位置*/ } /*圓心樣式*/ .second:after { content: ''; position: absolute; width: 20px; height: 20px; background: red; border-radius: 50%; bottom: 20px; left: -10px; } /*分針樣式*/ .minute { width: 2px; height: 140px; background: #8b8b8d; position: absolute; left: 199px; margin-top: 60px; z-index: 9; transform-origin: center bottom; transform: rotate(12deg); } /*時針樣式*/ .hour { width: 6px; height: 100px; background: #333; position: absolute; left: 197px; margin-top: 100px; z-index: 8; border-radius: 3px; transform: rotate(2deg); transform-origin: center bottom; } </style> </head> <body> <div class='clock'> <div class='box'></div> <div class='second'></div> <div class='minute'></div> <div class='hour'></div> </div> <script> var box = document.getElementsByClassName('box')[0]; var ssObj = document.getElementsByClassName('second')[0]; var mmObj = document.getElementsByClassName('minute')[0]; var hhObj = document.getElementsByClassName('hour')[0]; /*獲取當前時間*/ var date = new Date(); var hh = date.getHours(); var mm = date.getMinutes(); var ss = date.getSeconds(); /*計算頁面指針加載時的角度*/ drawSS(); // 定義初始刻度的度數 var Deg = 0; /*畫刻度*/ for (var i = 0; i < 60; i++) { var div1 = document.createElement('div'); //創建一個div //當為5時 if (i % 5 == 0) { //大刻度 div1.className = 'five'; } div1.style.transform = 'rotate(' + Deg + 'deg)'; box.appendChild(div1); Deg += 6;// 每兩個刻度之間是6度 } /*指針轉動的函數*/ function drawSS() { // 秒針的度數 ssDeg = 360 * ss / 60; // 分針的度數 mmDeg = 360 * mm / 60 + (6 * ss / 60); // 時針的度數 hhDeg = 360 * (hh % 12) / 12 + (30 * mm / 60); // 旋轉 hhObj.style.transform = 'rotate(' + hhDeg + 'deg)'; mmObj.style.transform = 'rotate(' + mmDeg + 'deg)'; ssObj.style.transform = 'rotate(' + ssDeg + 'deg)'; ss += 1; // 每秒鐘調用一次 setTimeout(function() { drawSS(); }, 1000); } </script> </body></html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備