利用css+原生js製作簡單的鐘錶。效果如下所示
實現該效果，分三大塊：html、javascript、css
html部分
html部分比較簡單，定義一個clock的div，內部有原點、時分秒針、日期以及時間，至於鐘錶上的刻度、數字等元素，因為量比較多，採用jvascript產生
<!doctype html><html><head> <meta charset="UTF-8"> <link rel='stylesheet' href='外部的css檔案路徑' /> <title>時鐘</title></head><body> <div class="clock" id="clock"> <!-- 原點 --> <div class="origin"></div> <!-- 時分秒針 --> <div class="clock-line hour-line" id="hour-line"></div> <div class="clock-line minute-line" id="minute-line"></div> <div class="clock-line second-line" id="second-line"></div> <!-- 日期 --> <div class="date-info" id="date-info"></div> <!-- 時間 --> <div class="time-info" > <div class="time" id="hour-time"></div> <div class="time" id="minute-time"></div> <div class="time" id="second-time"></div> </div> </div><script type='text/javascript' src='外部的javascript檔案路徑'></script></body></html>
css部分
開始代碼之前，有一些css的屬性需要瞭解，比如定位(position)，邊框圓角(border-radius),變換(transform)等
position屬性
position屬性規定元素的定位類型，有五個值：absolute、fixed、relative、static、inherit,預設為static，即沒有定位，元素按正常文檔流顯示；這裡主要用到的是absolute和relative
absulte值，將元素設定成絕對位置，相對於static定位意外的第一個上階項目進行定位，位置可以通過'left'、'top'、'right'、'bottom'屬性進行定位；如果上階項目都是static定位，則相對於body元素的位置進行定位
本例中，設定最外層的div clock為relative，所有下級元素均設定為absolute絕對位置，然後通過設定left、top等屬性的值，確定其相對於clock的位置。
border-radius屬性
border-radius屬性向元素添加圓角邊框，可以設定四個圓角的大小，本例中使用該屬性將clock元素設定成一個圓
此處寫了一個樣本：4個div元素，寬高都是100px，border-radius不同時的效果：
transform屬性
transform屬性向元素應用2D或3D旋轉，該屬性允許我們對元素進行旋轉、縮放、移動、或傾斜。本例中時針、分針、秒針、刻度等均用transform屬性設定旋轉；另外，transform-origin屬性可以設定元素的基點位置
css部分的代碼
/* 全域 */*{ margin:0; padding:0;}.clock{ width:400px; height:400px; border:10px solid #333; box-shadow: 0px 0px 20px 3px #444 inset; border-radius:210px; position:relative; margin:5px auto; z-index:10; background-color:#f6f6f6;}/* 時鐘數字 */.clock-num{ width:40px; height:40px; font-size:22px; text-align:center; line-height:40px; position:absolute; z-index:8; color:#555; font-family:fantasy, 'Trebuchet MS';}.em_num{ font-size:28px;}/* 指標 */.clock-line{ position:absolute; z-index:20;}.hour-line{width:100px; height:4px; top:198px; left:200px; background-color:#000; border-radius:2px; transform-origin:0 50%; box-shadow:1px -3px 8px 3px #aaa;}.minute-line{ width:130px; height:2px; top:199px; left:190px; background-color:#000; transform-origin:7.692% 50%; box-shadow:1px -3px 8px 1px #aaa;}.second-line{ width:170px; height:1px; top:199.5px; left:180px; background-color:#f60; transform-origin:11.765% 50%; box-shadow:1px -3px 7px 1px #bbb;}/* 原點 */.origin{ width:20px; height:20px; border-radius:10px; background-color:#000; position:absolute; top:190px; left:190px; z-index:14;}/* 日期 時間 */.date-info{ width:160px; height:28px; line-height:28px; text-align:center; position:absolute; top:230px; left:120px; z-index:11; color:#555; font-weight:bold; font-family:'微軟雅黑';}.time-info{ width:92px; height:30px; line-height:30px; text-align:center; position:absolute; top:270px; left:154px; z-index:11; background-color:#555; padding:0; box-shadow:0px 0px 9px 2px #222 inset;}.time{ width:30px; height:30px; text-align:center; float:left; color:#fff; font-weight:bold;}#minute-time{ border-left:1px solid #fff; border-right:1px solid #fff;}/* 刻度 */.clock-scale{ width:195px; height:2px; transform-origin:0% 50%; z-index:7; position:absolute; top:199px; left:200px;}.scale-show{ width:12px; height:2px; background-color:#555; float:left;}.scale-hidden{ width:183px; height:2px; float:left;}
javascript部分
js部分沒什麼好說的，簡單的dom操作，setInterval函數每隔一秒執行一次，修改指標的角度和顯示的時間即可。代碼如下
(function(){ window.onload=initNumXY(200, 160, 40,40); var hour_line = document.getElementById("hour-line"); var minute_line = document.getElementById("minute-line"); var second_line = document.getElementById("second-line"); var date_info = document.getElementById("date-info"); var week_day = [ '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ]; var hour_time = document.getElementById("hour-time"); var minute_time = document.getElementById("minute-time"); var second_time = document.getElementById("second-time"); function setTime(){ var this_day = new Date(); var hour = (this_day.getHours() >= 12) ? (this_day.getHours() - 12) : this_day.getHours(); var minute = this_day.getMinutes(); var second = this_day.getSeconds(); var hour_rotate = (hour*30-90) + (Math.floor(minute / 12) * 6); var year = this_day.getFullYear(); var month = ((this_day.getMonth() + 1) < 10 ) ? "0"+(this_day.getMonth() + 1) : (this_day.getMonth() + 1); var date = (this_day.getDate() < 10 ) ? "0"+this_day.getDate() : this_day.getDate(); var day = this_day.getDay(); hour_line.style.transform = 'rotate(' + hour_rotate + 'deg)'; minute_line.style.transform = 'rotate(' + (minute*6 - 90) + 'deg)'; second_line.style.transform = 'rotate(' + (second*6 - 90)+'deg)'; date_info.innerHTML = year + "-" + month + "-" + date + " " + week_day[day]; hour_time.innerHTML = (this_day.getHours() < 10) ? "0" + this_day.getHours() : this_day.getHours(); minute_time.innerHTML = (this_day.getMinutes() < 10) ? "0" + this_day.getMinutes() : this_day.getMinutes(); second_time.innerHTML = (this_day.getSeconds() < 10) ? "0" + this_day.getSeconds():this_day.getSeconds(); } setInterval(setTime, 1000); function initNumXY(R, r, w, h){ var numXY = [ { "left" : R + 0.5 * r - 0.5 * w, "top" : R - 0.5 * r * 1.73205 - 0.5 * h }, { "left" : R + 0.5 * r * 1.73205 - 0.5 * w, "top" : R - 0.5 * r - 0.5 * h }, { "left" : R + r - 0.5 * w, "top" : R - 0.5 * h }, { "left" : R + 0.5 * r * 1.73205 - 0.5 * w, "top" : R + 0.5 * r - 0.5 * h }, { "left" : R + 0.5 * r - 0.5 * w, "top" : R + 0.5 * r * 1.732 - 0.5 * h }, { "left" : R - 0.5 * w, "top" : R + r - 0.5 * h }, { "left" : R - 0.5 * r - 0.5 * w, "top" : R + 0.5 * r * 1.732 - 0.5 * h }, { "left" : R - 0.5 * r * 1.73205 - 0.5 * w, "top" : R + 0.5 * r - 0.5 * h }, { "left" : R - r - 0.5 * w, "top" : R - 0.5 * h }, { "left" : R - 0.5 * r * 1.73205 - 0.5 * w, "top" : R - 0.5 * r - 0.5 * h }, { "left" : R - 0.5 * r - 0.5 * w, "top": R - 0.5 * r * 1.73205 - 0.5 * h }, { "left" : R - 0.5 * w, "top" : R - r - 0.5 * h } ]; var clock = document.getElementById("clock"); for(var i = 1; i <= 12; i++){ if(i%3 == 0) { clock.innerHTML += "<div class='clock-num em_num'>"+i+"</div>"; } else { clock.innerHTML += "<div class='clock-num'>" + i + "</div>"; } } var clock_num = document.getElementsByClassName("clock-num"); for(var i = 0; i < clock_num.length; i++) { clock_num[i].style.left = numXY[i].left + 'px'; clock_num[i].style.top = numXY[i].top + 'px'; } for(var i = 0; i < 60; i++) { clock.innerHTML += "<div class='clock-scale'> " + "<div class='scale-hidden'></div>" + "<div class='scale-show'></div>" + "</div>"; } var scale = document.getElementsByClassName("clock-scale"); for(var i = 0; i < scale.length; i++) { scale[i].style.transform="rotate(" + (i * 6 - 90) + "deg)"; } }})();
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
