Javascript 只闪一次div

我想让我的div在特定的点击事件中闪烁或高亮显示一次。我尝试了以下代码

function blink() {
   var f = document.getElementById('divId');
   setInterval(function() {
      f.style.display = (f.style.display == 'none' ? '' : 'none');
   }, 500);
}

但我一直在眨眼。我只想使用JavaScript。

---

有线索吗？

了解JavaScript中两个计时器函数的用法：

• setTimeout

  -在指定时间后执行一次

• setInterval

  -每指定一次执行无限次

只需将

setTimeout

替换为

setInterval

：

function blink() {
   var f = document.getElementById('divId');
   setTimeout(function() {
      f.style.display = (f.style.display == 'none' ? '' : 'none');
   }, 500);
}

或者，如果你想让它真的闪烁，那么就这样做，因为上面的一个只会翻转它一次，你需要做两次：

function blink() {
   var f = document.getElementById('divId');
   setTimeout(function() {
      f.style.display = (f.style.display == 'none' ? '' : 'none');
   }, 500);
   setTimeout(function() {
      f.style.display = (f.style.display == 'none' ? '' : 'none');
   }, 1000);
}

如果不是两次，请使用嵌套：

function blink() {
   var f = document.getElementById('divId');
   setTimeout(function() {
      f.style.display = (f.style.display == 'none' ? '' : 'none');
       setTimeout(function() {
          f.style.display = (f.style.display == 'none' ? '' : 'none');
       }, 500);
   }, 500);
}

有关这两个功能，请参阅定时功能和秒数

---

更新

页面加载后，OP需要黄色淡入淡出效果：

$（函数（）{
$（“#淡入淡出”）。延迟（150）。设置动画({
“背景色”：“#fc9”
}，350，函数（）{
$（“#淡入淡出”）。设置动画({
“背景色”：“fff”
}, 200);
});
});
*{font-family:'Segoe-UI'，无衬线；边距：0；填充：0；列表样式：无；}
#淡入淡出{填充：15px；文本对齐：居中；}

欢迎
这里是解决方案

请按照下面的代码操作。首先为淡入效果制作css，然后单击函数将“fadeIn”Cals添加到特定的“div”

 @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
  -webkit-animation: fadeIn 1s ease-in-out 0s;
  -moz-animation: fadeIn 1s ease-in-out 0s;
  -o-animation: fadeIn 1s ease-in-out 0s;
   animation: fadeIn 1s ease-in-out 0s;
}

并在单击事件发生时添加类“fadeIn”。

函数flash（）{
$（'.highlight'）。淡出（500）；
$（'.highlight'）.fadeIn（500）；
}
设置超时（闪存，1000）
。突出显示{
背景：红色；
边框：15px实心#000；
填充：50px；
边缘顶部：25px；
}

Ganesh Putta
我只想突出它，让div留在那里。我的潜水艇消失了！这是正确的答案。我还可以提到，如果您希望下次使用setInterval，您应该将其设置为一个变量，例如
var myInterval=setInterval（function（）{…
这将允许您通过执行
clearInterval（myInterval）随时停止间隔
。您也可以在执行超时之前停止超时，方法是执行与间隔相同的操作并执行
clearTimeout（myTimeout）
@sahana然后删除第二个函数。你只需要在某个时间段后显示一次，或者？我来问你。如果出现这样的情况：
show
、
hide
、
show
、
show
？@PraveenKumar我同意，你的答案是正确的，我只是提到了可能性：）@sahana给你一个提示。因为它是由纯CSS完成的，所以它比JavaScript性能更高，也更平滑。CSS使用图形驱动GPU来执行转换和动画，而不是CPU来计算和执行。呃…这不是OP要求的效果。甚至不接近。不褪色效果兄弟…检查，这只是BG更改。但是是的，比be更好前面