js练习简易时钟

创建一个简易时间

HTML:

 <div class="time">
    <span class="time_link hour"></span>
    <span class="time_link hour"></span>
    <span class="time_link">:</span>
    <span class="time_link minuse"></span>
    <span class="time_link minuse"></span>
    <span class="time_link">:</span>
    <span class="time_link second"></span>
    <span class="time_link second"></span>
  </div>

css:

<style type="text/css">
      .time {
        margin: 50px auto;
      }
      .time_link {
        display: inline-block;
        border: 2px solid black;
        background-color: palevioletred;
        color: aliceblue;
        font-size: 20px;
        padding: 10px;
      }
  </style>

JS:

// 定义函数获取时分秒
var hour_marks = document.querySelectorAll('.hour');
var minute_marks = document.querySelectorAll('.minute');
var second_marks = document.querySelectorAll('.second');
function getDateTime () {
    var date = new Date();
    var hour = date.getHours();
    var miniute = date.getMinutes();
    var second = date.getSeconds();

    hour_marks[0].innerHTML = parseInt(hour / 10);
    hour_marks[1].innerHTML = hour % 10;

    minute_marks[0].innerHTML = parseInt(miniute / 10);
    minute_marks[1].innerHTML = miniute % 10;

    second_marks[0].innerHTML = parseInt(second / 10);
    second_marks[1].innerHTML = second % 10;
}
getDateTime();
var timer = setInterval(function () {
    getDateTime();
}, 1000);

创建一个简易时钟

html:

 <div class="clock">
      <div class="orgin_link"></div>
      <div class="hour_link"></div>
      <div class="minus_link"></div>
      <div class="second_link"></div>
    </div>

CSS:

 html {
        background-color: #f2f2f2;
      }
      .clock {
        margin: 50px auto;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        position: relative;
        background-image: url(表盘.jpeg);
        background-position: center;
        background-size: 100%;
      }

      .hour_link {
        width: 10px;
        height: 125px;
        background: black;
        position: absolute;
        transform-origin: center bottom;
        position: absolute;
        left: 250px;
        top: 122px;
         /* 设置旋转元素的基点位置 */
        transform-origin: bottom;
      }
      .minus_link {
        width: 8px;
        height: 135px;
        background: black;
        position: absolute;
        left: 247px;
        top: 114px;
        transform-origin: bottom;
      }
      .second_link {
        width: 5px;
        height: 145px;
        background: black;
        position: absolute;
        left: 250px;
        top: 107px;
        transform-origin: bottom;
      }
      .orgin_link {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 4px solid black;
        background-color: black;
        position: absolute;
        left: 238px;
        top: 238px;
      }
      .hour_link,
      .minus_link,
      .second_link {
        border-radius: 50%;
      }

js:

var hour = document.querySelector('.hour_link');
var minus = document.querySelector('.minus_link');
var second = document.querySelector('.second_link');
function moveTime () {
  var date = new Date();
  var h = date.getHours();
  var m = date.getMinutes();
  var s = date.getSeconds();
  //创建两个新的变量用来接收小时和分钟
  var h_run = 0; var m_run = 0;
  m_run = (m * 6) + (s / 10);
  h_run = h * 30 + m * 0.5 + s * (30 / 3600);
  second.style.transform = "rotate(" + s * 6 + "deg)";
  minus.style.transform = "rotate(" + m_run + "deg)";
  hour.style.transform = "rotate(" + h_run + "deg)";
}
moveTime();
var timer = setInterval(function () {
  moveTime();
}, 1000)