精灵图像的背景位置在 IE 中不起作用，用于倒计时时钟

background position for a sprite image not working in IE for a count down clock

本文关键字：不起作用 用于 倒计时 时钟 IE 图像 背景 位置 精灵      更新时间：2023-09-26

>我有一个很棒的倒计时时钟，它在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/

你能试试这个吗，原因是 IE 不支持日期格式，我已经在 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/

相关文章：