快捷導(dǎo)航

利用css+原生js制作簡單的鐘表

更新時(shí)間：2021年08月23日 14:14:48 作者：申錦祥

這篇文章主要為大家詳細(xì)介紹了如何利用css+原生js制作簡單的鐘表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

實(shí)現(xiàn)該效果，分三大塊：html、javascript、css

html部分
html部分比較簡單，定義一個(gè)clock的div，內(nèi)部有原點(diǎn)、時(shí)分秒針、日期以及時(shí)間，至于鐘表上的刻度、數(shù)字等元素，因?yàn)榱勘容^多，采用jvascript生成

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <link rel='stylesheet' href='外部的css文件路徑' />
 <title>時(shí)鐘</title>
</head>
<body>
 <div class="clock" id="clock">
  <!-- 原點(diǎn) -->
  <div class="origin"></div>

  <!-- 時(shí)分秒針 -->
  <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>
  <!-- 時(shí)間 -->
  <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屬性規(guī)定元素的定位類型，有五個(gè)值：absolute、fixed、relative、static、inherit,默認(rèn)為static，即沒有定位，元素按正常文檔流顯示；這里主要用到的是absolute和relative
absulte值，將元素設(shè)置成絕對定位，相對于static定位意外的第一個(gè)上級元素進(jìn)行定位，位置可以通過'left'、'top'、'right'、'bottom'屬性進(jìn)行定位；如果上級元素都是static定位，則相對于body元素的位置進(jìn)行定位
本例中，設(shè)定最外層的div clock為relative，所有下級元素均設(shè)定為absolute絕對定位，然后通過設(shè)置left、top等屬性的值，確定其相對于clock的位置。

border-radius屬性

border-radius屬性向元素添加圓角邊框，可以設(shè)置四個(gè)圓角的大小，本例中使用該屬性將clock元素設(shè)置成一個(gè)圓
此處寫了一個(gè)示例：4個(gè)div元素，寬高都是100px，border-radius不同時(shí)的效果：

transform屬性
transform屬性向元素應(yīng)用2D或3D旋轉(zhuǎn)，該屬性允許我們對元素進(jìn)行旋轉(zhuǎn)、縮放、移動、或傾斜。本例中時(shí)針、分針、秒針、刻度等均用transform屬性設(shè)置旋轉(zhuǎn)；另外，transform-origin屬性可以設(shè)置元素的基點(diǎn)位置

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;
}
/* 時(shí)鐘數(shù)字 */
.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;
}
/* 原點(diǎn) */
.origin{
 width:20px;
 height:20px;
 border-radius:10px;
 background-color:#000;
 position:absolute;
 top:190px;
 left:190px;
 z-index:14;
}

/* 日期 時(shí)間 */
.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函數(shù)每隔一秒執(zhí)行一次，修改指針的角度和顯示的時(shí)間即可。代碼如下

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: