欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  技术分享

HTML5仿Apple Watch时钟动画DEMO演示源码

程序员文章站 2022-03-01 15:01:20
...

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

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

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

HTML5仿Apple Watch时钟动画DEMO演示源码

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