<!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="效果图" />