|
Смена цвета div
Есть, допутсим три, дива. Нужно написать функцию которая будет менять их цвет через каждый интервалы времени. Эти интервалы, могут быть разными для разных дивов. Вот функция. Но, страница даже не грузится
function changeColor (a, id){
document.getElementById("id").style.backgroundColor = getRandomColor();
setTimeout(function() {changeColor(a, id)}, a);
}
Здесь а - это параметр, задающей рандомное количество милисекунд(другой метод). getRandomColor() - метод создающий случайный цвет. Подскажите, что не так. |
document.getElementById("id").style/document.getElementById(id).style
|
<html>
<head>
<meta charset="windows-1251" />
</head>
<body>
<div id="foo">foo</foo>
<script>
r=function(){return Math.round(Math.random())}
getRandomColor=function(){return r()? "grey":"black"}
changeColor=function (a, id){
document.getElementById(id).style.background = getRandomColor()
setTimeout(function() {changeColor(a, id)}, a);
}
changeColor(1000, "foo")
</script>
</body>
</html>
Вообще, setInterval для таких вещей использовать логичней. |
Цитата:
|
Да, я видел такой пример в интернете. Тут понятно. А вконтексте такой задачи
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<body>
<script type="text/javascript">
var params = {
lines: [
{
background: getRandomColor(),
updateTime: randomNumber(1, 1000),
elements: [{
background: getRandomColor(),
width: 25
},
{
background: getRandomColor(),
width: 25
},
{
background: getRandomColor(),
width: 25
}]
},
{
background: getRandomColor(),
updateTime: randomNumber(1,800),
elements: [{
background: getRandomColor(),
width: 15
},
{
background: getRandomColor(),
width: 15
},
{
background: getRandomColor(),
width: 15
}]
},
{
background: getRandomColor(),
updateTime: randomNumber(1,1200),
elements: [{
background: getRandomColor(),
width: 15
},
{
background: getRandomColor(),
width: 15
},
{
background: getRandomColor(),
width: 15
}]
}]
};
/*global document: false*/
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function randomNumber (a, b){
a = parseInt(a);
b = parseInt(b);
return Math.floor( Math.random()* (b - a + 1)) + a;
}
// document.getElementById(id).style.backgroundColor = getRandomColor();
// setInterval('changeColor(a, id)', a);
function changeColor1 (a, id){
document.getElementById(id).style.backgroundColor = getRandomColor();
setTimeout(function() {changeColor(a, id)}, a);
}
// function changeColor (id){
// document.getElementById(id).style.backgroundColor = getRandomColor();
// }
var a = 100/params.lines.length;
var array = new Array();
for (var i = 0; i < params.lines.length; i++ ){
var d = document.createElement('div');
d.id = 'i';
d.style.width = 100 + '%';
d.style.height = a + '%';
d.style.backgroundColor = params.lines[i].background;
array.push(i);
// changeColor1(params.lines[i].updateTime, i);
for (var j =0; j < params.lines[i].elements.length; j++){
var div1 = document.getElementById('i');
var div2 = document.createElement('div');
div2.style.backgroundColor = params.lines[i].elements[j].background;
div2.style.float = 'left';
div2.style.width = params.lines[i].elements[j].width + '%';
div2.style.height = a + '%';
div2.innerHTML;
document.body.appendChild(div2);
}
document.body.appendChild(d);
// setInterval(changeColor('i'),params.lines[i].updateTime);
}
for (var k = 0; k < array.length; k++){
changeColor(params.lines[k].updateTime, array[k]);
}
</script>
<link rel="stylesheet" type="text/css" href="CSS.css">
</body>
</head>
</html>
Нужно, чтобы нижние дивы полсе загрузки страницы меняли цвета. Пробовал и через setInterval - закомментированные. Но не выходит. |
рони,
Потому что тут бесполезная рекурсия, имитирующая тупую итерацию |
Vladimir93,
Вариант для современных браузеров ... меняет фон последних трёх div -- время из data - вопросы знатокам , почему не работает в хроме, почему не работает строка 44 без window.setTimeout и как заменить если можно window.setTimeout ... есть и ещё вопросы :) :write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.animated {
transition: background-color 2s ease-out;
width: 150px;
height: 150px;
margin: 10px;
border: 1px solid black;
display: inline-block;
background-color: rgb(255, 255, 0);
}
</style>
</head>
<body>
<div class="animated" data-duration="5s"></div>
<div class="animated" data-duration="5s"></div>
<div class="animated" data-duration=".7s"></div>
<div class="animated" data-duration="8s"></div>
<script> function randomRGBComponent() {
return Math.round(Math.random() * 255);
}
function randomRGBColor() {
return 'rgb(' + randomRGBComponent() + ', ' + randomRGBComponent() + ', ' + randomRGBComponent() + ')';
}
function setBackgroundColor(elem, s) {
function go() {
var color = randomRGBColor()
elem.style.backgroundColor = color
}
elem.style.transitionDuration = s;
elem.addEventListener('transitionend', go, false);
go() //window.setTimeout(go, 0);
}
window.onload = function() {
[].forEach.call(document.querySelectorAll('.animated:nth-last-child(-n + 4)'), function(elem, i) {
setBackgroundColor(elem, elem.dataset.duration)
})
}
</script>
</body>
</html>
|
еще вариант
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
div[id^=animated] {
transition: background-color 0.5s ease-out;
width: 150px;
height: 150px;
margin: 10px;
border: 1px solid black;
display: inline-block;
background-color: rgb(255, 255, 0);
}
</style>
</head>
<body>
<div id="animated1"></div>
<div id="animated2"></div>
<div id="animated3"></div>
<script>
function ColorDiv(params) {
if (!(this instanceof ColorDiv)) {
return new ColorDiv(params);
}
this.initialize.apply(this, arguments);
}
ColorDiv.prototype.initialize = function (params) {
setInterval(function () {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters.charAt(Math.floor(Math.random() * 16));
}
params.element.style.backgroundColor = color;
}, params.interval);
}
ColorDiv({
element: document.getElementById('animated1'),
interval: 800
});
ColorDiv({
element: document.getElementById('animated2'),
interval: 1200
});
ColorDiv({
element: document.getElementById('animated3'),
interval: 2000
});
</script>
</body>
</html>
|
Цитата:
|
Octane,
однако это не повод писать через жопу. |
| Часовой пояс GMT +3, время: 08:15. |
|