用JavaScript實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)時(shí)鐘
利用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)時(shí)鐘，效果如下圖所示：
首先在body中完成表盤、指針的資源載入：
<div><img src='http://www.baoyu77737.com/image/clockface.jpg' alt=''></div><hr ><hr id='min'><hr id='second'>
設(shè)置CSS樣式：
<style>body{ margin: 0;}div{ margin: 0 auto; width: 600px; height: 600px;}#hour{ background-color: black; width: 130px; height: 10px; position: fixed; top: 295px; left: 50%; margin-left: -65px;}#min{ background-color: red; width: 200px; height: 8px; position: fixed; top: 296px; left: 50%; margin-left: -100px;}#second{ background-color: yellow; width: 270px; height: 5px; position: fixed; top: 297.5px; left: 50%; margin-left: -135px;}</style>
最后是JS代碼部分，使用循環(huán)定時(shí)器setInterval()每秒調(diào)用一次主函數(shù)，主函數(shù)內(nèi)使用new Date()創(chuàng)建時(shí)間對(duì)象，分別使用 .getHours()；.getMinutes()；.getSeconds()獲得當(dāng)前的時(shí)分秒，然后利用CSS自帶動(dòng)畫-旋轉(zhuǎn)改變指針的角度：
setInterval(watch,1000);var anjleSeconds=0,anjleMin=0,anjleHours=0;function watch() {var Time= new Date();anjleSeconds=Time.getSeconds()/60*360+90;anjleMin=Time.getMinutes()/60*360+90;anjleHours=nowHours/12*360+90;document.getElementById('second').style.transform='rotate('+anjleSeconds+'deg)';document.getElementById('min').style.transform='rotate('+anjleMin+'deg)';document.getElementById('hour').style.transform='rotate('+anjleHours+'deg)'; }
目前存在的問題是，時(shí)分秒指針由于使用的是hr標(biāo)簽表示，所以存在兩端一樣長(zhǎng)的問題。
完整代碼如下：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <style>body{ margin: 0;}div{ margin: 0 auto; width: 600px; height: 600px;}#hour{ background-color: black; width: 130px; height: 10px; position: fixed; top: 295px; left: 50%; margin-left: -65px;}#min{ background-color: red; width: 200px; height: 8px; position: fixed; top: 296px; left: 50%; margin-left: -100px;}#second{ background-color: yellow; width: 270px; height: 5px; position: fixed; top: 297.5px; left: 50%; margin-left: -135px;} </style></head><body><div><img src='http://www.baoyu77737.com/image/clockface.jpg' alt=''></div><hr ><hr id='min'><hr id='second'><script> setInterval(watch,1000); var anjleSeconds=0,anjleMin=0,anjleHours=0; function watch() {var Time= new Date();anjleSeconds=Time.getSeconds()/60*360+90;anjleMin=Time.getMinutes()/60*360+90;anjleHours=Time.getHours()/12*360+90;document.getElementById('second').style.transform='rotate('+anjleSeconds+'deg)';document.getElementById('min').style.transform='rotate('+anjleMin+'deg)';document.getElementById('hour').style.transform='rotate('+anjleHours+'deg)'; }</script></body></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Xml簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理2. UDDI FAQs3. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案4. ASP常用日期格式化函數(shù) FormatDate()5. 將properties文件的配置設(shè)置為整個(gè)Web應(yīng)用的全局變量實(shí)現(xiàn)方法6. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享7. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能8. jsp+servlet實(shí)現(xiàn)猜數(shù)字游戲9. jsp文件下載功能實(shí)現(xiàn)代碼10. JSP之表單提交get和post的區(qū)別詳解及實(shí)例
網(wǎng)公網(wǎng)安備