javascript - css boxShadow javascript change setinterval

Question

我希望能够更改 boxShadow。我希望它每秒更改为不同的颜色。

我已经尝试了很多方法，但无法让它发挥作用。 我真的很希望它能在 4 种颜色之间切换，但 2 种就可以了!

<style>
var myVar = setInterval(function () {
    smoke()
}, 1000);

function smoke() {
    if(document.getElementById("profile_description_box").style.boxShadow = "0px 0px 35px #ed47d0") {
        document.getElementById("myDIV").style.boxShadow = "0px 0px 25px #4d4d4d";
    }
    if(document.getElementById("profile_description_box").style.boxShadow = "0px 0px 35px #4d4d4d") {
        document.getElementById("myDIV").style.boxShadow = "0px 0px 35px #ed47d0";
    }
}
</style>

Answer 1

您的代码就快完成了，但您犯了一些错误。

---

1. 首先，删除 <style>你的声明。
2. 其次，你的if陈述是错误的。你应该使用 ==比较值时。

---

下面为您提供的工作代码。

var myVar=setInterval(function () {smoke()}, 1000);

function smoke() {

  if( document.getElementById("profile_description_box").style.boxShadow == "" ) {
    
    document.getElementById("myDIV").style.boxShadow = "0px 0px 25px skyblue";
    document.getElementById("profile_description_box").style.boxShadow = "0px 0px 35px red";     
    
  } else if ( document.getElementById("profile_description_box").style.boxShadow == "0px 0px 35px red" ) {
    
    document.getElementById("myDIV").style.boxShadow = "0px 0px 35px blue";
    document.getElementById("profile_description_box").style.boxShadow = "0px 0px 35px orange";
    
  } else if ( document.getElementById("profile_description_box").style.boxShadow == "0px 0px 35px orange" ) {
    
    document.getElementById("myDIV").style.boxShadow = "0px 0px 35px skyblue";
    document.getElementById("profile_description_box").style.boxShadow = "0px 0px 35px red";
    
  }
}

#profile_description_box {
  padding:50px;
}

#myDIV {
  height:100px;  
}

<div id="profile_description_box">

   <div id="myDIV"></div>

</div>