HTML所有浏览器的闪烁文本，但位于正文的不同区域

HTML Blinking text for all browser but in different areas of the body

本文关键字：正文 于正文 区域 浏览器 闪烁 文本 HTML      更新时间：2023-09-26

我正在尝试让html页面的不同区域闪烁"特定"文本。然而，我的代码使所有文本闪烁。这是我的代码：

<script type="text/javascript">
function blinker()
{
    if(document.getElementById("blink"))
    {
        var d = document.getElementById("blink") ;
        d.style.color= (d.style.color=='red'?'white':'red');
        setTimeout('blinker()', 500);
    }
}
</script>
<body bgcolor="#F0F0c0"; onload="blinker();">

<align="Right"><font size="3">Type of Alarm:        <span style="font-     
weight:bold"; div id="blink">Fire</div>
<align="Right"><font size="3"># of Employees Clocked In:<span style="font-   
weight:bold"; div Id="blink">5</div>

我只想让"火"answers"5"这两个字闪烁，但一切都在闪烁。

我只是尽可能地表达你可能想要实现的目标，这实际上仍然没有达到预期的行为，但根据你提供的片段，你可能会同意我的观点，这并不容易。

我将给你一个示例plunkr，你可以编辑它来帮助你：Plunkr

function blinker()
{
    if(document.getElementById("blink"))
    {
        var d = document.getElementById("blink") ;
        d.style.color= (d.style.color =='red' ? 'white' : 'red');
        setTimeout(blinker(), 500);
    }
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body bgcolor="#F0F0c0" onload="blinker()">
  <span style="font-weight:bold; font-size:30px;">Type of Alarm:</span>
  <div id="blink">Fire</div>
  <span style="font-weight:bold; font-size:30px;"># of Employees Clocked In:</span>
  <div id="blink">5</div>
</body>
</html>

标记中有几个问题需要解决。如果你要重新开始，你可以通过CSS动画来实现你想要做的事情。

您定义了0%和100%的关键帧颜色，然后任何具有blink类的元素都将在这些颜色之间切换，如下所示：

/* -- CSS -- */
@keyframes colours {
 0% {color: #f00;}
100% {color: #fff;}
}
.blink { /*browser prefixes removed for brevity*/
    animation-direction: normal;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: colours;
    animation-timing-function: ease;
}
<!-- HTML -->
Type of Alarm:<span class="blink">Fire</span><br />
# of Employees Clocked In:<span class="blink">5</span>

您的html代码无效。

你为什么不使用这个标签：

<blink>

您可以从这个例子开始，因为我们知道您要做什么，但您有无效的标记：

https://jsfiddle.net/jws5wpfm/

HTML

<h3>Type of Alarm:
 <span class="blink white">Fire</span>
 <br/>
 # of Employees Clocked In
 <span class="blink">5</span>
</h3>

CSS

.blink {
  color:red
}
.white {
  color: white !important
}

JS

window.setInterval(function() {
    $("span").toggleClass("white");
}, 500);
相关文章：