Question

我想使用setInterval() JS函数创建一个视觉效果，该效果在Angular应用程序上一次显示一个字符，每个字符间隔100 ms。 >

请注意，这发生在index.html标记内的<app-root>中，因此只有在启动应用程序时才会出现。读完setInterval() page之后，我认为这可以完成工作，所以这是我的代码：

var divs=['rBox','aBox','tBox','sBox'];
var index=-1;

function displayChars(){
  for(container of divs){
    document.getElementById(container).style.visibility='hidden';  
  }
  var fun = setInterval(display,100);
}

function display(){
  if(index < 4){
    document.getElementById(divs[++index]).style.visibility='visible'
  }else{
    clearInterval(fun);
  }
}
displayChars();

<app-root>
  <div class="rats-div">
    <div id="rBox">1</div>
    <div id="aBox">2</div>
    <div id="tBox">3</div>
    <div id="sBox">4..</div>
  </div>
</app-root>

但是它什么也不显示，包含数字的div在那里的可见性设置为hidden，但似乎它们从未设置为visible

我看不出问题出在哪里。如果我从算法的角度来看代码，我想我可能不太了解setInterval()的内部工作。

Answer 1

fun未全局声明

index的增量过多

代码的粗略更新：

var divs=['rBox','aBox','tBox','sBox'];
var index=-1;
var fun
function displayChars(){
  for(container of divs){
    document.getElementById(container).style.visibility='hidden';  
  }
  fun = setInterval(display,100);
}

function display(){
  if(index < 3){
    document.getElementById(divs[++index]).style.visibility='visible'
  }else{
    clearInterval(fun);
  }
}
displayChars()

<app-root>
  <div class="rats-div">
    <div id="rBox">1</div>
    <div id="aBox">2</div>
    <div id="tBox">3</div>
    <div id="sBox">4..</div>
  </div>
</app-root>

Answer 2

稍作修改后即可正常工作，请参见下文。我将索引更改为从0开始并与divs[index++]一起使用（所以请使用-then-increment），然后将其与divs.length进行比较，而不是硬编码的4。另外，我将变量fun放在了全局级别。

var divs = ['rBox', 'aBox', 'tBox', 'sBox'];
var index = 0;
var fun = -1; // timer handle

function displayChars() {
  for (container of divs) {
    document.getElementById(container).style.visibility = 'hidden';
  }
  fun = setInterval(display, 100);
}

function display() {
  if (index < divs.length) {
    document.getElementById(divs[index++]).style.visibility = 'visible'
  } else {
    clearInterval(fun);
  }
}

displayChars();

<div class="rats-div">
  <div id="rBox">1</div>
  <div id="aBox">2</div>
  <div id="tBox">3</div>
  <div id="sBox">4..</div>
</div>

Answer 3

您的变量display()必须是全局变量，否则container不能访问它
不要忘记在您的for...of循环中将index声明为实际变量
您经常增加var divs = ['rBox', 'aBox', 'tBox', 'sBox']; var index = -1; var fun; function displayChars() { for (var container of divs) { document.getElementById(container).style.visibility = 'hidden'; } fun = setInterval(display, 100); } function display() { if (index < 3) { document.getElementById(divs[++index]).style.visibility = 'visible'; } else { clearInterval(fun); } } displayChars();的地方

<app-root>
  <div class="rats-div">
    <div id="rBox">1</div>
    <div id="aBox">2</div>
    <div id="tBox">3</div>
    <div id="sBox">4..</div>
  </div>
</app-root>

nsadmin@machine:~/$ jq 'keys' 474.json
[
  "x",
  "y",
  "t",
  "report"
]

Answer 4

纯 CSS 解决方案（如果有的话）如下所示：

.rats-div > div {
  opacity: 0; /* or "visibility: hidden" */
  animation: opacity .1s forwards;
}

.rats-div > div:nth-child(2) {animation-delay: .1s}
.rats-div > div:nth-child(3) {animation-delay: .2s}
.rats-div > div:nth-child(4) {animation-delay: .3s}

@keyframes opacity {
  to {opacity: 1} /* or "visibility: visible / initial" */
}

<div class="rats-div">
  <div id="rBox">1</div>
  <div id="aBox">2</div>
  <div id="tBox">3</div>
  <div id="sBox">4..</div>
</div>

Answer 5

var divs=['rBox','aBox','tBox','sBox'];
var index=0;
var fun=null;
function displayChars(){
  for(container of divs){
    document.getElementById(container).style.visibility='hidden';
  }
  fun = setInterval(display,100);
}

function display(){
  if(index < 4){
    document.getElementById(divs[index]).style.visibility='visible'
    index++;
  }else{
    clearInterval(fun);
  }
}

displayChars();

<app-root>
        <div class="rats-div">
          <div id="rBox">1</div>
          <div id="aBox">2</div>
          <div id="tBox">3</div>
          <div id="sBox">4..</div>
        </div>
    </app-root>

尝试此代码。它应该可以完成您的工作。

Answer 6

仅CSS解决方案如何？

.fade {
 font-size: 20px;
  background: linear-gradient(to bottom, black 50%,rgba(0,0,0,0.3),rgba(0,0,0,0));
  background-size:100% 0px;
  background-repeat:no-repeat;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:show 5s forwards
}
@keyframes show {
 from{background-size:100% 0px;}
 to{background-size:100% 200%;}
}

<div class="fade">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4..</div>
</div>

使用CSS和JS以时间间隔显示文本

6 个答案: