为什么偏置开关盒不'；不使用JavaScript吗？

我正在用JavaScript中的Sprite技术创建一个数字时钟，除了开关盒必须替换每个边框中的图像位置，

div

s，关于时钟的

char

的整数是多少，但它仍然停留在默认位置

有人能帮我解决这个问题吗

//提示用户界面
设cityar=[]；
让cityCount=prompt（“请输入城市计数：”）；
对于（设i=0；i

标题

您需要直接将

image.offsetLeft

设置为

0+“px”

等值，而不是变量

left

而不是使用图像偏移，您可以使用

image.style.objectPosition

。 我加了一个样品
此外，我将setTimeout从字符串调用更改为实际的函数调用

// prompt UI
let cityArr = [] ;
let cityCount = prompt("Please enter city count :") ;

for (let i = 0 ; i < cityCount*2 ; i+=2) {
    cityArr[i] = prompt("Please enter city name :") ;
    cityArr[i+1] = prompt("Please enter city UTC time difference :") ;
}


// addTime function
function addTime() {
    for (let i = 0 ; i < cityArr.length ; i+=2) {

        addDiv(cityArr[i]) ;
        addDivTime(cityArr[i+1] , cityArr[i]) ;
    }
}


// addDiv function
function addDiv(idBashe) {
    let City = document.createElement("DIV") ;
    City.id = idBashe ;
    City.style.display = "flex" ;
    document.getElementById("wrapper").appendChild(City) ;
}


// addDivTime function
function addDivTime(diffM , id) {

    let time = new Date() ;
    let UTCHour = time.getUTCHours() ;
    let UTCMin = time.getUTCMinutes() ;

    time.setHours(UTCHour, UTCMin + diffM) ;

    setTimeout(function() { addDivTime(diffM,id); } , 1000) ;

    document.getElementById(id).innerHTML = "" ;

    let strTime  = needZero(time.getHours()) + " : " + needZero(time.getMinutes()) + " : " + needZero(time.getSeconds()) ;

    for (let i = 0 ; i < strTime.length ; i++) {

        let char = strTime.substr(i , 1) ;

        if (char != ":" && char != " "){

            let imageOuter;


                imageOuter = document.createElement("div") ;

                imageOuter.classList.add(i) ;

                imageOuter.style.width = "61px" ;

                imageOuter.style.height = "100px" ;

                imageOuter.style.border = "1px solid black" ;

                imageOuter.style.display = "flex" ;

                imageOuter.style.position = "relative" ;

                imageOuter.style.overflow = "hidden" ;

                document.getElementById(id).appendChild(imageOuter) ;

                //--------------------------------

                let image = document.createElement("IMG") ;

                image.src = "https://i.stack.imgur.com/EAU1S.png" ;

                image.style.position = "absolute" ;

                imageOuter.appendChild(image) ;


                let left = 0;
                let top = 0;

                switch (char) {
                    case "0" :
                        left = 0 + "px";
                        top = 0 + "px" ;
                        break;

                    case "1" :
                        left = -61 + "px" ;
                        top = 0 + "px" ;
                        break;

                    case "2" :
                        left = -122 + "px" ;
                        top = 0 + "px" ;
                        break;

                    case "3" :
                        left = -183 + "px" ;
                        top = 0 + "px" ;
                        break;

                    case "4" :
                        left = -244 + "px" ;
                        top = 0 + "px" ;
                        break;

                    case "5" :
                        left = 0 + "px" ;
                        top = -100 + "px" ;
                        break;
                    case "6" :
                        left = -61 + "px" ;
                        top = -100 + "px" ;
                        break;

                    case "7" :
                        left = -122 + "px" ;
                        top = -100 + "px" ;
                        break;

                    case "8" :
                        left = -183 + "px" ;
                        top = -100 + "px" ;
                        break;

                    case "9" :
                        left = -244 + "px" ;
                        top = -100 + "px" ;
                        break;
                }
                image.style.objectPosition = left + " " + top;
        }
    }
}

// needZero function
function needZero(myVal) {
    return myVal = myVal < 10 ? "0" + myVal : myVal ;
  }
addTime();

//提示用户界面
设cityar=[]；
让cityCount=prompt（“请输入城市计数：”）；
对于（设i=0；i