Javascript 使用jQuery每隔几秒钟突出显示列表中的不同单词

发布于01月11日

我有一个"xxx-yyy-zzz"格式的单词列表，所以"-"是分隔符.我希望做的只是每隔几秒钟随机增加其中一个单词的大小，以便突出显示该单词.

我的方法是将列表包装在一个div中:

<div id="highlight-list">XXX - YYY - ZZZ</a>

然后使用这样的东西(还没有测试！):

var fullList = document.querySelector("#highlight-list");
var regex = // *- *//;
var eachItem = fullList.innerHTML.split(regex);
fullList.innerHTML = "";
for(var word in eachItem){
  fullList.innerHTML += "<span>" + eachItem[word] + "</span>";
}

若要使用跨距对Div中的单个单词进行换行，请执行以下操作.我的宏伟计划是，然后对每个范围随机应用一个CSS类几秒钟，然后删除这个类，然后重复……但我在挣扎着迈出第一步！

任何帮助都将不胜感激，谢谢.

推荐答案

对于简单的文本分割，您的代码是接近的(在HTML上分割是另一回事). 单词可以拆分为一个简单的字符串:

var words = fullList.innerHTML.split(" - ");

Edit:更新代码片段以显示如何使用.map构建HTML

将单词提取到一个数组中(使用原始的或使用jquery更新的代码片段)，然后在数组上使用.map来删除数组的每个元素，并为该数组元素返回一个新的字符串(html). 这将返回一个新的字符串数组(在本例中). 然后你用分隔符.join()这个数组来恢复原始的"-".

var html = words.map((e) => `<span>${e}</span>`).join(" - ");

每隔几秒钟高亮显示一个随机单词:

使用setInterval()设置重复间隔
使用Math.random()到get a random number
添加/删除类以突出显示每个单词

更新的代码片段:

let words = $("#highlight-list").text().split(" - ");
let html = words.map((e) => `<span>${e}</span>`).join(" - ");
$("#highlight-list").html(html);

setInterval(() => {
   let spans = $("#highlight-list > span");
   spans.removeClass("highlight");
   
   let index = Math.floor(Math.random() * spans.length);
   //console.log(index, spans.length);
   spans.eq(index).addClass("highlight");
   
}, 1500);

#highlight-list > span { border:1px solid rebeccapurple; }
.highlight { color: white; background-color: rebeccapurple; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="highlight-list">XXX - YYY - ZZZ</div>

I've used jquery simply for convenience and as you had it tagged in the question. You shouldn't normally mix vanilla-js / jquery like this, but I didn't want to change your original too much.

以下是一些注意事项:

将1500更改为您想要的任何间隔(以毫秒为单位)-对于演示/测试，更容易将其保持在较低的水平
由于只有3个单词，random()调用每次有1/3的机会得到相同的单词(这是相当高的). 您可以存储现有的span，如果相同，则获取不同的索引
当它两次 Select 相同的数字时，只需在那里显示console.log

Javascript 使用jQuery每隔几秒钟突出显示列表中的不同单词

推荐答案

Javascript相关问答推荐

为什么getRecord()会因为与_logger相关的错误而失败？(使用Hedera SDK)

react 路由加载程序行为

从PWA中的内部存储读取文件

字节数组通过echo框架传输到JS blob

如何解决CORS政策的问题

Msgraph用户邀请自定义邮箱模板

如何使覆盖div与可水平滚动的父div相关？

仅针对RTK查询中的未经授权的错误取消maxRetries

我的服务工作器没有连接到我的Chrome扩展中的内容脚本.我该怎么解决这个问题？

在带有背景图像和圆形的div中添加长方体阴影时的重影线

我在我的Java代码中遇到了问题，代码的一部分看不到先前定义的对象

如何在coCos2d-x中更正此错误

这个值总是返回未定义的-Reaction

如何确保预订系统跨不同时区的日期时间处理一致？

传递方法VS泛型对象VS事件特定对象

在渲染turbo流之后滚动到元素

使用可配置项目创建网格

JSX/React -如何在组件props 中循环遍历数组

无法向甜甜圈图表上的ChartJSImage添加可见标签

在ReactJS上挂载组件时获得多个身份验证请求