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 (немного), потому что вы используете два разных идентификатора («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 (хх хх хх) так что ваши, если сравнение не будет работать
Попробуйте использовать WebKit, Мос и другие браузер конкретные boxShadhow недвижимость ,
Как указатель hin110531, удалите стиль и добавьте скрипт!

источник

2015-05-13 06:58:02 wallop

Вы повторяете те же ошибки, которые задал вопрошающий. – hina10531

На какой из них вы ссылались? Поскольку значение, которое он сравнивал с собой, было неправильным, я не согласился с условием! – wallop

вы только что изменили все свои 'if (eleBoxShadow =" 0px 0px 25px # 4d4d4d ")' statement на 'if (eleBoxShadow ==" 0px 0px 25px # 4d4d4d ")' ···. Спросив меня, какой из них я имею в виду, звучит странно. Я просто хочу, чтобы вы знали, что я не пытаюсь обвинить вас в этом.И мой идентификатор тоже не 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

ответ

Смежные вопросы