您好,登錄后才能下訂單哦!
這篇文章主要介紹“怎么用原生js實現電子時鐘”,在日常操作中,相信很多人在怎么用原生js實現電子時鐘問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”怎么用原生js實現電子時鐘”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
index.html
<!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>數字時鐘</title> <link rel="stylesheet" href="index.css" rel="external nofollow" > </head> <body> <div class="wrap"> <div class="item">0</div><!-- 0~2 --> <div class="item">0</div><!-- 0~9 --> <div class="colon">:</div> <div class="item">0</div><!-- 0~6 --> <div class="item">0</div><!-- 0~9 --> <div class="colon">:</div> <div class="item">0</div><!-- 0~6 --> <div class="item">0</div><!-- 0~9 --> </div> <script src="clock.js"></script> </body> </html>
index.css
* { margin: 0; padding: 0; } body { background-color: black; } .wrap { width: 800px; height: 100px; background-color: #355da7; border-radius: 10px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; display: flex; } .wrap .item, .wrap .colon { flex: 1; text-align: center; line-height: 100px; font-size: 70px; font-weight: 100; color: wheat; }
clock.js
let item = document.getElementsByClassName("item"); function changeTime() { setInterval(function() { let hour = new Date().getHours(); let minute = new Date().getMinutes(); let sec = new Date().getSeconds(); let hourItem = handleTime(hour); let minuteItem = handleTime(minute); let secItem = handleTime(sec); item[0].innerHTML = hourItem[0]; item[1].innerHTML = hourItem[1]; item[2].innerHTML = minuteItem[0]; item[3].innerHTML = minuteItem[1]; item[4].innerHTML = secItem[0]; item[5].innerHTML = secItem[1]; },1000) } changeTime(); function handleTime(number) { let arr = []; //23 =2--3 //11 =1--1 //10 % 10 = 1--0 //5 % 10 = 0--5 let a = number % 10; let b = (number - a) / 10; arr.push(b,a); return arr; }
到此,關于“怎么用原生js實現電子時鐘”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注億速云網站,小編會繼續努力為大家帶來更多實用的文章!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。