Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Смена цвета фона каждую минуту (https://javascript.ru/forum/misc/36077-smena-cveta-fona-kazhduyu-minutu.html)

Dlopoel 03.03.2013 16:19

Смена цвета фона каждую минуту
 
Имеется обычный скрипт часов:

<html>

<head>
<title>Часы</title>
</head>
<script>
function cl() {
var t = new Date()
document.form1.s1.value = t.toLocaleString()
setTimeout('cl()', 1000)
}
</script>

<body OnLoad="cl()">
<center>
<form name=form1>
<input type=text size=21 name=s1>
</form>
</center>
</body>

</html>

Нужно, чтобы когда на часах было 00 секунд, т.е. каждую минуту - цвет фона менялся на "рандом"(другой), никак не могу сообразить как это реализовать.

Dlopoel 03.03.2013 19:41

Покопавшись на сайте нашел функцию, теперь код выглядит так:

<html>
<head>
<title>Часы</title>
</head>
<script>
function rgb()
{
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
var rgb = 'rgb(' + r + ',' + g + ',' + b + ')';
document.body.style.backgroundColor = rgb;
}
setInterval('rgb()',60000)
</script>
<script>
function cl()
{
var t=new Date()
document.form1.s1.value=t.toLocaleString()
setTimeout('cl()',1000)
}
</script>
<body OnLoad="cl()">
<center>
<form name=form1>
<input type=text size=21 name=s1>
</form>
</center>
</body>
</html>

Но к моему огромному сожалению функция "setInterval" не привязана к часам, и работает с того момента как запустили документ, соответственно вопрос остается тем же, как поставить смену цвета фона на каждую минуту по часам компьютера?

ksa 03.03.2013 19:55

Цитата:

Сообщение от Dlopoel
Нужно, чтобы когда на часах было 00 секунд, т.е. каждую минуту - цвет фона менялся

Например так...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function cl() {
	var t = new Date();
	if (t.getSeconds()==0) {
		// меняй фон
	};
	document.form1.s1.value = t.toLocaleString();
	setTimeout('cl()', 1000);
}
</script>
</head>
<body onload="cl()">
<center>
	<form name=form1>
		<input type=text size=21 name=s1 />
	</form>
</center>
</body>
</html>

user222 03.03.2013 23:18

Я тут сам за помощью пришёл, так что мой вариант не обязательно правильный, но я бы сделал так:
<html>
    
    <head>
        <title>Часы</title>
    </head>
    <script>
        function loaded() { //вызывается при загрузке
            changeColor(); //удалить, если после загрузки НЕ нужна смена фона
            var now = new Date().getTime(); //получаем время
            var remain = 60000 - (now % 60000); //узнаем сколько осталось до 00
            setTimeout(function () { //ждём до 00
                setInterval(changeColor, 60 * 1000); //запускаем каждые 60сек
                changeColor(); //запускаем сейчас, т.к. сейчас 00
            }, remain);
        }

        function changeColor() { //функция смены фона, не менял
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            var rgb = 'rgb(' + r + ',' + g + ',' + b + ')';
            document.body.style.backgroundColor = rgb;
        }
    </script>
    
    <body onload="loaded()">
        <center>
            <form name=form1>
                <input type=text size=21 name=s1>
            </form>
        </center>
    </body>
</html>

Deff 03.03.2013 23:23

user222,
В точном ожидании 00 смысла сильного нет
Во первых - у 60% юзеров время отличается от реального на 10-40 сек
И восстанавливается раз в неделю по синхронизации компутерных часов.

Единственное обоснование такой нужды, синхронизация с каким-то показывающим время устройством на странице(тогда плясать стоит именно от него

user222 03.03.2013 23:36

Deff,
Я просто не понимаю зачем ksa запускает проверку 60 раз в минуту. Только из-за этого предлагаю вариант с запуском 1 раз в минуту.

Deff 04.03.2013 00:49

user222,
ksa, Просто хотел продемонстрировать что совпадает с часами, поскольку Вы так сказали...*А часы посекундные

ksa 04.03.2013 17:46

Цитата:

Сообщение от Deff
ksa, Просто хотел продемонстрировать что совпадает с часами

Да, именно так. :yes:


Часовой пояс GMT +3, время: 21:24.