如何为 HTML 元素的 css 类之一设置超时？答案

【问题标题】：How to setTimeout for one of css classes of HTML element?如何为 HTML 元素的 css 类之一设置超时？
【发布时间】：2021-11-26 22:23:52
【问题描述】：

我可以设置两个 css 类元素中的一个保持 3 秒的超时吗？如果字段满足条件，则出现第二类元素。但是在应用这个类之前，我想设置一个等待 3 秒的计时器。示例：

<?php
$x = rand(1,3);
?>

<div class="first <?php if($x == 1){ echo"second"};?>"></div>
<div class="first <?php if($x == 2){ echo"second"};?>"></div>
<div class="first <?php if($x == 3){ echo"second"};?>"></div>

<script>
If class second exist 
for an element then 
remove/hold/pause it for 
3 seconds and then run it. 
</script>

提前谢谢你。

【问题讨论】：

"我需要什么" 好的，那么根据提供的伪代码编写实际 JavaScript 的尝试在哪里？ Stack Overflow 不是一个您可以转储需求并为您编写代码的地方 - 您必须根据How to Ask 在此处发布之前证明自己真诚地尝试解决此问题.如果您有需要翻译成工作最终产品的要求，我建议您聘请开发人员。
你从错误的方向接近这个，使它变得比现在更复杂。您只需在页面加载后运行 setTimeout 调用，在三秒后将第二个类添加到元素中。
<?= if($x == 1){ echo"second"};?> 应该是 <?php if($x == 1){ echo "second"};?>。短标签：<?= 与<?php echo 相同，因此您有两次回声。或者更简单：<?= $x == 1 ? 'second' : '' ?>
感谢您的建议。注意。
你的代码执行没有错误？我认为<?= if($x == 1){ echo"second"};?> 会引发运行时错误。 <?= 等于<?php echo，即只会产生输出，不会执行程序。当然，您可以使用带有第一种形式的三元运算符 (<?=(test) ? (string if true) : (string if false)?>)，或者使用 <?php ... ?> 并在其中执行更结构化的代码。

标签： javascript php html css settimeout

【解决方案1】：

该说什么...？

const
  divEl  = document.querySelectorAll('div.first')
, random = Math.floor( Math.random() * divEl.length)
  ;
divEl[random].classList.add('second')
  ;
setInterval(_=> 
  {
  divEl[random].classList.toggle('second')
  }, 3000);

.first {
  width      : 4em;
  height     : 2em;
  background : lightskyblue;
  margin     : .6em 1em; 
  }
.second {
  background : coral;
  }

<div class="first"></div>
<div class="first"></div>
<div class="first"></div>

【讨论】：

"该说什么...？" 这个答案将显着受益于包含对您所做更改的简洁解释，它与 OP 的代码有何不同，以及它如何具体解决他们的问题。
我是 php、css、html 课程的学生。 JavaScript 处于下一个级别。对于我的最后一个项目，我必须制作一个棋盘游戏。所以我决定如果我能找到一种方法让curent fild在骰子停止滚动后改变它的颜色（gif文件），那将会很酷。我整天都在尝试 JavaScript，但我对一般知识一无所知。我也是这个社区的新手，所以......欢迎所有建议。
*3 神奇的数字！为什么不divEl.length :) 同样，多年后，您的格式非常糟糕且难以阅读。这不是主观的。几乎没有。

【解决方案2】：

既然你说你不是javascript专家并且正在研究php/html/css，你可以试试CSS动画属性。请注意，动画通常是一个高级主题。一个更好的解决方案可能是 Jojo 先生提供的 javascript 解决方案。

我可以理解：

您只能将类放在生成的 html 中
您需要在 3 秒后进行更改
更改只能发生一次
关于背景颜色的变化

基于之前的假设，有一个可能的实现。

.first {
  background-color: lightblue;
}

.second {
  animation-delay: 3s;
  animation-duration: 1ms;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-name: delayChangeColor;
}

@keyframes delayChangeColor {
  to {
    background-color: red;
  }
}

<div class="first">1</div>
<div class="first second">2</div>
<div class="first">3</div>

【讨论】：