精简图像的背景位置在IE中不能用于倒计时时钟

时间:2013-11-08 04:22:12

标签: javascript jquery

我有一个很棒的倒计时钟,它在Chrome中运行良好但在IE中根本不起作用。感谢Stack溢出用户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);

这是小提琴 http://jsfiddle.net/qLTE2/7/

1 个答案:

答案 0 :(得分:0)

你能试试吗,IE中不支持Reason是dateformat,我已经在IE8中测试了。工作正常。var fut = new Date(Date.UTC(2013, 12, 19, 21, 15, 0)); //改变格式,即日期格式应为 - new Date(year, month [, day, hour, minute, second, millisecond]);

参考:关于日期的链接: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/