首頁猿問表格中多個閃爍的文本

表格中多個閃爍的文本

JavaScript

函數(shù)式編程 2021-03-29 12:13:25

我在互聯(lián)網(wǎng)上找到的這個JavaScript。有了這個，我只能讓第一個文本框閃爍，而下一次我想讓另一個文本框閃爍不起作用。我是一個初學者，感謝您的支持。我在javascript中嘗試了第二個變量，還復制了具有不同ID的javascript。還是沒有運氣...在腦海中，我放置了： <script language="javascript">function blinktext() { var f = document.getElementById('announcement'); setInterval(function() { f.style.visibility = (f.style.visibility == 'hidden' ? '' : 'hidden'); }, 500);}</script>在html中，我使用了：<div id="announcement" class="rTableCell"><span style="color: #99cc00;">groen</span></div>我希望桌子上有多個方框可以閃爍我的桌子在這里：https : //zappi.info/faq-howto/hub/42-led-referentie-tabel

查看完整描述

3 回答

慕沐林林

TA貢獻2016條經(jīng)驗獲得超9個贊

我強烈建議不要將setInterval（）用于此簡單的工作，而應堅持使用CSS動畫，如下所示：

需要眨眼的元素應在其樣式中包括此行...

 animation:Blink 2000ms linear 0s infinite none;

然后將其獨立添加到您的CSS部分中...

 @keyframes Blink{from{background:white;} to{background:black;}}

反對回復 2021-04-08

繁星點點滴滴

TA貢獻1803條經(jīng)驗獲得超3個贊

使用querySelectorAll和classList.toggle

還要注意，我們添加了一個CSS類來隱藏元素。toggle如果不存在該呼叫，則將添加該呼叫，如果存在，則將其刪除。

function blinktext() {

document.querySelectorAll('.announcement').forEach(e =>{

setInterval(() => {

console.log(e);

e.classList.toggle('hide');

}, 500);

});

}

// We use an event listener to only run our code once the HTML is

// loaded and ready to be read.

document.addEventListener('DOMContentLoaded', () => {

blinktext();

});

.hide {

visibility: hidden;

}