时间戳

首页 > 解决方案 > Javascript - 在一系列跨度之上添加一个新的 DIV

javascript - Javascript - 在一系列跨度之上添加一个新的 DIV

问题描述

我在代码沙箱上有以下代码：https ://codesandbox.io/s/highlighter-cv2kv?file=/src/index.js

对于一个短语中的每个单词，我都有一堆跨度。我希望能够根据开始和结束时间创建亮点（每个跨度在数据集中都有这些细节）。高光需要放在相应的跨度之上。

到目前为止，我已经能够突出显示开始词和停止词，但我需要突出显示该间隔之间的每个单词。

当前状态：

当前状态

期望状态：

期望的状态

关于如何以最有效的方式做到这一点的任何想法？

标签： javascripthtml

解决方案

我有一个想法给你less js more css，你只需要切换类playing并突出显示单词：

    body {
  font-family: sans-serif;
}

.will-play {
  position: inherit;
  z-index: 1;
  position: relative;
}
.will-play.playing::after {
  z-index: 200;
  position: absolute;
  top: 0;
  left: 0;

  height: 100%;
  width: 100%;
  background-color: yellow;
  opacity: 0.5;
  content: "";
}

我忘记了 JS：

let ranges = { start: "80.9", end: "87.48" };


let spans = [...document.querySelectorAll("span.will-play")];

spans.map((item) => {
  if(item.dataset.start>=ranges.start && item.dataset.end<=ranges.end){
    item.classList.add('playing')
  }
});

推荐阅读