使用 replace() 来改变值

Question

我目前正在一个网站上工作，看看离我的下一个 class 还有多长时间，我正在使用一些 css 来给它一个“小故障效果”

这里是css:

.glitch {
  position: relative;
  color: white;
  font-size: 4em;
  letter-spacing: 0.5em;
  /* Animation provies a slight random skew. Check bottom of doc for more information on how to random skew. */
  animation: glitch-skew 1s infinite linear alternate-reverse;
}
.glitch::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: 2px;
  text-shadow: -2px 0 #ff00cc;
  /* Creates an initial clip for our glitch. This works in a typical top,right,bottom,left fashion and creates a mask to only show a certain part of the glitch at a time. */
  clip: rect(44px, 450px, 56px, 0);
  /* Runs our glitch-anim defined below to run in a 5s loop, infinitely, with an alternating animation to keep things fresh. */
  animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: -2px;
  text-shadow: -2px 0 #00c8ff, 2px 2px #ff00cc;
  animation: glitch-anim2 1s infinite linear alternate-reverse;
}

已满 CSS: link

在html中有这部分：

<div id="app">
    <div id="wrapper">
        <h1 class="glitch" data-text="test">test</h1>
        <h2 class="glitch" data-text="time">time</h2>
    </div>
</div>

我可以编辑实际文本，但不能编辑 data-text 值。对于第一个，它工作得很好，因为我只使用这个：

document.body.innerHTML = document.body.innerHTML.replace('test', jsonData['schedule'][0][day.toLowerCase()][0][checkperiod()[0]])

我在使用某种“倒计时”功能查看距离下一个周期还有多长时间时遇到了这个问题。我不能使用 replace() 因为我需要替换的东西每秒都在变化。我目前的想法是要么只是用一些 JavaScript 替换那部分，要么找到一种方法来替换它，只要它符合格式（2 个数字冒号然后 2 个数字）。我的问题是我不确定该怎么做，有什么想法吗？

目前在做什么：

（有分秒但后面有文字“时间”。）

（这只是一张正在移动的静止图像。）

我希望它做什么：

（这只是一张正在移动的静止图像。）

此外，如果我删除正常时间的位置，则不会有效果，只需要更改即可。

提前致谢:D

Answer 1

获取h1的引用，设置data-text为新值，也可以同时设置innerHTML

const theH1 = document.getElementById("wrapper").children[0];  
// it's the first element child of the wrapper div

const theTime = "00:00:00";

theH1.dataset.text = theTime;
theH1.innerHTML = theTime;

Answer 2

您可以使用 Element.setAttribute(AttributeName, AttributeValue)..

更新数据集 data-text 的元素属性值

这是一个示例，但在您的情况下，您应该使用 jsonData['schedule'][0][day.toLowerCase()][0][checkperiod()[0]] 作为属性值。

var element = document.getElementById("wrapper").firstElementChild;

element.setAttribute('data-text','00:00');

.glitch {
  position: relative;
  color: white;
  font-size: 4em;
  letter-spacing: 0.5em;
  /* Animation provies a slight random skew. Check bottom of doc for more information on how to random skew. */
  animation: glitch-skew 1s infinite linear alternate-reverse;
}
.glitch::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: 2px;
  text-shadow: -2px 0 #ff00cc;
  /* Creates an initial clip for our glitch. This works in a typical top,right,bottom,left fashion and creates a mask to only show a certain part of the glitch at a time. */
  clip: rect(44px, 450px, 56px, 0);
  /* Runs our glitch-anim defined below to run in a 5s loop, infinitely, with an alternating animation to keep things fresh. */
  animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: -2px;
  text-shadow: -2px 0 #00c8ff, 2px 2px #ff00cc;
  animation: glitch-anim2 1s infinite linear alternate-reverse;
}

<div id="app">
    <div id="wrapper">
        <h1 class="glitch" data-text="test">test</h1>
        <h2 class="glitch" data-text="time">time</h2>
    </div>
</div>

使用 replace() 来改变值

Using replace() for a changing value

html

javascript

css