JavaScript中闪烁的背景颜色

huangapple
go评论95阅读模式
英文:

Blinking Background color in JavaScript

问题

I am trying to have a blinking background color between Red and White by writing 2 functions with a 3-millisecond interval, but unfortunately, it doesn't work with my set element class named "Bad".

Can someone help me with what I am doing wrong?

Code is below:

  1. function badBG() {
  2.     var colors = ['Red', 'White'];
  3.     for (i = 0; i < 2; i++) {
  4.         colorBG = colors[Math.floor(Math.random() * 2)];
  5.         // console.log(colorBG)
  6.     }
  8.     return colorBG;
  9. }
  11. function blinkBG() {
  12.     blink = badBG();
  13.     document.getElementsByClassName('Bad').style.backgroundColor = blink;
  14. }
  16. setInterval("blinkBG()", 300);

All are straight to the point functions and CSS methods.

英文:

I am trying to have a blinking background color between Red and Wite by writing 2 functions with 3milli-seconds interval, but unfortunately, it doesnt work with my set element class named, "Bad".

Can someone help me what am I doing wrong?

Code is below:

  1. function badBG(){
  2.     var colors = [&#39;Red&#39;,&#39;White&#39;]
  3.         for(i=0; i&lt;2; i++){
  4.             colorBG = colors[Math.floor(Math.random()*2)];
  5.             // console.log(colorBG)
  6.         }
  7.         
  8.         return colorBG 
  9. }
  11. function blinkBG(){
  12.     blink = badBG()
  13.     document.getElementsByClassName(&#39;Bad&#39;).style.backgroundColor = blink;
  14. }
  17. setInterval(&quot;blinkBG()&quot;,300);

All are straight to the point functions and css methods.

答案1

得分: 1

请注意，我将只为您翻译代码部分，如下所示：

  1. .better {
  2.   padding: 30px;
  3.   animation: blink 300ms infinite;
  4. }
  6. @keyframes blink {
  7.   from {
  8.     background: white;
  9.   }
  10.   to {
  11.     background: red;
  12.   }
  13. }
  1. <div class="better">我很好</div>
英文:

Better use a CSS animation:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .bad{
  2.   padding:30px;
  3.   animation: blink 300ms infinite;
  4. }
  6. @keyframes blink{
  7.   from {
  8.     background: white;
  9.   }
  10.   to{
  11.     background: red;
  12.   }
  13. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;bad&quot;&gt;I&#39;m very bad&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

以下是您要翻译的内容：

"While I would recommend solely solving this on the CSS level as Alexander Nenashev showed, there is also a clean JavaScript solution to it.

You simply us setInterval in combination with classList.toggle() to toggle a class in CSS. Means by adding/removing it:


const BAD = document.querySelectorAll('.bad');

BAD.forEach(element => {
setInterval(function() {
element.classList.toggle('bg-red');
}, 300)
})

.bad{
padding:30px;
}

.bg-red {
background-color: red;
}

I'm very bad

"

英文:

While I would recommend solely solving this on the CSS level as Alexander Nenashev showed, there is also a clean JavaScript solution to it.

You simply us setInterval in combination with classList.toggle() to toggle a class in CSS. Means by adding/removing it:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const BAD = document.querySelectorAll(&#39;.bad&#39;);
  3. BAD.forEach(element =&gt; {
  4.   setInterval(function() {
  5.     element.classList.toggle(&#39;bg-red&#39;);
  6.   }, 300)
  7. })

<!-- language: lang-css -->

  1. .bad{
  2.   padding:30px;
  3. }
  5. .bg-red {
  6.   background-color: red;
  7. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;bad&quot;&gt;I&#39;m very bad&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月20日 13:28:20
  • 转载请务必保留本文链接：https://go.coder-hub.com/76726909.html
  • css
  • function
  • html
  • javascript
  • tags
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定