Непрерывно изменять текст в элементе
Привет всем, у меня есть следующий код:
var names = Array('John', 'Craig', 'Jim', 'Nick', 'Stuart');
$("#pickName").on('click', function () {
//pickName();
var name = names[Math.floor(Math.random() * names.length)];
alert(name);
names.splice($.inArray(name, names), 1);
$('#' + name).remove();
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id = "John">John</li>
<li id = "Craig">Craig</li>
<li id = "Stuart">Stuart</li>
<li id = "Nick">Nick</li>
<li id = "Jim">Jim</li>
</ul>
<a id = "pickName">Click Me</a>
<h1 id = "randomName"></h1>Который, когда я нажимаю на #pickName, выбирает имя из массива и отображает его в окне предупреждения, а затем удаляет его из массива и из списка <ul>. Это все хорошо, но я бы хотел, чтобы тег H1 (#randomName) прокручивался и «мигал» всеми оставшимися именами (постоянно, пока я не нажму #pickName) .
Я пытался выполнить поиск в Интернете для этого, но я не могу придумать, как сказать, что я пытаюсь сделать!
Может ли кто-нибудь помочь?
Если вам нужен повторяющийся код, посмотрите на setInterval().
и посмотрите на Math.random()
простой рабочий пример
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете сделать это с помощью setInterval и, сохраняя глобальный счетчик, также позаботьтесь о том, чтобы взять модуль этого счетчика с длиной вашего массива, чтобы избежать индексации за пределами границ.
Вот документ для setInterval. Вы также должны назначить возвращаемое значение, чтобы позже вы могли очистить свой интервальный таймер.
const names = Array('John', 'Craig', 'Jim', 'Nick', 'Stuart');
const h1$ = $('#randomName');
let idx = 0;
setInterval(() => {
h1$.text(names[idx++ % names.length]);
}, 200);
$("#pickName").on('click', function () {
const name = names[Math.floor(Math.random() * names.length)];
names.splice($.inArray(name, names), 1);
$('#' + name).remove();
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id = "John">John</li>
<li id = "Craig">Craig</li>
<li id = "Stuart">Stuart</li>
<li id = "Nick">Nick</li>
<li id = "Jim">Jim</li>
</ul>
<a id = "pickName">Click Me</a>
<h1 id = "randomName"></h1>Точно так же, как jo_va, но со случайными именами:
var names = Array('John', 'Craig', 'Jim', 'Nick', 'Stuart');
function pickName()
{
return names[Math.floor(Math.random() * names.length)]
}
$("#pickName").on('click', function () {
//pickName();
var name = pickName();
alert(name);
names.splice($.inArray(name, names), 1);
$('#' + name).remove();
});
setInterval(function(){
$("#randomName").text(pickName());
}, 200);<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id = "John">John</li>
<li id = "Craig">Craig</li>
<li id = "Stuart">Stuart</li>
<li id = "Nick">Nick</li>
<li id = "Jim">Jim</li>
</ul>
<a id = "pickName">Click Me</a>
<h1 id = "randomName"></h1>Тем не менее, я рекомендую вам найти более устойчивый способ управления вашими элементами, а не давать идентификаторы <li>, соответствующие их содержанию. Если это действительно не предназначено для статического использования :)
Это javascript, а не java. Используйте правильный тег.