css boxShadow javascript更改setinterval

我希望能夠更改boxShadow。我希望它每秒改變一種不同的顏色。css boxShadow javascript更改setinterval

我已經嘗試了很多方法，無法獲得此功能。我真的很喜歡它在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>

來源

2015-05-13 Dillon Burnett

首先將'style'節改爲'script'。 – hina10531

您是否嘗試過使用webkit，moz和其他瀏覽器特定的boxShadhow屬性？你也不需要做函數（）{smoke（）}，只是做setInterval（smoke，1000） – wallop

你可以把你的HTML（只是一點點），因爲你使用兩個不同的ID（「profile_description_box」和「myDiv」）我不明白爲什麼。 – Lynxi

我不確定你的html DOM元素究竟是什麼，因此不能準確，但下面的jsBin工作。你需要根據你的需求

JSBin

Improvised包含了工作代碼，即下面的代碼工作切換到不同的陰影。

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的值包含RGB（XX，XX，XX），所以你如果比較不會工作
嘗試使用WebKit的，MOZ和其他瀏覽器的具體boxShadhow財產。
As hin110531指出，刪除樣式並添加腳本！

來源

2015-05-13 06:58:02 wallop

你正在重複提問者所犯的同樣的錯誤。 – hina10531

你指哪一個？既然他與自己比較的價值是錯誤的，我並沒有對這個條件進行濃縮！ – wallop

你剛剛把所有'if（eleBoxShadow =「0px 0px 25px＃4d4d4d」）'語句改成了'if（eleBoxShadow ==「0px 0px 25px＃4d4d4d」）'···。問我指的是哪一個聽起來很奇怪的先生。我只是想讓你知道，我並不想責怪你。並且我的ID也不是hin110531：= – hina10531

你的代碼幾乎在那裏但你犯了一些錯誤。

首先，取消對你的<style>聲明。
二，你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>

來源

2015-05-13 07:09:09 hina10531

-1

這是我如何得到它的工作。

<!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>

來源

2015-05-13 08:23:26

css boxShadow javascript更改setinterval

回答

相關問題