如何仅更改“inner.html”的一部分?

穆罕默德·卡西姆

我有一个基于要求的计数器 - 向后计数或按升序计数,它工作得很好,但是我想显示文本以及每个数字,因为它们被显示在计数中 - 但是一旦有一个文本就会改变改变。所以问题是 - 我怎么能有一个只影响一部分而不是全部内容的innerhtml。我希望文本保持原样。

这是 html 和 JS。

 <div class="container">
  <div class="number mt-3">100 **[I WANT TO ADD SOME TEXT HERE]** </div>
   
</div>

JS

    const numberEl = document.querySelector('.number');
let startNumber = parseInt(numberEl.innerHTML);
const endNumber = 0;

const ticker = setInterval(() => {
  numberEl.innerHTML = startNumber--;
  if(startNumber === endNumber - 1) {
    clearInterval(ticker);
  }
}, 200);

你也可以在这里找到代码笔:https ://codepen.io/kenkozma17/pen/XWdbdrd

物联网

您可以使用 += 附加 HTML 并用作<br>换行符。

numberEl.innerHTML += "<br>" + startNumber--;

要仅更改倒计时数字,您可以将其包含在一个跨度内,让您可以自由修改 div 中的其他文本。

<div class="number mt-3"><span>100</span> **[I WANT TO ADD SOME TEXT HERE]** </div>
<script>
numberEl.querySelector('span').innerHTML  = startNumber--;
<script>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章