Увеличьте массив до максимального количества элементов

ProgramBox

Увеличьте массив до максимального количества элементов

Post author:admin
Запись опубликована:17 января, 2022
Post category:Вопросы по программированию

#javascript #html #css #arrays #loops

Вопрос:

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

Но как только массив достигает своего конца, я получаю «неопределенное» значение, потому что i увеличивается в конечном элементе массива. Я сходил с ума, пытаясь понять, как это предотвратить. Какая-нибудь помощь?

Кодовое обозначение: 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. Вам действительно это нужно wordArray[i ] ? Это может быть причиной того, что он чрезмерно увеличивается. Если вам нужно получить доступ к элементу i 1 вашего текущего элемента массива, поместите wordArray[i 1] вместо этого.

2. Я отвечал, но потом понял, что ваш вопрос нуждается в большем контексте. Можете ли вы превратить свой код в выполняемый фрагмент кода и более четко объяснить, каково желаемое поведение?

3. Взгляните на последний раздел моего обновленного ответа — интересно, это то, что вы ищете — бесконечный цикл

4. Спасибо, я не уверен, что вы представляете себе с i 1, но это вообще не работает, я тоже думал, что это может быть, но это все равно вызывает неопределенность, а также вызывает другие проблемы. Я обновил свой вопрос, и я превращу код в исполняемый фрагмент.

5. Я добавил ссылку на кодовую ссылку

Ответ №1:

Это работа для 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>

1. Все еще отпечатки не определены.

2. Спасибо. я начинаю с 1, потому что div уже заполнен 0 в самом html-коде. Я попробовал ваш код, но он совсем не работает для меня. Это ничего не дает.

3. Ах да, очень интересно, спасибо! Я его осмотрю. Для меня это начинается на «три», хотя я удивляюсь, почему это так…

4. У меня было значение 1, когда я установил его на 0, теперь оно начинается с «два», но я думаю, что это связано с задержкой в заполнении div. Могу ли я побеспокоить вас написать условный тернарный оператор в качестве оператора if/else? Я пытаюсь, но не могу понять, почему это не сработает как утверждение if/else. Я пытался, если(я

5. @epignosis567 — не с моей головы, но обычно я должен сначала войти и поиграть с ним. Если у вас возникнет новый вопрос по этому поводу, дайте мне знать

Ответ №2:

Проблема заключается в следующем: вы увеличиваете 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 ], это не должно привести к ошибке.

Также сделайте так, чтобы я

1. Теперь он печатает «три», «четыре», «пять» и «не определено» дважды.

2. Также сделайте так, чтобы я

3. По-прежнему печатает «неопределенный»

4. Спасибо, но у этого ответа есть несколько проблем. Я уже пробовал это. Я рад видеть, что так много людей дают неправильные ответы, я схожу с ума, пытаясь придумать простой способ редактирования моего кода, чтобы сделать то, о чем я прошу 😉 надеюсь, кто-то сможет что-то понять.

5. Я создал половинное решение, когда оно печатает все номера без определения, но печатает пять раз со 2-го раунда и далее. Дай мне знать, если ты этого захочешь

Ответ №3:

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

 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>

Метки: Увеличьте массив до максимального количества элементов