HTML5仿Apple Watch时钟动画DEMO演示源码
2014-10-20 09:40:25  By: shinyuu

• shinyuu
• JQuery教程
• 1
• 8216
• 1

该款HTML5时钟是仿Apple Watch界面模拟出来的、可以根据本地时间实时更新指针数据

其华丽的界面却有苹果的风格、本例子完全通过CSS实现的、没有使用任何图片

动画是利用jQuery来实现的、有图有真像、先来看看程序的运行效果吧

HTML代码

<div class="fill">
  <div class="reference"></div>
  <div class="clock" id="utility-clock">
    <div class="centre">
      <div class="dynamic"></div>
      <div class="expand round circle-1"></div>
      <div class="anchor hour">
        <div class="element thin-hand"></div>
        <div class="element fat-hand"></div>
      </div>
      <div class="anchor minute">
        <div class="element thin-hand"></div>
        <div class="element fat-hand minute-hand"></div>
      </div>
      <div class="anchor second">
        <div class="element second-hand"></div>
      </div>
      <div class="expand round circle-2"></div>
      <div class="expand round circle-3"></div>
    </div>
  </div>
</div>

jQuery代码

function utilityClock(container) {
    var dynamic = container.querySelector(´.dynamic´)
    var hourElement = container.querySelector(´.hour´)
    var minuteElement = container.querySelector(´.minute´)
    var secondElement = container.querySelector(´.second´)
    var minute = function(n) {
        return n % 5 == 0 ? minuteText(n) : minuteLine(n)
    }
    var minuteText = function(n) {
        var element = document.createElement(´div´)
        element.className = ´minute-text´
        element.innerHTML = (n < 10 ? ´0´ : ´´) + n
        position(element, n / 60, 135)
        dynamic.appendChild(element)
    }
    var minuteLine = function(n) {
        var anchor = document.createElement(´div´)
        anchor.className = ´anchor´
        var element = document.createElement(´div´)
        element.className = ´element minute-line´
        rotate(anchor, n)
        anchor.appendChild(element)
        dynamic.appendChild(anchor)
    }
    var hour = function(n) {
        var element = document.createElement(´div´)
        element.className = ´hour-text hour-´ + n
        element.innerHTML = n
        position(element, n / 12, 105)
        dynamic.appendChild(element)
    }
    var position = function(element, phase, r) {
        var theta = phase * 2 * Math.PI
        element.style.top = (-r * Math.cos(theta)).toFixed(1) + ´px´
        element.style.left = (r * Math.sin(theta)).toFixed(1) + ´px´
    }
    var rotate = function(element, second) {
        element.style.transform = element.style
			.webkitTransform = ´rotate(´ + (second * 6) + ´deg)´
    }
    var animate = function() {
        var now = new Date()
        var time = now.getHours() * 3600 +
                    now.getMinutes() * 60 +
                    now.getSeconds() * 1 +
                    now.getMilliseconds() / 1000
        rotate(secondElement, time)
        rotate(minuteElement, time / 60)
        rotate(hourElement, time / 60 / 12)
        requestAnimationFrame(animate)
    }
    for (var i = 1; i <= 60; i ++) minute(i)
    for (var i = 1; i <= 12; i ++) hour(i)
    animate()
}

最后给大家献上源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1i3Hw3kh 密码: fpj5

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛