为什么这个时钟脚本在 IE8 上失败?
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>
http://home.comcast.net/~vonholdt/test/clock/index.htm
when the number on the right side, which shows the seconds, passes 7 all the other numbers flip to their following number until for 3 seconds (I mean until the right second number arrives to 0).
this only occurs in 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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论