javascript圓形電子鐘錶效果程式碼例項

admin發表於2017-04-12
JavaScript

本章節分享一段程式碼例項，它實現了圓形的電子鐘錶效果。

外表也算是比較美觀，需要的朋友可以借鑑一下。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
#box {
  width: 300px;
  height: 300px;
  border: solid 1px #000;
  border-radius: 50%;
  position: absolute;
  top: 100px;
  left: 300px;
  box-shadow: 1px 1px 5px #000;
  cursor: pointer;
}
.hour {
  width: 14px;
  height: 80px;
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -80px 0 0 -7px;
  border-radius: 50% 50% 0 0;
  transform-origin: center bottom;
}
.min {
  width: 14px;
  height: 100px;
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -7px;
  border-radius: 50% 50% 0 0;
  transform-origin: center bottom;
}
.sec {
  width: 4px;
  height: 120px;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -120px 0 0 -2px;
  transform-origin: center bottom;
}
.cap {
  width: 20px;
  height: 20px;
  background: #999;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -10px;
}
.scale {
  width: 4px;
  height: 10px;
  background: #000;
  position: absolute;
  left: 50%;
  margin-left: -2px;
  display: block;
  -webkit-transform: rotate(45deg);
  transform-origin: center 150px;
}
.bs {
  width: 6px;
  height: 18px;
  background: #000;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  display: block;
  -webkit-transform: rotate(45deg);
  transform-origin: center 150px;
}
.bs em {
  width: 50px;
  text-align: center;
  margin: 17px 0;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -25px;
  font-style: normal;
}
</style>
<script>
window.onload = function () {
  var oBox = document.getElementById('box');
  var oH = document.querySelector('.hour');
  var oM = document.querySelector('.min');
  var oS = document.querySelector('.sec');
 
  //生成刻度 - 整點
  var N = 60;
  for (var i = 0; i < N ; i++) {
    var oSpan = document.createElement('span');
    if (i % 5 == 0) {
      oSpan.className = 'bs';
      var num = i / 5 == 0 ? 12 : i / 5;
      oSpan.innerHTML = '<em>' + num + '</em>'
      oSpan.style.transform = 'rotate(' + (i * N) + 'deg)';
      oSpan.children[0].style.transform = 'rotate(' + -i * 6 + 'deg)'
    }
    else {
      oSpan.className = 'scale';
    }
    oBox.appendChild(oSpan);
    oSpan.style.transform = 'rotate(' + 6 * i + 'deg)'
  }
 
  //設定時間
  function clock() {
    var oDate = new Date();
    var h = oDate.getHours();
    var m = oDate.getMinutes() + 1;
    var s = oDate.getSeconds();
    var ms = oDate.getMilliseconds();
 
    oH.style.transform = 'rotate(' + (h * 30 + m / 60 * 30) + 'deg)';
    oM.style.transform = 'rotate(' + (m * 6 + s / 60 * 6) + 'deg)';
    oS.style.transform = 'rotate(' + (s * 6 + ms / 1000 * 6) + 'deg)';
  }
  clock();
  setInterval(clock, 30)
}
</script>
</head>
<body>
  <div id="box">
    <div class="hour"></div>
    <div class="min"></div>
    <div class="sec"></div>
    <div class="cap"></div>
  </div>
</body>
</html>

相關文章