Я написал этот код. Он вращает два блока div, как переворот карты, с использованием преобразования css каждые 1000 мс и отображает новый текст в блоке div, который извлекается из массива. Он работает бесконечно.

Но как только массив достигает своего конца, я получаю значение undefined, потому что i ++ увеличивается на последний элемент массива. Я схожу с ума, пытаясь понять, как этого избежать. Любая помощь?

Codepen: https://codepen.io/warpigs666/pen/OJpBKdy

    <style>
        #flip-card {
            width: 100px;
            height: 50px;
        }
        #flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }
        #textDiv1 {
            background-color: lightblue;
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            text-align: center;
        }
        
        #textDiv2 {
            background-color: lightcoral;
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            text-align: center;
            transform: rotateX(180deg);
        }
    </style>

<body>
    
    <div id="flip-card">
        <div id="flip-card-inner">
            <div id="textDiv1">
                one
            </div>
            <div id="textDiv2">
                set via script
            </div>
        </div>
    </div>
   
    <script>
        var flipCard = document.getElementById('flip-card');
        var flipCardInner = document.getElementById('flip-card-inner');
        var textDiv1 = document.getElementById('textDiv1');
        var textDiv2 = document.getElementById('textDiv2');
        var wordArray = ["one", "two", "three", "four", "five"]

        var i = 1;

        function flipText(){   
            textDiv2.innerHTML = wordArray[i];
            flipCardInner.style.transform = "rotateX(180deg)";
            
            setTimeout(
                function() {
                    textDiv1.innerHTML = wordArray[i++];
                    flipCardInner.style.transform = "rotateX(360deg)";
                }, 1000
            );
            
            if (i<wordArray.length){
                i++;
            }
                else {i=0;}
        }
        
            var flipIt = setInterval(flipText, 2000);
        
    </script>
</body>
1
epignosis567 12 Июн 2021 в 23:35

3 ответа

Лучший ответ

Это работа для setInterval

var flipCard = document.getElementById('flip-card');
let flipCardInner = document.getElementById('flip-card-inner');
let textDiv1 = document.getElementById('textDiv1');
let textDiv2 = document.getElementById('textDiv2');
let wordArray = ["one", "two", "three", "four", "five"];

let i = 0;
let timerVal = 1000;

function getI(i) {
  if (i < wordArray.length - 1) return i + 1;
  else return 0;
}
let ctr = 1,
  useDiv; // ctr and useDiv will help to toggle between divs in our loop and also increment the transform number

textDiv1.innerHTML = wordArray[i]; // initialize 

function flipText() {
  i = getI(i);
  useDiv = (useDiv == textDiv2) ? textDiv1 : textDiv2;
  useDiv.innerHTML = wordArray[i];
  flipCardInner.style.transform = "rotateX(" + (ctr * 180) + "deg)";
  ctr++;
}

let interval
window.onload = function() {
  // we'll still delay the beginning of the infinite loop, but then we set it to an interval, so it runs forever.
  // if you need to stop it in your code, just use clearInterval(interval)
  setTimeout(() => {
    interval = setInterval(() => flipText(), timerVal);
  }, timerVal);
}
#flip-card {
  width: 100px;
  height: 50px;
  perspective: 100px;
}

#flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

#textDiv1 {
  background-color: lightblue;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  text-align: center;
}

#textDiv2 {
  background-color: lightcoral;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  text-align: center;
  transform: rotateX(180deg);
}
<div id="flip-card">
  <div id="flip-card-inner">
    <div id="textDiv1">

    </div>
    <div id="textDiv2">

    </div>
  </div>
</div>
2
Kinglish 12 Июн 2021 в 23:26

Я не думаю, что это идеальный способ для этой работы, но, возможно, придерживаясь вашего контекста, вот так;

var flipCard      = document.getElementById('flip-card'),
    flipCardInner = document.getElementById('flip-card-inner'),
    textDiv1      = document.getElementById('textDiv1'),
    textDiv2      = document.getElementById('textDiv2'),
    wordArray     = ["one", "two", "three", "four", "five"],
    i             = 0;

function flipText(){   
  textDiv2.innerHTML = wordArray[++i % wordArray.length];
  flipCardInner.style.transform = "rotateX(180deg)";
                
  setTimeout(function(){
               textDiv1.innerHTML = wordArray[++i % wordArray.length];
               flipCardInner.style.transform = "rotateX(360deg)";
             }, 1000);
}
            
var flipIt = setInterval(flipText, 2000);
#flip-card { width: 100px;
             height: 50px;
           }
#flip-card-inner { position: relative;
                   width: 100%;
                   height: 100%;
                   transition: transform 0.6s;
                   transform-style: preserve-3d;
                 }
#textDiv1 { background-color: lightblue;
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            text-align: center;
          }

#textDiv2 { background-color: lightcoral;
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            text-align: center;
            transform: rotateX(180deg);
          }
<div id="flip-card">
  <div id="flip-card-inner">
    <div id="textDiv1">
      one
    </div>
    <div id="textDiv2">
      set via script
    </div>
  </div>
</div>
1
Redu 12 Июн 2021 в 22:45

Проблема заключается в следующем: вы увеличиваете i дважды, тогда как это должно быть только один раз:

 function() {
                    textDiv1.innerHTML = wordArray[i++]; ==> Here 
                    flipCardInner.style.transform = "rotateX(360deg)";
                }, 1000
            );
            
            if (i<wordArray.length){
                i++;  ==> And here 
            }
                else {i=0;}
        }

Удалите приращение для wordArray [i ++], не должно вызывать ошибки.

Также сделайте это i

0
V M 12 Июн 2021 в 20:45