为什么 offset Switch Case 在 JavaScript 中不起作用？

Question

我正在 JavaScript 中使用 Sprite 技术创建数字时钟，一切正常，除了 Switch Case 必须替换每个边框框内的图像位置，divs，关于时钟的 char 的整数是多少，但它仍然停留在默认位置，

有人可以帮我解决这个问题吗？

// 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("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 = image.offsetLeft ;
                let top = image.offsetTop ;

                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;
                }
        }
    }
}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body onload="addTime()">

  <div class="container">
      <div class="wrapper w-100" id="wrapper"></div>
  </div>

<script src="js/test.js"></script>
</body>
</html>

Answer 1

您需要直接将 image.offsetLeft 设置为 0 + "px" 之类的值，而不是您的变量 left。

Answer 2

您可以使用 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();

为什么 offset Switch Case 在 JavaScript 中不起作用？

Why offset Switch Case isn't working in JavaScript?

javascript

switch-statement