js 實現時間的翻牌效果
阿新 • • 發佈：2018-12-22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> </head> <body style="background:#333; padding:0; margin:0; "> </body> </html> <style>.clock { overflow:hidden; float:left; -webkit-perspective:1000px; -moz-perspective:1000px; -ms-perspective:1000px; -o-perspective:1000px; perspective:1000px; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d;} .unit { float:left; margin:16px; position:relative; height:129px; width:128px; overflow:visible; } .top, .btm { height:64px; width:128px; overflow:hidden; position:absolute; } .unit span { font:96px/128px Tahoma, Geneva, sans-serif; width:128px; text-align:center; position:absolute; } .btm span { top:-64px; } .top { background:#ddd; border-bottom:1px solid #999; border-radius:10px 10px 0 0; top:0; -webkit-transform-origin:bottom; -ms-transform-origin:bottom; -moz-transform-origin:bottom; -o-transform-origin:bottom; transform-origin:bottom; } .btm {background:#eee; border-radius:0 0 10px 10px; top:65px; -webkit-transform-origin:top; -ms-transform-origin:top; -moz-transform-origin:top; -o-transform-origin:top; transform-origin:top;}</style> <script>var clkCls = "clock"; var clkUnitCls = "unit"; var clkTopCls = "top"; var clkBtmCls = "btm"; function transform(obj,tran) { try{ obj.style.WebkitTransform = tran; obj.style.MozTransform = tran; obj.style.msTransform = tran; obj.style.OTransform = tran; obj.style.transform = tran; }catch (e){ } } var ClkUnit = function(val, minVal, maxVal){ this.update = function() { this.updateTxt(); if(this.val>this.maxVal) { this.setVal(this.minVal); this.period(); } if(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() { if(this.val>9) this.text = this.val; else this.text = "0"+this.val; } this.setVal = function(v) { this.val = v; this.updateTxt(); } this.pane = document.createElement("div"); this.pane.className = clkUnitCls; this.setVal(val); this.minVal = minVal; this.maxVal = maxVal; this.topbak = document.createElement("div");this.topbak.txt = document.createElement("span");this.topbak.className = clkTopCls; this.topfnt = document.createElement("div");this.topfnt.txt = document.createElement("span");this.topfnt.className = clkTopCls; this.btmbak = document.createElement("div");this.btmbak.txt = document.createElement("span");this.btmbak.className = clkBtmCls; this.btmfnt = document.createElement("div");this.btmfnt.txt = document.createElement("span");this.btmfnt.className = clkBtmCls; 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 = false; 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 u = this; if(this.mtx) return; //this.mtx = true; this.incVal(); var topDeg = 0;var btmDeg = 90; this.topbak.txt.innerHTML=this.text; transform(u.topfnt,"rotateX(0deg)"); var timer1 = setInterval(function(){ transform(u.topfnt,"rotateX("+topDeg+"deg)"); topDeg-=10; if(topDeg<=-90){ transform(u.topfnt,"rotateX(0deg)"); u.topfnt.txt.innerHTML=u.text; transform(u.btmfnt,"rotateX(90deg)"); u.btmfnt.txt.innerHTML=u.text; var timer2 = setInterval(function(){ if(btmDeg<=0) { clearInterval(timer2);u.animateReset(); u.mtx=false; } transform(u.btmfnt,"rotateX("+btmDeg+"deg)"); btmDeg-=10;},30); clearInterval(timer1); }},30); } this.animateReset(); } var Clock = function(prt){ this.pane = document.createElement("div"); this.pane.className = clkCls; var d = new Date(); this.hour = new ClkUnit(d.getHours(), 0, 23); this.munite = new ClkUnit(d.getMinutes(), 0, 59); this.second = new ClkUnit(d.getSeconds(), 0, 59); this.pane.appendChild(this.hour.pane); this.pane.appendChild(this.munite.pane); this.pane.appendChild(this.second.pane); prt.appendChild(this.pane); var clock = this; this.second.period = function() { clock.munite.turnDown(); } this.munite.period = function() { clock.hour.turnDown(); } this.timer = null; this.start = function(){ this.timer = setInterval(function(){clock.second.turnDown();},1000); } this.pause = function(){ clearInterval(this.timer); } this.start(); } var c = new Clock(document.body);</script> <!-- Generated by RunJS (Tue Dec 30 09:49:07 CST 2014) 1ms -->
<img src="https://img-blog.csdn.net/20141230094600674?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva29vYmVlXzE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="效果圖" />