#javascript
#javascript
Вопрос:
Мне удалось перебрать алфавитный массив, но в случайном порядке, когда я нажимаю кнопку прокрутки. Как я могу перебирать массив, но в правильном порядке, и когда он достигает точки Z, снова начинать с начала без остановки.
function roll() {
var alphabet = [
"A",
"B",
"C",
"D",
"E",
"F",
"G",
"H",
"I",
"J",
"K",
"L",
"M",
"N",
"O",
"P",
"Q",
"R",
"S",
"T",
"U",
"V",
"W",
"X",
"Y",
"Z",
];
setInterval(function () {
for (i = 0; i < alphabet.length; i ) {
document.querySelector("span").innerHTML =
alphabet[Math.floor(Math.random() * alphabet.length)];
}
}, 800);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="main">
<span></span>
<button id="roll" onclick="roll()">roll</button>
</div>
<script src="main.js"></script>
</body>
</html>
Комментарии:
1. вы создадите бесконечный цикл, это приведет к тому, что браузеру не хватит памяти
2. хорошо, тогда я создам кнопку, которая будет останавливаться всякий раз, когда я захочу
3. Что именно вы пытаетесь сделать? Насколько я понимаю, вы хотите перебирать массив случайным образом, а затем, когда он, наконец, достигнет «Z», продолжать перебирать его в обычном режиме? Я пытаюсь понять прецедент здесь.
4. ах, извините, если я не правильно объяснил, я не хочу, чтобы это было случайным образом, я хочу, чтобы это было в порядке массива. Приведенный выше код приведен случайным образом, но я не хочу, чтобы это было так
5. Также innerHTML = alphab….
Ответ №1:
function roll() {
var i=0;
var alphabet = [
"A",
"B",
"C",
"D",
"E",
"F",
"G",
"H",
"I",
"J",
"K",
"L",
"M",
"N",
"O",
"P",
"Q",
"R",
"S",
"T",
"U",
"V",
"W",
"X",
"Y",
"Z",
];
setInterval(function () {
if (i == alphabet.length){
i=0;
}
document.querySelector("span").innerHTML = alphabet[i];
i ;
}, 800);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="main">
<span></span>
<button id="roll" onclick="roll()">roll</button>
</div>
<script src="main.js"></script>
</body>
</html>