快捷導(dǎo)航

JS實現(xiàn)簡易刻度時鐘示例代碼

更新時間：2017年03月11日 11:16:42 作者：liujian_laohan

本篇文章主要介紹了JS實現(xiàn)簡易刻度時鐘示例代碼的資料,這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。

如圖所示，利用JS實現(xiàn)簡易的刻度時鐘；

原理如下：利用60等份的li進(jìn)行布局，li兩兩之間的間隔為6deg，把基點定在圓心上，使得li圓形分布。然后另外設(shè)置三條針線的樣式的位置，基點同樣定在圓心上，然后秒針每秒動6deg，分針每秒動1/60deg，時針每秒動1/3600deg。

布局代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css" id="sty">
      *{
        margin: 0;
        padding: 0;
        list-style: none;
      }
      #wrap{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        border-radius: 50%;
        margin: 20px auto;
        position: relative;
      }
      #wrap ul{
        position: relative;
      }
      #wrap ul li{
        width: 2px;
        height: 6px;
        background: #000;
        position: absolute;
        left: 99px;
        top: 0;
        -moz-transform-origin: center 100px;
      }
      #wrap ul li:nth-child(5n){
        height: 10px;
      }
      #con{
        width: 10px;
        height: 10px;
        background: #000;
        border-radius: 50%;
        position: absolute;
        left: 95px;
        top: 95px;
      }
      #hour{
        width: 5px;
        height: 70px;
        background: red;
        border-radius: 50%;
        position: absolute;
        left: 98px;
        top: 35px;
        -moz-transform-origin: center 65px;
      }
      #min{
        width: 3px;
        height: 85px;
        background: #000;
        border-radius: 50%;
        position: absolute;
        left: 98.5px;
        top: 20px;
        -moz-transform-origin: center 80px;
      }
      #sec{
        width: 2px;
        height: 100px;
        background: gray;
        border-radius: 50%;
        position: absolute;
        left: 98.5px;
        top: 20px;
        -moz-transform-origin: center 80px;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <ul id="list">

      </ul>
      <div id="hour"></div>
      <div id="min"></div>
      <div id="sec"></div>
      <div id="con"></div>
    </div>
  </body>
</html>

布局代碼里需要注意的是：每隔四個刻度就有一個刻度比較長，所以我們在設(shè)置樣式的時候要特別注意加上：#wrap ul li:nth-child(5n){height: 10px;}。第5n個的長度變長。

JS代碼中主要搞清楚三針之間的度數(shù)關(guān)系就好做了，代碼如下：

<script type="text/javascript">
  window.onload=function(){
    var oWrap=document.getElementById('wrap');
    var oList=document.getElementById('list');
    var oSty=document.getElementById('sty');

    var tump='';

    for(var i=0;i<60;i++){
      var aLi=document.createElement('li');
      oList.appendChild(aLi);

      tump+='#wrap ul li:nth-child('+(i+1)+'){transform: rotate('+(i+1)*6+'deg);}';
      oSty.innerHTML+=tump;
    }

    var oSec=document.getElementById('sec');
    var oMin=document.getElementById('min');
    var oHour=document.getElementById('hour');
    function time(){
      var date=new Date();
      var s=date.getSeconds();
      var m=date.getMinutes()+(s/60);
      var h=date.getHours()+(m/60);

      oSec.style.transform='rotate('+s*6+'deg)';
      oMin.style.transform='rotate('+m*6+'deg)';
      oHour.style.transform='rotate('+h*30+'deg)';
    }
    time();

    setInterval(time,1000);
  }
</script>

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

您可能感興趣的文章:

js
時鐘

相關(guān)文章

輸入自動提示搜索提示功能的javascript:sugggestion.js
該js文件中的代碼實現(xiàn)了[輸入自動搜索提示]功能,如百度、google搜索框中輸入一些字符會以下拉列表形式給出一些提示，提高了用戶體驗
2013-09-09
JS Testing Properties 判斷屬性是否在對象里的方法
下面小編就為大家?guī)硪黄狫S Testing Properties 判斷屬性是否在對象里的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
js HTML5手機(jī)刮刮樂代碼
這篇文章為大家詳細(xì)主要介紹了js HTML5手機(jī)刮刮樂代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
js禁止頁面使用右鍵(簡單示例代碼)
js禁止頁面使用右鍵(簡單示例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
javascript的事件觸發(fā)器介紹的實現(xiàn)
這篇文章主要介紹了javascript的事件觸發(fā)器介紹的實現(xiàn),本文所指觸發(fā)器是用程序來觸發(fā)綁定的事件,而不是人為的去觸發(fā),需要的朋友可以參考下
2014-06-06
JavaScript緩動動畫函數(shù)的封裝方法
這篇文章主要為大家詳細(xì)介紹了JavaScript緩動動畫函數(shù)的封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-11-11
javaScript如何處理從java后臺返回的list
把List集合轉(zhuǎn)成json格式傳到界面上，這樣js里面操作也簡單，具體的解決方法如下，大家可以參考學(xué)習(xí)下
2014-04-04
es6數(shù)組的flat()，flatMap()函數(shù)用法實例分析
這篇文章主要介紹了es6數(shù)組的flat()，flatMap()函數(shù)用法,結(jié)合實例形式分析了es6數(shù)組的flat()，flatMap()函數(shù)基本功能、使用方法及操作注意事項,需要的朋友可以參考下
2020-04-04
這篇文章主要介紹了基于JS實現(xiàn)的倒計時程序,實例分析了javascript實現(xiàn)倒計時計數(shù)的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下
2015-07-07