为什么这个时钟脚本在 IE8 上失败?

发布于 2024-11-08 14:15:52 字数 3302 浏览 0 评论 0原文

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文