Question

大家好，我有以下代码：

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）。

我已经尝试过对此进行互联网搜索，但是我想不出该怎么写我要表达的意思！

有人可以帮忙吗？

Answer 1

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

Answer 2

就像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> id。除非它确实是用于静态用途的：）

不断更改元素中的文本

2 个答案: