<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字时钟</title> <style type="text/css"> *{ margin: 0;padding: 0; } html,body{ font-family: "Microsoft YaHei UI"; } a{ text-decoration: none; } span,em,b,i{ font-style: normal; } li{ list-style: none; } html,body{ font-size: 62.5%; background: #000; } .clock{ width: 700px;height: 700px;margin: 0 auto;position: relative;z-index: 6;padding-top: 50px; } .second{ width: 502px;height: 502px;position: absolute;left: 20px;top: 20px; border-radius: 100%; } .second ul{ width: 500px;height: 500px;position: relative;z-index: 8; border-radius: 100%;overflow: hidden; background: #293C55; /*transform: rotate(6deg);*/ } .second ul li,.minute ul li,.hour ul li{ height: 60px;position: absolute;z-index: 9;width: 16px;text-align: center;display: table; /*background: #273341;*/padding: 0 2px; transform-origin: 10px 0; } .second ul li span,.minute ul li span,.hour ul li span{ display: table-cell;vertical-align: middle;width: 100%;height: 100%;font-size: 10px;color: #fff; } .minute{ width: 380px;height:380px;position: absolute;left: 80px;top: 80px;z-index: 14;border-radius: 100%; transform: rotate(6deg); background: #273341; } .hour{ width: 260px;height:260px;position: absolute;left: 140px;top: 140px;z-index: 14;border-radius: 100%; background: #62778d; } .day{ width: 140px;height: 140px;position: absolute;left: 200px;top: 200px;z-index: 14;border-radius: 100%; background: #293C55; } .showRod{ width: 20px;height: 250px;position: absolute;left: 240px;top: 0;z-index: 93; background: rgba(255,255,255,0.5);border-bottom-left-radius: 10px;border-bottom-right-radius: 10px; } .needle{ width: 360px;height: 360px;border-radius: 100%;overflow: hidden;position: absolute; top: 70px;left: 70px;z-index: 12; } </style> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> // VERSION: 2.3 LAST UPDATE: 11.07.2013 /* * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.PHP * * Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009 * Website: http://code.google.com/p/jqueryrotate/ */ (function(k){for(var d,f,l=document.getElementsByTagName("head")[0].style,h=["transformProperty","WebkitTransform","OTransform","msTransform","MozTransform"],g=0;g<h.length;g++)void 0!==l[h[g]]&&(d=h[g]);d&&(f=d.replace(/[tT]ransform/,"TransformOrigin"),"T"==f[0]&&(f[0]="t"));eval('IE = "v"=="\v"');jQuery.fn.extend({rotate:function(a){if(0!==this.length&&"undefined"!=typeof a){"number"==typeof a&&(a={angle:a});for(var b=[],c=0,d=this.length;c<d;c++){var e=this.get(c);if(e.Wilq32&&e.Wilq32.PhotoEffect)e.Wilq32.PhotoEffect._handleRotation(a); else{var f=k.extend(!0,{},a),e=(new Wilq32.PhotoEffect(e,f))._rootObj;b.push(k(e))}}return b}},getRotateAngle:function(){for(var a=[],b=0,c=this.length;b<c;b++){var d=this.get(b);d.Wilq32&&d.Wilq32.PhotoEffect&&(a[b]=d.Wilq32.PhotoEffect._angle)}return a},stopRotate:function(){for(var a=0,b=this.length;a<b;a++){var c=this.get(a);c.Wilq32&&c.Wilq32.PhotoEffect&&clearTimeout(c.Wilq32.PhotoEffect._timer)}}});Wilq32=window.Wilq32||{};Wilq32.PhotoEffect=function(){return d?function(a,b){a.Wilq32={PhotoEffect:this}; this._img=this._rootObj=this._eventObj=a;this._handleRotation(b)}:function(a,b){this._img=a;this._onLoadDelegate=[b];this._rootObj=document.createElement("span");this._rootObj.style.display="inline-block";this._rootObj.Wilq32={PhotoEffect:this};a.parentNode.insertBefore(this._rootObj,a);if(a.complete)this._Loader();else{var c=this;jQuery(this._img).bind("load",function(){c._Loader()})}}}();Wilq32.PhotoEffect.prototype={_setupParameters:function(a){this._parameters=this._parameters||{};"number"!== typeof this._angle&&(this._angle=0);"number"===typeof a.angle&&(this._angle=a.angle);this._parameters.animateTo="number"===typeof a.animateTo?a.animateTo:this._angle;this._parameters.step=a.step||this._parameters.step||null;this._parameters.easing=a.easing||this._parameters.easing||this._defaultEasing;this._parameters.duration=a.duration||this._parameters.duration||1E3;this._parameters.callback=a.callback||this._parameters.callback||this._emptyFunction;this._parameters.center=a.center||this._parameters.center|| ["50%","50%"];this._rotationCenterX="string"==typeof this._parameters.center[0]?parseInt(this._parameters.center[0],10)/100*this._imgWidth*this._aspectW:this._parameters.center[0];this._rotationCenterY="string"==typeof this._parameters.center[1]?parseInt(this._parameters.center[1],10)/100*this._imgHeight*this._aspectH:this._parameters.center[1];a.bind&&a.bind!=this._parameters.bind&&this._BindEvents(a.bind)},_emptyFunction:function(){},_defaultEasing:function(a,b,c,d,e){return-d*((b=b/e-1)*b*b*b- 1)+c},_handleRotation:function(a,b){d||this._img.complete||b?(this._setupParameters(a),this._angle==this._parameters.animateTo?this._rotate(this._angle):this._animateStart()):this._onLoadDelegate.push(a)},_BindEvents:function(a){if(a&&this._eventObj){if(this._parameters.bind){var b=this._parameters.bind,c;for(c in b)b.hasOwnProperty(c)&&jQuery(this._eventObj).unbind(c,b[c])}this._parameters.bind=a;for(c in a)a.hasOwnProperty(c)&&jQuery(this._eventObj).bind(c,a[c])}},_Loader:function(){return IE?function(){var a= this._img.width,b=this._img.height;this._imgWidth=a;this._imgHeight=b;this._img.parentNode.removeChild(this._img);this._vimage=this.createVMLNode("image");this._vimage.src=this._img.src;this._vimage.style.height=b+"px";this._vimage.style.width=a+"px";this._vimage.style.position="absolute";this._vimage.style.top="0px";this._vimage.style.left="0px";this._aspectW=this._aspectH=1;this._container=this.createVMLNode("group");this._container.style.width=a;this._container.style.height=b;this._container.style.position= "absolute";this._container.style.top="0px";this._container.style.left="0px";this._container.setAttribute("coordsize",a-1+","+(b-1));this._container.appendChild(this._vimage);this._rootObj.appendChild(this._container);this._rootObj.style.position="relative";this._rootObj.style.width=a+"px";this._rootObj.style.height=b+"px";this._rootObj.setAttribute("id",this._img.getAttribute("id"));this._rootObj.className=this._img.className;for(this._eventObj=this._rootObj;a=this._onLoadDelegate.shift();)this._handleRotation(a, !0)}:function(){this._rootObj.setAttribute("id",this._img.getAttribute("id"));this._rootObj.className=this._img.className;this._imgWidth=this._img.naturalWidth;this._imgHeight=this._img.naturalHeight;var a=Math.sqrt(this._imgHeight*this._imgHeight+this._imgWidth*this._imgWidth);this._width=3*a;this._height=3*a;this._aspectW=this._img.offsetWidth/this._img.naturalWidth;this._aspectH=this._img.offsetHeight/this._img.naturalHeight;this._img.parentNode.removeChild(this._img);this._canvas=document.createElement("canvas"); this._canvas.setAttribute("width",this._width);this._canvas.style.position="relative";this._canvas.style.left=-this._img.height*this._aspectW+"px";this._canvas.style.top=-this._img.width*this._aspectH+"px";this._canvas.Wilq32=this._rootObj.Wilq32;this._rootObj.appendChild(this._canvas);this._rootObj.style.width=this._img.width*this._aspectW+"px";this._rootObj.style.height=this._img.height*this._aspectH+"px";this._eventObj=this._canvas;for(this._cnv=this._canvas.getContext("2d");a=this._onLoadDelegate.shift();)this._handleRotation(a, !0)}}(),_animateStart:function(){this._timer&&clearTimeout(this._timer);this._animateStartTime=+new Date;this._animateStartAngle=this._angle;this._animate()},_animate:function(){var a=+new Date,b=a-this._animateStartTime>this._parameters.duration;if(b&&!this._parameters.animatedGif)clearTimeout(this._timer);else{if(this._canvas||this._vimage||this._img)a=this._parameters.easing(0,a-this._animateStartTime,this._animateStartAngle,this._parameters.animateTo-this._animateStartAngle,this._parameters.duration), this._rotate(~~(10*a)/10);this._parameters.step&&this._parameters.step(this._angle);var c=this;this._timer=setTimeout(function(){c._animate.call(c)},10)}this._parameters.callback&&b&&(this._angle=this._parameters.animateTo,this._rotate(this._angle),this._parameters.callback.call(this._rootObj))},_rotate:function(){var a=Math.PI/180;return IE?function(a){this._angle=a;this._container.style.rotation=a%360+"deg";this._vimage.style.top=-(this._rotationCenterY-this._imgHeight/2)+"px";this._vimage.style.left= -(this._rotationCenterX-this._imgWidth/2)+"px";this._container.style.top=this._rotationCenterY-this._imgHeight/2+"px";this._container.style.left=this._rotationCenterX-this._imgWidth/2+"px"}:d?function(a){this._angle=a;this._img.style[d]="rotate("+a%360+"deg)";this._img.style[f]=this._parameters.center.join(" ")}:function(b){this._angle=b;b=b%360*a;this._canvas.width=this._width;this._canvas.height=this._height;this._cnv.translate(this._imgWidth*this._aspectW,this._imgHeight*this._aspectH);this._cnv.translate(this._rotationCenterX, this._rotationCenterY);this._cnv.rotate(b);this._cnv.translate(-this._rotationCenterX,-this._rotationCenterY);this._cnv.scale(this._aspectW,this._aspectH);this._cnv.drawImage(this._img,0,0)}}()};IE&&(Wilq32.PhotoEffect.prototype.createVMLNode=function(){document.createStyleSheet().addRule(".rvml","behavior:url(#default#VML)");try{return!document.namespaces.rvml&&document.namespaces.add("rvml","urn:schemas-microsoft-com:vml"),function(a){return document.createElement("<rvml:"+a+' class="rvml">')}}catch(a){return function(a){return document.createElement("<"+ a+' xmlns="urn:schemas-microsoft.com:vml" class="rvml">')}}}())})(jQuery); </script> <script type="text/javascript"> let chnNumChar = ["零","一","二","三","四","五","六","七","八","九"]; let chnUnitSection = ["","万","亿","万亿","亿亿"]; let chnUnitChar = ["","十","百","千"]; function SectionToChinese(section){ let strIns = '', chnStr = ''; let unitPos = 0; let zero = true; while(section > 0){ let v = section % 10; if(v === 0){ if(!zero){ zero = true; chnStr = chnNumChar[v] + chnStr; } }else{ zero = false; strIns = chnNumChar[v]; strIns += chnUnitChar[unitPos]; chnStr = strIns + chnStr; } unitPos++; section = Math.floor(section / 10); } return chnStr; } function NumberToChinese(num){ let unitPos = 0; let strIns = '', chnStr = ''; let needZero = false; if(num === 0){ return chnNumChar[0]; } while(num > 0){ let section = num % 10000; if(needZero){ chnStr = chnNumChar[0] + chnStr; } strIns = SectionToChinese(section); strIns += (section !== 0) ? chnUnitSection[unitPos] : chnUnitSection[0]; chnStr = strIns + chnStr; needZero = (section < 1000) && (section > 0); num = Math.floor(num / 10000); unitPos++; } return chnStr; } </script> <script type="text/javascript"> let myDate=new Date,hours=myDate.getHours(),minutes=myDate.getMinutes(),seconds=myDate.getSeconds(),secondStep=-6*seconds;function rotateSecond(){setInterval(showDegSecond,1e3)}function secondHtml(){let e="";for(let t=0;t<60;t++)e+="<li><span>"+NumberToChinese(t)+"</span></li>";$(".second ul").html(e);for(let e=0;e<60;e++){if($(".second ul li").eq(e).css("transform","rotate("+6*e+"deg)"),30!=e){let t=Number(250*Math.sin(2*Math.PI/60*e)),s=Number(250*Math.cos(2*Math.PI/60*e));$(".second ul li").eq(e).css({left:240+t+"px",top:250-s+"px"})}else if(30==e){let t=Number(250*Math.sin(2*Math.PI/60*e)),s=Number(250*Math.cos(2*Math.PI/60*e));$(".second ul li").eq(e).css({left:240+t+"px",bottom:250+s-60+"px"})}$(".second ul").css("transform","rotate("+-6*seconds+"deg)")}minuteHtml()}function minuteHtml(){let e="";for(let t=59;t>=0;t--)e+="<li><span>"+NumberToChinese(t)+"</span></li>";$(".minute ul").html(e);for(let e=0;e<60;e++){if($(".minute ul li").eq(e).css("transform","rotate("+6*e+"deg)"),30!=e){let t=Number(190*Math.sin(2*Math.PI/60*e)),s=Number(190*Math.cos(2*Math.PI/60*e));$(".minute ul li").eq(e).css({left:180+t+"px",top:190-s+"px"})}else if(30==e){let t=Number(190*Math.sin(2*Math.PI/60*e)),s=Number(190*Math.cos(2*Math.PI/60*e));$(".minute ul li").eq(e).css({left:180+t+"px",bottom:190+s-60+"px"})}$(".minute").css("transform","rotate("+-6*(59-minutes)+"deg)")}hourHtml()}function hourHtml(){let e="";for(let t=0;t<12;t++)e+="<li><span>"+NumberToChinese(t)+"时</span></li>";$(".hour ul").html(e);for(let e=0;e<12;e++){if($(".hour ul li").eq(e).css("transform","rotate("+30*e+"deg)"),6!=e){let t=Number(130*Math.sin(2*Math.PI/12*e)),s=Number(130*Math.cos(2*Math.PI/12*e));$(".hour ul li").eq(e).css({left:120+t+"px",top:130-s+"px"})}else if(6==e){let t=Number(130*Math.sin(2*Math.PI/12*e)),s=Number(130*Math.cos(2*Math.PI/12*e));$(".hour ul li").eq(e).css({left:120+t+"px",bottom:130+s-60+"px"})}$(".hour").css("transform","rotate("+30*(12-hours)+"deg)")}rotateSecond()}function showDegSecond(){let e=(secondStep-=6)-6;seconds++,$(".second ul").rotate({animateTo:e,duration:1e3}),-secondStep%360==0&&(minutes++,$(".minute").rotate({animateTo:-6*(60-minutes%60)+6,duration:1e3}),minutes%60==0&&(hours++,$(".hour").css("transform","rotate("+30*(12-hours)+"deg)")))} </script> </head> <body> <div class="clock"> <div class="second"> <ul></ul> <div class="showRod"></div> <div class="needle"></div> </div> <div class="minute"> <ul></ul> </div> <div class="hour"> <ul></ul> </div> <div class="day"></div> </div> <script> window.onload = function(){ secondHtml(); } </script> </body> </html> 提示:你可以先修改部分代码再运行。 转载请注明:有爱前端 » 文字时钟 喜欢 (0)or分享 (0)