我是一個非常新的JavaScript用戶，我正在為我的網站重新創建一些東西，我希望它每隔幾秒鐘就有一次閃光/發光效果，閃光只出現一定的時間。

以下是我的嘗試:

let glow = true;

function flash() {
    glow = !glow;
  if(glow) {
    document.querySelector("#logo").style.textShadow = "-2px -2px 0.1em #fff, -2px -2px 0.1em #fff, 2px 2px 0.1em #fff, -2px -2px 0.3em #fff, 2px 2px 0.5em #fff";
  }
  else{
  document.querySelector("#logo").style.textShadow = "0 0 0";
  }
 } 
 
(function loop() {
    var rand = Math.round(Math.random() * (7000 - 4000)) + 4000; // supposed to be how often the flashes occur, from 7s to 4s
    var glow = setInterval(flash, 700); // supposed to be max time the flash can stay on screen
    setTimeout(function() {
            flash();
            loop();  
    }, rand);
}());

我留下了詳細描述我的想法的評論。感謝任何幫助，我昨天剛開始寫JavaScript，主要是寫了從其他來源獲得幫助，如果很難閱讀，很抱歉！

你不斷地創建設置間隔，卻從未擺脫它們，所以flash一直顯示，顯示，顯示(隨著時間的推移，它會變得越來越多，如果你離開它足夠長的時間，系統可能會耗盡資源！).

如果你確實想在那個隨機的時間間隔內閃爍不止一次，那么在開始下一次之前，保存setInterval并刪除它。

然而，我知道你每次都想要一個7s的flash，所以用setTimeout代替，因為這只會發生一次。

<style>
  body {
    background: blue;
  }
</style>
<div id="logo">HELLO</div>
<script>
  let glow = true;

  function flash() {
    glow = !glow;
    if (glow) {
      document.querySelector("#logo").style.textShadow = "-2px -2px 0.1em #fff, -2px -2px 0.1em #fff, 2px 2px 0.1em #fff, -2px -2px 0.3em #fff, 2px 2px 0.5em #fff";
    } else {
      document.querySelector("#logo").style.textShadow = "0 0 0";
    }
  }

  (function loop() {
    var rand = Math.round(Math.random() * (7000 - 4000)) + 4000; // supposed to be how often the flashes occur, from 7s to 4s
    var glow = setTimeout(flash, 700); // supposed to be max time the flash can stay on screen
    setTimeout(function() {
      flash();
      loop();
    }, rand);
  }());
</script>

你為此寫了很多。只需使用類似下面的例子:

document.addEventListener('DOMContentLoaded',()=>{
  function glow(){
    document.getElementById('box').classList.toggle('glow')
  }
  setInterval(glow,3000)
})

#box{
  margin: 2rem;
  width: 8rem;
  height:8rem;
  text-align:center;
  line-height:8rem;
  background: #f2f2f2;
  transition: .5s ease;
  font-size: 3rem;
  font-weight: 700;
}
.glow{
  text-shadow: 0 0 10px #00ff00
}

<div id="box">Hello</div>

您的代碼看起來基本上是正確的，但是您需要做一些調整來獲得想要的閃光/發光效果。下面是修改后的代碼，并附有解釋:

let glow = true;

function flash() {
  glow = !glow;
  if (glow) {
    document.querySelector("#logo").style.textShadow = "-2px -2px 0.1em #fff, -2px -2px 0.1em #fff, 2px 2px 0.1em #fff, -2px -2px 0.3em #fff, 2px 2px 0.5em #fff";
  } else {
    document.querySelector("#logo").style.textShadow = "0 0 0";
  }
}

(function loop() {
  var rand = Math.round(Math.random() * (7000 - 4000)) + 4000; // Random time between 4 and 7 seconds

  flash(); // Trigger the initial flash immediately

  setTimeout(function() {
    setInterval(flash, 700); // Start the flashing at an interval of 700ms
  }, rand);
})();

<h4 id="logo">Hi!</h4>