溫習數據算法—羅盤時鍾

 前言

分享幾款JS實現的在線羅盤時鍾應用，代碼簡潔好摘，可以學習參考，可以應用到自己的項目里！

---

 項目演示

羅盤時鍾樣式1

 

 

---

羅盤時鍾樣式2

 

---

 羅盤時鍾樣式3

 

---

 源碼下載地址

  羅盤時鍾樣式1：

百度網盤鏈接：https://pan.baidu.com/s/1V_AZw4M5jCIWKy91QDvN0A
提取碼：xion 

  羅盤時鍾樣式2：

百度網盤鏈接：https://pan.baidu.com/s/1nqINmAQ6KkXVeZAprvpPSw
提取碼：xion 

  羅盤時鍾樣式3：

百度網盤鏈接：https://pan.baidu.com/s/1RuOD2cqNVnJAv_33jt1p-w
提取碼：xion

 

 展示一下第一種羅盤時鍾的代碼

 HTML

<div id="wrap">
    <div class="wrap_inner">
        <div class="timeout"></div>
        <div class="timeout"></div>
        <div class="timeout"></div>
        <div class="timeout"></div>
        <div class="timeout"></div>
        <div class="timeout"></div>
    </div>
    <div class="zhizhen"></div>
</div>

 CSS

* {
  margin:0;
  padding:0;
}
#wrap {
  position:fixed;
  left:0;
  top:300px;
  width:800px;
  height:800px;
  border:1px solid #000;
  position:fixed;
  left:0;
  top:0;
  color:gold;
  font-size:14px;
  position:relative;
  background:#000;
  line-height:20px;
}
#wrap .wrap_inner {
  width:800px;
  height:800px;
  background:#000;
  position:relative;
  border-radius:50%;
}
#wrap .wrap_inner .timeout {
  width:800px;
  height:800px;
  position:absolute;
  background:transparent;
}
#wrap .wrap_inner .timeout:nth-of-type(1) {
  transition:1s linear;
  box-shadow:0 0 20px gold;
  border-radius:50%;
}
#wrap .wrap_inner .timeout:nth-of-type(2) {
  width:600px;
  height:600px;
  left:100px;
  top:100px;
  transition:1s linear;
}
#wrap .wrap_inner .timeout:nth-of-type(3) {
  width:400px;
  height:400px;
  left:200px;
  top:200px;
  transition:1s linear;
}
#wrap .wrap_inner .timeout:nth-of-type(4) {
  width:300px;
  height:300px;
  left:250px;
  top:250px;
  transition:1s linear;
}
#wrap .wrap_inner .timeout:nth-of-type(5) {
  width:200px;
  height:200px;
  left:300px;
  top:300px;
  transition:1s linear;
}
#wrap .wrap_inner .timeout .secbox {
  width:400px;
  height:20px;
  position:absolute;
  left:400px;
  top:390px;
  transform-origin:left center;
}
#wrap .wrap_inner .timeout .minbox {
  width:300px;
  height:20px;
  position:absolute;
  left:300px;
  top:290px;
  transform-origin:left center;
}
#wrap .wrap_inner .timeout .houbox {
  width:200px;
  height:20px;
  position:absolute;
  left:200px;
  top:190px;
  transform-origin:left center;
}
#wrap .wrap_inner .timeout .datbox {
  width:150px;
  height:20px;
  position:absolute;
  left:150px;
  top:140px;
  transform-origin:left center;
}
#wrap .wrap_inner .timeout .daybox {
  width:100px;
  height:20px;
  position:absolute;
  left:100px;
  top:90px;
  transform-origin:left center;
}
#wrap .zhizhen {
  width:400px;
  height:20px;
  background:rgba(255,255,255,.4);
  position:absolute;
  left:400px;
  top:390px;
  z-index:999;
}

JS

var Months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
 var Days = ['一號', '二號', '三號', '四號', '五號', '六號', '七號', '八號', '九號', '十號', '十一號', '十二號', '十三號', '十四號', '十五號', '十六號', '十七號', '十八號', '十九號', '二十號', '二十一號', '二十二號', '二十三號', '二十四號', '二十五號', '二十六號', '二十七號', '二十八號', '二十九號', '三十號', '三十一號'];
 var Dates = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
 var Hours = ['零點', '一點', '二點', '三點', '四點', '五點', '六點', '七點', '八點', '九點', '十點', '十一點', '十二點', '十三點', '十四點', '十五點', '十六點', '十七點', '十八點', '十九點', '二十點', '二十一點', '二十二點', '二十三點'];
 var Minutes = ['一分', '二分', '三分', '四分', '五分', '六分', '七分', '八分', '九分', '十分', '十一分', '十二分', '十三分', '十四分', '十五分', '十六分', '十七分', '十八分', '十九分', '二十分', '二十一分', '二十二分', '二十三分', '二十四分', '二十五分', '二十六分', '二十七分', '二十八分', '二十九分', '三十分', '三十一分', '三十二分', '三十三分', '三十四分', '三十五分', '三十六分', '三十七分', '三十八分', '三十九分', '四十分', '四十一分', '四十二分', '四十三分', '四十四分', '四十五分', '四十六分', '四十七分', '四十八分', '四十九分', '五十分', '五十一分', '五十二分', '五十三分', '五十四分', '五十五分', '五十六分', '五十七分', '五十八分', '五十九分', '六十分'];
 var Second = ['一秒', '二秒', '三秒', '四秒', '五秒', '六秒', '七秒', '八秒', '九秒', '十秒', '十一秒', '十二秒', '十三秒', '十四秒', '十五秒', '十六秒', '十七秒', '十八秒', '十九秒', '二十秒', '二十一秒', '二十二秒', '二十三秒', '二十四秒', '二十五秒', '二十六秒', '二十七秒', '二十八秒', '二十九秒', '三十秒', '三十一秒', '三十二秒', '三十三秒', '三十四秒', '三十五秒', '三十六秒', '三十七秒', '三十八秒', '三十九秒', '四十秒', '四十一秒', '四十二秒', '四十三秒', '四十四秒', '四十五秒', '四十六秒', '四十七秒', '四十八秒', '四十九秒', '五十秒', '五十一秒', '五十二秒', '五十三秒', '五十四秒', '五十五秒', '五十六秒', '五十七秒', '五十八秒', '五十九秒', '六十秒'];
 var Otimeout = document.querySelectorAll('.timeout');

 var date = new Date();
 var month = date.getMonth() + 1;
 var data = date.getDate();
 var day = date.getDay();
 var hours = date.getHours();
 var minutes = date.getMinutes();
 var seconds = date.getSeconds();
 console.log(day)
 console.log(data)
 var nowsecond = 'rotate(' + -6 * (seconds - 1) + 'deg)'
 Otimeout[0].style.transform = nowsecond;
 var nowminutes = 'rotate(' + -6 * (minutes - 1) + 'deg)'
 Otimeout[1].style.transform = nowminutes;
 var nowhours = 'rotate(' + -15 * (hours) + 'deg)'
 Otimeout[2].style.transform = nowhours;
 var nowday = 'rotate(' + -51.4 * (day - 1) + 'deg)'
 Otimeout[3].style.transform = nowday;
 var nowdata = 'rotate(' + -11.6 * (data - 1) + 'deg)'
 Otimeout[4].style.transform = nowdata;

 (function() {

     //秒
     for (var i = 0; i < 60; i++) {
         var secbox = document.createElement('div');
         secbox.className = 'secbox'
         var Rotate = 'rotate(' + 6 * i + 'deg)'
         // console.log(Rotate)
         secbox.style.transform = Rotate
         secbox.innerText = Second[i]
         secbox.style.textAlign = 'right'
         Otimeout[0].appendChild(secbox);
     }

     //分
     for (var i = 0; i < 60; i++) {
         var minbox = document.createElement('div');
         minbox.className = 'minbox'
         var Rotate = 'rotate(' + 6 * i + 'deg)'
         // console.log(Rotate)
         minbox.style.transform = Rotate
         minbox.innerText = Minutes[i]
         minbox.style.textAlign = 'right'
         Otimeout[1].appendChild(minbox);
     }
     //時
     for (var i = 0; i < 24; i++) {
         var houbox = document.createElement('div');
         houbox.className = 'houbox'
         var Rotate = 'rotate(' + 15 * i + 'deg)'
         // console.log(Rotate)
         houbox.style.transform = Rotate
         houbox.innerText = Hours[i]
         houbox.style.textAlign = 'right'
         // houbox.style.textIndent = '1em'
         Otimeout[2].appendChild(houbox);
     }
     //星期
     for (var i = 0; i < 7; i++) {
         var datbox = document.createElement('div');
         datbox.className = 'datbox'
         var Rotate = 'rotate(' + 51.4 * i + 'deg)'
         // console.log(Rotate)
         datbox.style.transform = Rotate
         datbox.innerText = Dates[i]
         datbox.style.textAlign = 'right'
         Otimeout[3].appendChild(datbox);
     }
     //天
     for (var i = 0; i < 31; i++) {
         var daybox = document.createElement('div');
         daybox.className = 'daybox'
         var Rotate = 'rotate(' + 11.6 * i + 'deg)'
         // console.log(Rotate)
         daybox.style.transform = Rotate
         daybox.innerText = Days[i]
         daybox.style.textAlign = 'right'
         Otimeout[4].appendChild(daybox);
     }

     (function() {
         var count = seconds - 1;
         var con = minutes - 1;
         var cos = hours - 2;
         var timer = setInterval(function() {
             count++
             var rotate = 'rotate(' + -6 * count + 'deg)'
             Otimeout[0].style.transform = rotate
             if (count % 60 == 0) {
                 con++;
                 var rotate1 = 'rotate(' + -6 * con + 'deg)'
                 Otimeout[1].style.transform = rotate1
                 if (con % 60 == 0) {
                     cos++;
                     var rotate2 = 'rotate(' + -15 * cos + 'deg)'
                     Otimeout[2].style.transform = rotate2

                 }
             }
         }, 1000)
     })();
 })()

 function $(id) {
     return document.querySelector(id)
 }

 

 

 

 

 

 

歡迎關注訂閱我的微信公眾平台【熊澤有話說】，更多好玩易學知識等你來取
作者：熊澤-學習中的苦與樂
公眾號：熊澤有話說
出處： https://www.cnblogs.com/xiongze520/p/14378338.html
創作不易，轉載或者部分轉載、摘錄，請在文章明顯位置注明作者和原文鏈接。