http://home.comcast.net/~vonholdt/test/clock/index.htm
当右侧的数字(显示秒数)通过7时,所有其他数字翻转到其后续数字,直到3秒(我的意思是直到右侧第二个数字到达0)。 这只发生在IE 8中。
JS:
<script type="text/javascript">
$(document).ready(function(){
$('#wrap').animate({opacity: 0.0}, 0);
function middle(){
wrapTop = ($(window).height() - $('#wrap').height())/2;
wrapLeft = ($(window).width() - $('#wrap').width())/2;
$('#wrap').animate({marginTop: wrapTop, marginLeft: wrapLeft}, 500);
};
middle();
$(window).bind('resize', middle);
function checktime(prevhour,prevmins,prevsecs){
var now = new Date();
var hour = now.getHours();
if(hour < 10) hour = "0" + hour;
var mins = now.getMinutes();
if(mins < 10) mins = "0" + mins;
var secs = now.getSeconds();
if(secs < 10) secs = "0" + secs;
var hour = hour + "";
var mins = mins + "";
var secs = secs + "";
if(prevhour != hour) {
var prevhour = prevhour + ""
var hoursplit = hour.split("");
var prevhoursplit = prevhour.split("");
if(prevhoursplit[0] != hoursplit[0]) numberflip('#hourl',hoursplit[0]);
if(prevhoursplit[1] != hoursplit[1]) numberflip('#hourr',hoursplit[1]);
};
if(prevmins != mins) {
var prevmins = prevmins + ""
var minsplit = mins.split("");
var prevminsplit = prevmins.split("");
if(prevminsplit[0] != minsplit[0]) numberflip('#minl',minsplit[0]);
if(prevminsplit[1] != minsplit[1]) numberflip('#minr',minsplit[1]);
};
if(prevsecs != secs) {
var prevsecs = prevsecs + ""
var secsplit = secs.split("");
var prevsecsplit = prevsecs.split("");
if(prevsecsplit[0] != secsplit[0]) numberflip('#secl',secsplit[0]);
if(prevsecsplit[1] != secsplit[1]) numberflip('#secr',secsplit[1]);
};
function numberflip(which,number){
if(number != 0) $(which).animate({marginTop: '-'+parseInt((number*140),10)+'px'}, 250, 'linear');
if(number == 0) {
var getmargin = parseInt(($(which).css('margin-top')), 10);
$(which).animate({marginTop: parseInt((getmargin-140),10)+'px'}, 250, 'linear', function(){
$(this).css("margin-top","0px")
});
};
};
setTimeout(function(){checktime(hour,mins,secs);}, 200);
};
checktime(00,00,00);
$('#wrap').animate({opacity: 1.0}, 1000);
});
</script>
HTML:
<div id="wrap">
<img id="hourl" class="time" src="nums2.png" />
<img id="hourr" class="time" src="nums10.png" />
<img class="time" src="colon.png" />
<img id="minl" class="time" src="nums6.png" />
<img id="minr" class="time" src="nums10.png" />
<img class="time" src="colon.png" />
<img id="secl" class="time" src="nums6.png" />
<img id="secr" class="time" src="nums10.png" />
<div style="clear:left;"> </div>
<div id="cover"> </div>
</div>