clock.html · 開發者必備的知識

~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>鐘表</title> <style> .widget_custom_clock {position: relative;border:none;} .widget_clok {position: relative;padding:10px 0;} .widget_clok .fill {background-color: #fff;width:340px;height:340px;position: relative;border-radius: 50%;margin:0 auto;} .widget_clok .clock {position: absolute;opacity: 1;width:100%;height:340px;} .widget_clok .fill .clock {left: 0;top: 0;height:340px;} .widget_clok .centre {position: absolute;top: 50%;left: 50%;width: 0;height: 0;} .widget_clok .expand {position: absolute;top: 0;left: 0;transform: translate(-50%, -50%);} .widget_clok .anchor {position: absolute;top: 0;left: 0;width: 0;height: 0;} .widget_clok .element {position: absolute;top: 0;left: 0;} .widget_clok .round {border-radius: 296px;} .widget_clok .circle-1 {background: #2e3c49;width: 12px;height: 12px;} .widget_clok .circle-2 {background: #FA9F22;width: 8px;height: 8px;} .widget_clok .circle-3 {background: black;width: 4px;height: 4px;} .widget_clok .second {transform: rotate(180deg);} .widget_clok .minute {transform: rotate(54deg);} .widget_clok .second-hand {width: 2px;height: 164px;background: #FA9F22;transform: translate(-50%,-100%) translateY(24px);} .widget_clok .hour {transform: rotate(304.5deg);} .widget_clok .thin-hand {width: 4px;height: 50px;background: #293642;transform: translate(-50%,-100%);} .widget_clok .fat-hand {width: 10px;height: 57px;border-radius: 10px;background: #293642;transform: translate(-50%,-100%) translateY(-18px);} .widget_clok .minute-hand {height: 112px;} .widget_clok .hour-text {position: absolute;font: 40px Hei, Helvetica, Arial, sans-serif;color: #293642;transform: translate(-50%,-50%);} .widget_clok .hour-10 {padding-left: 0.4ex;} .widget_clok .hour-11 {padding-left: 0.25ex;} .widget_clok .minute-text {position: absolute;font: 12px Avenir Next, Helvetica, Arial, sans-serif;color: #293642;transform: translate(-50%,-50%);} .widget_clok .minute-line {background: #293642;width: 1px;height: 9px;transform: translate(-50%,-100%) translateY(-131px);opacity: 0.34;} </style> </head> <body> <div class="widget widget_custom widget_custom_clock"> <div class="widget_custom_content widget_clok"> <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> </div> </div> <script type='text/javascript' src='https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js'></script> <script type='text/javascript'> window._info = { 'timer':0, }; /** * * @time:2016-8-2 14:08:12 */ $(function () { var clock = $('#utility-clock'); utilityClock(clock); function utilityClock(container) { //媯€嫻嬫槸鍚︽敮鎸乭tml5 涓嶆敮鎸佸垯remove鍏冪礌鍚巖eturn if(typeof requestAnimationFrame !=='function') { $('.widget_custom_clock').hide().remove(); return; } var dynamic = $(container).find('.dynamic').get(0); var hourElement = $(container).find('.hour').get(0); var minuteElement = $(container).find('.minute').get(0); var secondElement = $(container).find('.second').get(0); 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 isSetTimer = false; var _timer = new Date(); var bTimer = _timer.getTime(); var animate = function() { var now = new Date(); //澶勭悊Date瀵硅薄錛屼互鏈嶅姟鍣ㄦ椂闂翠負鍑? if(!isSetTimer && _info.timer) { isSetTimer = true; now.setTime(_info.timer); }else if(_info.timer) { var nowTimer = _info.timer + now.getTime() - bTimer; now.setTime(nowTimer); } // console.log(now.getTime()); 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(); } }); </script> </body> </html> ~~~