javascript - Sprite 图像的背景位置在 IE 中无法用于倒计时时钟

Question

我有一个非常棒的倒计时时钟，它在 Chrome 中运行良好，但在 IE 中根本不起作用。感谢 Stack Overflow 用户 Roko 帮助我整理了该项目。有人知道如何在 IE 上实现此功能吗？

这是 JS

var fut = new Date("Dec 19 2013 21:15:00 UTC-05:00")
    obj = {};

// Number splitter
function intSpl( i ){
  i = Math.floor(i);
  return [~~(i/10), i%10];  
}

function drawTime(){  
  var now = new Date().getTime(),   
      dif = now<fut ? Math.floor( (fut-now)/1000) : 0;
  obj.s = intSpl(dif % 60);
  obj.m = intSpl(dif/60 % 60);
  obj.h = intSpl(dif/60/60 % 24);
  obj.d = intSpl(dif/60/60/24);  

  for(var key in obj){    
     if(obj.hasOwnProperty(key)){
        for(var i=0; i<2; i++){ 
            $('#'+ key+i).css({backgroundPosition: -obj[key][i]*50 });
        }
     }    
  }  
}
drawTime(); 
setInterval(drawTime, 1000);

这是 fiddle http://jsfiddle.net/qLTE2/7/

Answer 1

你能试试这个吗，原因是IE不支持dateformat，我在IE8中测试过。它工作正常。 var fut = new Date(Date.UTC(2013, 12, 19, 21, 15, 0));//更改格式，即日期格式应该是 - new Date(年、月[、日、时、分、秒、毫秒]);

引用:有关日期的链接:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FDate

//var fut = new Date("Dec 19 2013 21:15:00 UTC-05:00");

var fut = new Date(Date.UTC(2013, 12, 12, 21, 15, 0)); //format - new Date(year, month [, day, hour, minute, second, millisecond]);
obj = {};

//Number splitter
function intSpl( i ){
    i = Math.floor(i);
    return [~~(i/10), i%10];  
}




function drawTime(){  
    var now = new Date().getTime(); 

    var  dif = now<fut ? Math.floor( (fut-now)/1000) : 0;

    console.log("fut::"+fut +":::now"+now); // fut is NaN thats why it is not working

    obj.s = intSpl(dif % 60);
    obj.m = intSpl(dif/60 % 60);
    obj.h = intSpl(dif/60/60 % 24);
    obj.d = intSpl(dif/60/60/24);  


        for(var key in obj){    
              if(obj.hasOwnProperty(key)){
                 for(var i=0; i<2; i++){ 
                     $('#'+ key+i).css({backgroundPosition: -obj[key][i]*50 });       

                     console.log(key+":::"+i+':::PX set'+ -obj[key][i]*50);
                 }
              }    
        }  
    }

    drawTime(); 
    setInterval(drawTime, 1000);

CSS:

    #clock span{
      display:inline-block;
      width:50px;
      height:85px;
      background-image:url('time.jpg');
      background-position:0 0;
      /*background-color: #ffff00;*/ //added for testing
    }

演示:http://jsfiddle.net/qLTE2/8/