制作簡單鍾表

本文轉載自查看原文 2016-07-11 08:29 888 demo

利用css+原生js制作簡單的鍾表。效果如下所示

實現該效果，分三大塊：html、javascript、css

html部分

html部分比較簡單，定義一個clock的div，內部有原點、時分秒針、日期以及時間，至於鍾表上的刻度、數字等元素，因為量比較多，采用jvascript生成

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <link rel='stylesheet' href='外部的css文件路徑' />
 6     <title>時鍾</title>
 7 </head>
 8 <body>
 9     <div class="clock" id="clock">
10         <!-- 原點 -->
11         <div class="origin"></div>
12 
13         <!-- 時分秒針 -->
14         <div class="clock-line hour-line" id="hour-line"></div>
15         <div class="clock-line minute-line" id="minute-line"></div>
16         <div class="clock-line second-line" id="second-line"></div>
17 
18         <!-- 日期 -->
19         <div class="date-info" id="date-info"></div>
20         <!-- 時間 -->
21         <div class="time-info" >
22             <div class="time" id="hour-time"></div>
23             <div class="time" id="minute-time"></div>
24             <div class="time" id="second-time"></div>
25         </div>
26     </div>
27 <script type='text/javascript' src='外部的javascript文件路徑'></script>
28 </body>
29 </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部分的代碼

  1 /* 全局 */
  2 *{
  3     margin:0;
  4     padding:0;
  5 }
  6 .clock{
  7     width:400px;
  8     height:400px;
  9     border:10px solid #333;
 10     box-shadow: 0px 0px 20px 3px #444 inset;
 11     border-radius:210px;
 12     position:relative;
 13     margin:5px auto;
 14     z-index:10;
 15     background-color:#f6f6f6;
 16 }
 17 /* 時鍾數字 */
 18 .clock-num{
 19     width:40px;
 20     height:40px;
 21     font-size:22px;
 22     text-align:center;
 23     line-height:40px;
 24     position:absolute;
 25     z-index:8;
 26     color:#555;
 27     font-family:fantasy, 'Trebuchet MS';
 28 }
 29 .em_num{
 30     font-size:28px;
 31 }
 32 /* 指針 */
 33 .clock-line{
 34     position:absolute;
 35     z-index:20;
 36 }
 37 .hour-line{width:100px;
 38     height:4px;
 39     top:198px;
 40     left:200px;
 41     background-color:#000;
 42     border-radius:2px;
 43     transform-origin:0 50%;
 44     box-shadow:1px -3px 8px 3px #aaa;
 45 }
 46 .minute-line{
 47     width:130px;
 48     height:2px;
 49     top:199px;
 50     left:190px;
 51     background-color:#000;
 52     transform-origin:7.692% 50%;
 53     box-shadow:1px -3px 8px 1px #aaa;
 54 }
 55 .second-line{
 56     width:170px;
 57     height:1px;
 58     top:199.5px;
 59     left:180px;
 60     background-color:#f60;
 61     transform-origin:11.765% 50%;
 62     box-shadow:1px -3px 7px 1px #bbb;
 63 }
 64 /* 原點 */
 65 .origin{
 66     width:20px;
 67     height:20px;
 68     border-radius:10px;
 69     background-color:#000;
 70     position:absolute;
 71     top:190px;
 72     left:190px;
 73     z-index:14;
 74 }
 75 
 76 /* 日期 時間 */
 77 .date-info{
 78     width:160px;
 79     height:28px;
 80     line-height:28px;
 81     text-align:center;
 82     position:absolute;
 83     top:230px;
 84     left:120px;
 85     z-index:11;
 86     color:#555;
 87     font-weight:bold;
 88     font-family:'微軟雅黑';
 89 }
 90 .time-info{
 91     width:92px;
 92     height:30px;
 93     line-height:30px;
 94     text-align:center;
 95     position:absolute;
 96     top:270px;
 97     left:154px;
 98     z-index:11;
 99     background-color:#555;
100     padding:0;
101     box-shadow:0px 0px 9px 2px #222 inset;
102 }
103 .time{
104     width:30px;
105     height:30px;
106     text-align:center;
107     float:left;
108     color:#fff;
109     font-weight:bold;
110 }
111 #minute-time{
112     border-left:1px solid #fff;
113     border-right:1px solid #fff;
114 }
115 
116 /* 刻度 */
117 .clock-scale{
118     width:195px;
119     height:2px;
120     transform-origin:0% 50%;
121     z-index:7;
122     position:absolute;
123     top:199px;
124     left:200px;
125 }
126 .scale-show{
127     width:12px;
128     height:2px;
129     background-color:#555;
130     float:left;
131 }
132 .scale-hidden{
133     width:183px;
134     height:2px;
135     float:left;
136 }

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)";
            }
        }
})();

說明：如果沒有刻度或指針不動等情況，需要確定引入了css和js文件，另外關於transform屬性，一些瀏覽器上需要加瀏覽器對應的前綴，如：IE 9 需要寫成 : -ms-transform，safari和chrome需要寫成：-webkit-transform，具體請參考鏈接：transform、transform-origin

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 關於Graphics/Graphics2D以及簡單的幾何圖像制作（一個簡單鍾表的實現） JS實現一個簡單的網頁鍾表關於Javascript中頁面動態鍾表的簡單實現太可愛了！CSS3 & SVG 制作的米老鼠鍾表利用css+原生js制作簡易鍾表動態指針時鍾：利用pyqt5制作指針鍾表顯示實時時間 python ——鍾表 easyx 簡單的inputbox制作 python簡單制作GIF Jsp分頁的簡單制作