time.html

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>~~~</title></head><style>body{background:#333;padding:0;margin:0}.clock{overflow:hidden;float:left;-webkit-perspective:750pt;-ms-perspective:750pt;-o-perspective:750pt;perspective:750pt;-webkit-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d}.unit{float:left;margin:1pc;position:relative;height:129px;width:8pc;overflow:visible}.btm,.top{height:4pc;overflow:hidden}.btm,.top,.unit span{width:8pc;position:absolute}.unit span{font:6pc/8pc Tahoma,Geneva,sans-serif;text-align:center}.btm span{top:-4pc}.top{background:#ddd;border-bottom:1px solid #999;border-radius:10px 10px 0 0;top:0;-webkit-transform-origin:bottom;transform-origin:bottom}.btm{background:#eee;border-radius:0 0 10px 10px;top:65px;-webkit-transform-origin:top;transform-origin:top}.h{width:2in!important}.font{font-size:18px;color:#00f1ff;margin:1pc}</style><body><div class="font"></div><div id=time></div></body><script>var clkCls="clock",clkUnitCls="unit",clkTopCls="top",clkBtmCls="btm";function transform(d,a){try{d.style.WebkitTransform=a,d.style.MozTransform=a,d.style.msTransform=a,d.style.OTransform=a,d.style.transform=a}catch(f){}}document.getElementsByClassName('font')[0].innerHTML='\u8DDD\u79BB 2017-05-01 08:00:00 \u8FD8\u6709';var ClkUnit=function(d,a,f){var e=100<=d?1:0;this.update=function(){this.updateTxt();this.val>this.maxVal&&(this.setVal(this.minVal),this.period());this.val<this.minVal&&(this.setVal(this.maxVal),this.period())};this.incVal=function(){this.val++;this.update()};this.decVal=function(){this.val--;this.update()};this.updateTxt=function(){this.text=9<this.val?this.val:"0"+this.val};this.setVal=function(b){this.val=b;this.updateTxt()};this.pane=document.createElement("div");this.pane.className=clkUnitCls+(e?" h":"");this.setVal(d);this.minVal=a;this.maxVal=f;this.topbak=document.createElement("div");this.topbak.txt=document.createElement("span");this.topbak.className=clkTopCls+(e?" h":"");this.topfnt=document.createElement("div");this.topfnt.txt=document.createElement("span");this.topfnt.className=clkTopCls+(e?" h":"");this.btmbak=document.createElement("div");this.btmbak.txt=document.createElement("span");this.btmbak.className=clkBtmCls+(e?" h":"");this.btmfnt=document.createElement("div");this.btmfnt.txt=document.createElement("span");this.btmfnt.className=clkBtmCls+(e?" h":"");this.pane.appendChild(this.topbak);this.topbak.appendChild(this.topbak.txt);this.pane.appendChild(this.topfnt);this.topfnt.appendChild(this.topfnt.txt);this.pane.appendChild(this.btmbak);this.btmbak.appendChild(this.btmbak.txt);this.pane.appendChild(this.btmfnt);this.btmfnt.appendChild(this.btmfnt.txt);this.mtx=!1;this.animateReset=function(){transform(this.btmfnt,"");transform(this.btmbak,"");this.btmfnt.txt.innerHTML=this.text;this.topbak.txt.innerHTML=this.text;this.topfnt.txt.innerHTML=this.text;this.btmbak.txt.innerHTML=this.text;transform(this.topfnt,"");transform(this.topbak,"")};this.period=null;this.turnDown=function(){var b=this;if(!this.mtx){this.decVal();var a=0,d=90;this.topbak.txt.innerHTML=this.text;transform(b.topfnt,"rotateX(0deg)");var e=setInterval(function(){transform(b.topfnt,"rotateX("+a+"deg)");a-=10;if(-90>=a){transform(b.topfnt,"rotateX(0deg)");b.topfnt.txt.innerHTML=b.text;transform(b.btmfnt,"rotateX(90deg)");b.btmfnt.txt.innerHTML=b.text;var f=setInterval(function(){0>=d&&(clearInterval(f),b.animateReset(),b.mtx=!1);transform(b.btmfnt,"rotateX("+d+"deg)");d-=10},30);clearInterval(e)}},30)}};this.animateReset()},Clock=function(d){this.pane=document.createElement("div");this.pane.className=clkCls;var a=parseInt(((new Date("2017/05/01 08:00:00")).getTime()-Date.now())/1E3),f=a%60,e=parseInt(a%3600/60),a=parseInt(a/3600);this.hour=new ClkUnit(a,0,999);this.munite=new ClkUnit(e,0,59);this.second=new ClkUnit(f,0,59);this.pane.appendChild(this.hour.pane);this.pane.appendChild(this.munite.pane);this.pane.appendChild(this.second.pane);d.appendChild(this.pane);var b=this;this.second.period=function(){b.munite.turnDown()};this.munite.period=function(){b.hour.turnDown()};this.timer=null;this.start=function(){this.timer=setInterval(function(){b.second.turnDown()},1E3)};this.pause=function(){clearInterval(this.timer)};this.start()},c=new Clock(document.getElementById("time"))</script></html>