css boxShadow javascript更改设置间隔_Javascript_Css

css boxShadow javascript更改设置间隔

javascript css

css boxShadow javascript更改设置间隔,javascript,css,Javascript,Css,我希望能够更改boxShadow。我希望它每秒钟都换成不同的颜色我尝试了很多方法，但都没能成功。我真的希望它在4种颜色之间切换，但2种就可以了 <style> var myVar = setInterval(function () { smoke() }, 1000); function smoke() { if(document.getElementById("profile_description_box").style.boxShadow = "0px 0

我希望能够更改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>

我不确定您的html dom元素到底是什么，因此不能准确，但下面的jsBin可以工作。您需要根据需要更改为不同的阴影

包含工作代码，即以下代码有效

    var myVar=setInterval(smoke, 1000);

function smoke() {  
  var ele = document.getElementById("profile_description_box");
  var eleBoxShadow = ele.style.boxShadow;
  console.log('calling' + eleBoxShadow);
  if(eleBoxShadow == "red 0px 0px 35px") {
     ele.style.boxShadow = "0px 0px 25px blue";
   }
   else if(eleBoxShadow == "blue 0px 0px 35px") {
      ele.style.boxShadow = "0px 0px 35px red";
   }
  else {
    ele.style.boxShadow = "0px 0px 35px red";
  }
}

几点

style.boxShadow的值包含rgbxx，xx，xx，因此您的if比较无效尝试使用webkit、moz和其他特定于浏览器的boxShadhow属性。正如hin110531所指出的，删除样式并添加脚本！你的代码就快到了，但是你犯了一些错误

首先，删除你的声明。第二，你的if语句是错误的。比较值时应使用==。下面是您的工作代码

var myVar=setIntervalfunction{smoke}，1000；功能烟{ 如果document.getElementByIdprofile\u description\u box.style.boxShadow=={ document.getElementByIdmyDIV.style.boxShadow=0px 0px 25px天蓝色； document.getElementByIdprofile\u description\u box.style.boxShadow=0px 0px 35px红色； }否则，如果document.getElementByIdprofile\u description\u box.style.boxShadow==0px 0px 35px红色{ document.getElementByIdmyDIV.style.boxShadow=0px 0px 35px蓝色； document.getElementByIdprofile\u description\u box.style.boxShadow=0px 0px 35px橙色； }否则，如果document.getElementByIdprofile\u description\u box.style.boxShadow==0px 0px 35px橙色{ document.getElementByIdmyDIV.style.boxShadow=0px 0px 35px天蓝色； document.getElementByIdprofile\u description\u box.style.boxShadow=0px 0px 35px红色； } } 配置文件\u说明\u框{ 填充：50px； } myDIV{ 高度：100px； }

这是我如何让它工作的

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
position: absolute;
width: 100px;
height: 100px;
background-color: coral;
color: white;
box-shadow: 10px 10px 10px blue;
}
</style>
</head>
<body>
<p>Click the "Try it" button to set the boxShadow property of the DIV element:</p>
Test: <span id="ttest">1</span>
<button onclick="myFunction()">Try it</button>

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

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

function smoke() {
var a = document.getElementById("ttest").innerHTML;
var b = +a + 1;
document.getElementById("ttest").innerHTML = b;

if( a == 1 ) {
document.getElementById("myDIV").style.boxShadow = "10px 10px 10px blue";
}
if( a == 7 ) {
document.getElementById("myDIV").style.boxShadow = "10px 10px 10px red";
}
if( a == 13 ) {
document.getElementById("myDIV").style.boxShadow = "10px 10px 10px black";
}
if( a == 19 ) {
document.getElementById("myDIV").style.boxShadow = "10px 10px 10px   skyblue";
}
if( a == 29 ) {
document.getElementById("myDIV").style.boxShadow = "10px 10px 10px red";
document.getElementById("ttest").innerHTML = "1";
}
}
</script>
</body>
</html>

首先将样式部分更改为脚本。是否尝试使用webkit、moz和其他特定于浏览器的boxShadhow属性？？？你也不需要做函数{smoke}，只需要做setIntervalsmoke，1000你能把你的html稍微放一点吗？因为你使用了两个不同的ID profile\u description\u box和myDiv，我不明白为什么。你在重复提问者犯过的相同错误。你指的是哪一个？因为他所比较的价值是错误的，所以我没有考虑这个条件！您刚刚将所有ifeleBoxShadow=0px 0px 25px 4d4d语句更改为ifeleBoxShadow==0px 0px 25px 4d4d··。问我指的是哪一个听起来很奇怪，先生。我只是想让你知道，顺便说一句，我不是想责怪你。我的ID也不是hin110531：=@hina10531是的，我知道你指的是==正如我在之前的评论中提到的那样。我想知道你是否引用了==之外的其他内容，以便我也可以更改它！谢谢你让我知道这一点！你们很接近，但不会改变。它总是保持一种颜色。是的，我已经抓到了==和！为什么不换不同的颜色呢？