DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 利用css+原生js制作簡單的鐘表
利用css+原生js制作簡單的鐘表
編輯:關於JavaScript     

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved