HTML5仿Apple Watch时钟动画DEMO演示源码
程序员文章站
2022-03-01 15:01:20
...
该款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