Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Как сделать смену фона по клику
 
 автор: technic611   (17.05.2012 в 18:04)   письмо автору
 
 

На странице есть прямоугольник. После клика на него должна начаться
смена цвета, каждые 3 секунды, на случайный. После повторного клика
смена цветов останавливается.

  Ответить  
 
 автор: bishake   (17.05.2012 в 18:22)   письмо автору
 
   для: technic611   (17.05.2012 в 18:04)
 

//<?
var inProcess false;
var 
si;
var 
letters '0123456789ABCDEF'.split('');
$(
'#any').click(function() {
    
inProcess = !inProcess;
    if (
inProcess) {
        
si setInterval(function() {
            var 
color '#';
            for (var 
6ii-- ) {
                
color += letters[Math.round(Math.random() * 15)];
            }
            $(
'#any').css({backgroundColorcolor});
        }, 
3000);
    } else {
        
clearIntervalsi );
    }
});

* исправлено

  Ответить  
 
 автор: bishake   (17.05.2012 в 18:41)   письмо автору
 
   для: bishake   (17.05.2012 в 18:22)
 

Можно и без массива:
//<?
var color '#';
for (var 
6ii-- ) {
    
color += (Math.floor(Math.random()*16)).toString(16);
}

Может кто-то сумеет написать ещё проще с побитовыми операциями? :)

  Ответить  
 
 автор: technic611   (17.05.2012 в 18:44)   письмо автору
 
   для: bishake   (17.05.2012 в 18:22)
 

не получается



    
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

<script> 

var inProcess = false; 
var i; 
$('#any').click(function() { 
    inProcess = !inProcess; 
    if (inProcess) { 
        i = setInterval(function() { 
            $('#any').css({backgroundColor: '#'+((1<<24)*Math.random()|0).toString(16)}); 
        }, 3000); 
    } else { 
        clearInterval( i ); 
    } 
});

</script>
<style>

.any
{
   position: absolute;  
   overflow: auto;  
   width: 50px;  
   height: 50px; 
   left: 50%;  
   top: 50%;  
   margin-left: -320px;  
   background-color: #000000;  
}
</style>
<html>
<div id="any" class=any> </div>
</html>

  Ответить  
 
 автор: bishake   (17.05.2012 в 18:49)   письмо автору
 
   для: technic611   (17.05.2012 в 18:44)
 

В document.ready поместите скрипт или же - в конец документа.
Я свой ответ исправил, вариант с ((1<<24)*Math.random()|0).toString(16) оказался не совсем верным :)

  Ответить  
 
 автор: technic611   (17.05.2012 в 18:55)   письмо автору
 
   для: bishake   (17.05.2012 в 18:49)
 

не работает все равно



<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

<script> 
$(document).ready(function() {
var inProcess = false; 
var si; 
var letters = '0123456789ABCDEF'.split(''); 
$('#any').click(function() { 
    inProcess = !inProcess; 
    if (inProcess) { 
        si = setInterval(function() { 
            var color = '#'; 
            for (var i = 6; i; i-- ) { 
                color += letters[Math.round(Math.random() * 15)]; 
            } 
            $('#any').css({backgroundColor: color}); 
        }, 3000); 
    } else { 
        clearInterval( si ); 
    } 
});
});

</script>



<html>
<div id="any" style= "background-color: #000000; width: 50px; height: 50px;"> </div>
</html>

  Ответить  
 
 автор: confirm   (17.05.2012 в 19:17)   письмо автору
 
   для: technic611   (17.05.2012 в 18:55)
 

<script>
var inProcess = 0;
$(function(){
  $('#box').click(function() {  
    inProcess ^= 1;  
    if (inProcess) {  
        si = setInterval(function() {  
            $('#box').css({backgroundColor:'#'+Math.floor(Math.random()*16777215).toString(16)});  
        }, 3000);  
    } else {  
        clearInterval( si );  
    }  
  });
 
});    
</script>
<div id="box" style= "background-color:#000000;width:50px;height:50px;"></div>

  Ответить  
 
 автор: technic611   (17.05.2012 в 19:29)   письмо автору
 
   для: confirm   (17.05.2012 в 19:17)
 

извините не правильно был указан путь к библиотеке jQuery. работает. Расскажите что здесь происходит, пожалуйста
Math.floor(Math.random()*16777215).toString(16)})

  Ответить  
 
 автор: confirm   (17.05.2012 в 19:44)   письмо автору
 
   для: technic611   (17.05.2012 в 19:29)
 

Десятичное значение шестнадцатеричного числа FFFFFF равно 16777215. Math.random() генерирует числа с плавающей точкой от 0 до 1, поэтому, чтобы получить максимальное нам нужное, умножаем это на 16777215. Далее округляем в меньшую сторону (с тем же успехом вместо Math.floor можно применить parseInt), и преобразуем это число в строку в шестнадцатеричном виде.

  Ответить  
 
 автор: bishake   (17.05.2012 в 20:56)   письмо автору
 
   для: confirm   (17.05.2012 в 19:17)
 

Ваш вариант допускает возможность появления не 6-значных цветов, неужели это не видно?

  Ответить  
 
 автор: confirm   (18.05.2012 в 04:09)   письмо автору
 
   для: bishake   (17.05.2012 в 20:56)
 

Зачем смотреть, если это естественно? При трех значениях тоже получим цвет, при остальных будет проигнорировано. Но для случайного выбора цвета это разве важно? Я считаю нет. Если так принципиально можно добавить нижнюю границу.

  Ответить  
 
 автор: bishake   (18.05.2012 в 12:16)   письмо автору
 
   для: confirm   (18.05.2012 в 04:09)
 

Разумеется важно. Представьте, что каждый месяц случайным образом выбирается, получите Вы зарплату или нет? Может теперь вы станете считать по-другому?

  Ответить  
 
 автор: confirm   (18.05.2012 в 12:54)   письмо автору
 
   для: bishake   (18.05.2012 в 12:16)
 

Значится так - random() такой же случайный как образ бабушки с семечками у подъезда, его случайность, это случай. Если вы докажите, что он таки выдаст цвет с исправной случайностью от черного до белого и ни разу не повторившись, я сниму пред вами шляпу. А если нет, значит я имею право на вольности, какая к черту разница или повтор, или пропуск.
Что касается мест, где нужно тютелька в тютельку, знаю, сам не глуп.

  Ответить  
 
 автор: bishake   (18.05.2012 в 13:19)   письмо автору
 
   для: confirm   (18.05.2012 в 12:54)
 

Давайте обратимся к "ТЗ" :)
> После клика на него должна начаться смена цвета, каждые 3 секунды, на случайный.
Из этого утверждения можно сделать однозначный вывод, что каждые 3 секунды цвет должен меняться на некий другой, то бишь HEX-код должен отличаться от предыдущего хотя бы на один символ.
В Вашем случае, вероятность того, что данное условие не выполнится, равна
0x100000 / 0xFFFFFF = 6.25%

Фактически, это значит, что каждая 16-ая попытка сменить цвет будет не удачной.

В случае, если формировать 6-значный HEX-код, вероятность невыполнения указанного выше условия равна
1 / 0xFFFFFF = 0.000006%

Это значит, что в теории неудачной будет одна из 16777215 попыток. Даже меняя цвет 100 раз в секунду, для такого совпадения потребуется около 2 суток, что очень далеко от реальной ситуации.

  Ответить  
 
 автор: confirm   (18.05.2012 в 13:33)   письмо автору
 
   для: bishake   (18.05.2012 в 13:19)
 

Вот я в этом ТЗ вижу только одно - сменить, а чего, сколько, и по каким условиям нет.

Вам важна принципиальность? Я ответил - укажите нижний порог, например 100000, и в полемики необходимости не будет.

Вероятность, это магия, а я в нее не верю. ;)

PS. Это вам, чтобы успокоились, автора, по моему, это не так волнует как вас. )
'#'+(parseInt(Math.random()*15728640)+1048576).toString(16)

  Ответить  
 
 автор: bishake   (18.05.2012 в 14:19)   письмо автору
 
   для: confirm   (18.05.2012 в 13:33)
 

Дело не в принципиальности, а в несоответствии решения и поставленной задачи. Если сменить - значит сменить, а не оставить тем же в каком-то случае.
'#'+(parseInt(Math.random()*15728640)+1048576).toString(16)

Это решение, пожалуй, самое верное и короткое :)

  Ответить  
 
 автор: confirm   (18.05.2012 в 14:25)   письмо автору
 
   для: bishake   (18.05.2012 в 14:19)
 

Я уже сказал - не вижу в поставленной задаче условия "обязательно от белого до черного". Так что "соответствие", это вопрос спорный, разрешить который может только автор.

  Ответить  
 
 автор: confirm   (18.05.2012 в 15:11)   письмо автору
 
   для: bishake   (18.05.2012 в 14:19)
 

Кстати, если следовать "букве закона", то тогда так (все учесть):
$('#box').css({backgroundColor:'rgb('
               +parseInt(Math.random()*255)+','
               +parseInt(Math.random()*255)+','
               +parseInt(Math.random()*255)+')'})

  Ответить  
 
 автор: technic611   (17.05.2012 в 19:32)   письмо автору
 
   для: bishake   (17.05.2012 в 18:49)
 

ваш вариант тоже работает, спасибо

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования