Question

我用javascript，css。

制作了一个模拟风格的时钟

function updateClock() {
    var now = moment(),
        second = now.seconds() * 6, 
        minute = now.minutes() * 6, 
        hour = now.hours() % 12 / 12 * 360 + 90 + minute / 12;

    document.getElementById("hour").style.transform = 'rotate(' + hour + 'deg)';
    document.getElementById("minute").style.transform = 'rotate(' + minute + 'deg)';
}

function timedUpdate() {
    updateClock();
    setTimeout(timedUpdate, 1000);
}

timedUpdate();

我想添加一个结束效果，所以在页面加载时，时钟从12:00开始，动画/结束到当前时间（有点像这里的时钟：http://www.apple.com/uk/macbook-air/）

Here's the Fiddle

Answer 1

看起来你我们只是错过了CSS过渡。

-webkit-transtition: 0.5s all

旋转超过0.5秒。我已经用webkit前缀添加到你的小提琴中了：

https://jsfiddle.net/pw8bfjq2/1/

Answer 2

以下updateClock()方式更改JavaScript函数。我也加了秒。

您的分钟和小时数不合适。

function updateClock() {

  var now = moment(),
      second = now.seconds() * 6, 
      minute = now.minutes() * 6, 
      hour = now.hours() * 30;
console.log(hour);
  document.getElementById("hour").style.transform = 'rotate(' + hour + 'deg)';
  document.getElementById("minute").style.transform = 'rotate(' + minute + 'deg)';
  document.getElementById("second").style.transform = 'rotate(' + second + 'deg)';
}

function timedUpdate() {
  updateClock();
  setTimeout(timedUpdate, 1000);
}

timedUpdate();

body {
      background-color: #252525;
    }

    .clock{
      width: 180px;
      height: 180px;
      position: relative;
      border: 1px solid red;
      border-radius:50%
      

    }

    .hour{
      width: 0;
      height: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -4px 0 -4px -25%;
      padding: 4px 0 4px 25%;
      background: #fff;
      -webkit-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
      transform-origin: 100% 50%;
    }

    .minute{
      width: 0;
      height: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -40% -3px 0;
      padding: 40% 2px 0;
      background: #fff;
      -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
    }
    
    .second{
      width: 0;
      height: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -40% -3px 0;
      padding: 40% 1px 0;
      background: #fff;
      -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
  <div class="clock">
    <div id="hour" class="hour"></div>
    <div id="minute" class="minute"></div>
     <div id="second" class="second"></div>
  </div>

将时钟结束到当前时间

2 个答案: