JavaScript圓形鐘錶效果

admin發表於2017-04-17
JavaScript

分享一段程式碼例項，它實現了利用js實現了自動讀取本地時間的圓形鐘錶效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#outbox {
  position: relative;
  border-radius: 50%;
  width: 400px;
  height: 400px;
  margin: 150px auto;
  background: linear-gradient(#D1E6ED, #767775);
}
#innerbox {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  margin: 20px;
  background-color: white;
  box-shadow: 0 0 10px 5px gray inset;
}
#innerbox > div {
  width: 350px;
  height: 32px;
  font-size: 1.5em;
  line-height: 32px;
  text-align: center;
  position: absolute;
  top: 164px;
  left: 5px;
}
#innerbox > div > span:nth-child(1) {
  float: left;
}
#innerbox > div > span:nth-child(2) {
  float: right;
}
#second_line {
  height: 175px;
  width: 4px;
  background-color: red;
  top: 25px;
  left: 198px;
  position: absolute;
  z-index: 13;
}
#minute_line {
  height: 150px;
  width: 6px;
  background-color: blue;
  top: 50px;
  left: 197px;
  position: absolute;
  z-index: 12;
}
#hour_line {
  height: 130px;
  width: 8px;
  background-color: black;
  top: 70px;
  left: 196px;
  position: absolute;
  z-index: 11;
}
</style>
</head>
<body>
  <div id="outbox">
    <div id="innerbox">
      <div>
        <span>1</span><span>7</span>
      </div>
      <div>
        <span>2</span><span>8</span>
      </div>
      <div>
        <span>3</span><span>9</span>
      </div>
      <div>
        <span>4</span><span>10</span>
      </div>
      <div>
        <span>5</span><span>11</span>
      </div>
      <div>
        <span>6</span><span>12</span>
      </div>
    </div>
    <div id="second_line">
    </div>
    <div id="minute_line">
    </div>
    <div id="hour_line">
    </div>
  </div>
</body>
<script>
var hours, minutes, seconds;
//獲取所有元素
var arrDiv = document.querySelectorAll("#innerbox>div");
var arrSpan = document.querySelectorAll("#innerbox>div>span");
 
//佈局
for (var i = 0; i < arrDiv.length; i++) {
  arrDiv[i].style.transform = "rotateZ(-" + (240 - 30 * i) + "deg)";
}
 
for (var i = 0; i < arrSpan.length; i += 2) {
  arrSpan[i].style.transform = "rotateZ(" + (240 - 15 * i) + "deg)";
  arrSpan[i + 1].style.transform = "rotateZ(" + (240 - 15 * i) + "deg)";
}
 
//選擇旋轉點
document.getElementById("second_line").style.transformOrigin = "bottom";
document.getElementById("minute_line").style.transformOrigin = "bottom";
document.getElementById("hour_line").style.transformOrigin = "bottom";
//獲取秒數
seconds = new Date().getSeconds();
//獲取分鐘數,如果seconds=30,相當於分針轉了(30/60)分鐘
minutes = new Date().getMinutes() + seconds / 60;
//獲取小時數,同理可得
hours = new Date().getHours() + minutes / 60;
//計時器
setInterval(init, 1000);
//初始化
function init() {
  hours = hours + 1 / 3600;
  minutes = minutes + 1 / 60;
  seconds++;
  document.getElementById("second_line").style.transform = "rotate(" + 6 * seconds + "deg)";
  document.getElementById("minute_line").style.transform = "rotate(" + 6 * minutes + "deg)";
  document.getElementById("hour_line").style.transform = "rotate(" + 30 * hours + "deg)";
}
init();  
</script>
</html>

相關文章