Скрипт: при наведении меняем цвет на один из заданных
Нужен скрипт, чтобы при наведении на div его цвет менялся на любой из заданных (будет 6-8 значений) в скрипте. Примерно так, как на сайте студии Лебедева.
В гугле не забанен, но пока не могу найти ничего подходящего... |
Цитата:
|
Цитата:
|
Цитата:
|
<head>
<meta charset="utf-8">
</head>
<body>
<div id="id" style="display: block; width: 200px; height: 200px; border: 1px solid grey;"></div>
<script>
document.getElementById("id").onmouseover = function() {
var color = ['red','green','blue', 'orange', 'yellow', 'violet']
this.style.backgroundColor = color[Math.round(Math.random()*color.length)];
};
</script>
</body>
|
j0hnik,
а если при каждом наведении, новый цвет из заданных? :) |
Цитата:
<head>
<meta charset="utf-8">
</head>
<body>
<div id="id" style="display: block; width: 200px; height: 200px; border: 1px solid grey;"></div>
<script>
var rand2;
document.getElementById("id").onmouseover = function(){
var color = ['red','green','blue','orange','yellow','violet','cyan']
var rand = Math.round(Math.random()*(color.length-1));
if (rand2 === rand) {this.style.backgroundColor = color[++rand];}
else {this.style.backgroundColor = color[rand];}
rand2 = rand;
};
</script>
</body>
|
а можно и условие в условии пока не будет отличаться! но это первое что в голову пришло!
|
j0hnik,
строки 10 и 11 не айс!!! |
<head>
<meta charset="utf-8">
</head>
<body>
<div id="id" style="display: block; width: 200px; height: 200px; border: 1px solid grey;"></div>
<script>
var rand2;
document.getElementById("id").onmouseover = function(){
var color = ['red','green','blue','orange','yellow','violet','cyan'];
var rand;
do {
rand = Math.floor(Math.random() * color.length);
this.style.backgroundColor = color[rand];
} while (rand == rand2);
rand2 = rand;
};
</script>
</body>
Ну теперь то идеально? ;) |
j0hnik,
ошибок нет, и вполне достаточно, но можно и без while, код будет длиннее, но без лишних генераций, что производительнее. |
Цитата:
еще можно если переменные равны прерывать функцию и запускать заново. но вроде цикл лучше в плане производительности. Как вы производительность оцениваете? может сервис какой есть? |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="id" style="display: block; width: 200px; height: 200px; border: 1px solid grey;"></div>
<script>
function rand(a) {
a = a.slice(0);
var c = a.length - 1;
return function() {
var b = Math.floor(Math.random() * c),
b = a.splice(b, 1)[0];
a.push(b);
return b
}
};
var color = ['red','green','blue','orange','yellow','violet','cyan'];
var r = rand(color);
document.getElementById("id").onmouseover = function(){
this.style.backgroundColor = r();
};
</script>
</body>
</html>
|
Спасибо за ссылку =) буду тестить! :thanks:
|
Цитата:
|
количество повторов на 100 генераций
j0hnik,
var rand2, rand;
var n = 0;
for (var i=0; i<100; i++) { rand = Math.floor(Math.random() * 6);if(rand2==rand)n++; rand2=rand}
alert(n);
|
Рони друг мой я протестил:
и вот какие результаты 1место скрипт пост 7 2место -10% пост 10 3 место -66% твой скрипт МБ я что нитак сделал. (прокоментируй пжл) https://jsperf.com/do на счет первого скрипта я согласен подход не совсем правильный (есть косяк который немного увеличивает вероятность выпадения соседнего цвета, а в остальном вроде никакую опасность не несет) |
j0hnik,
пост №7 -- обращается к несуществующим элементам массива. пост №10 от 5 до 20 % лишних генераций. пост №13 количество повторов и ошибок на 100 генераций ноль!!! по скорости не знаю, что быстрее. |
Цитата:
|
Цитата:
исправленный вариант
<head>
<meta charset="utf-8">
</head>
<body>
<div id="id" style="display: block; width: 200px; height: 200px; border: 1px solid grey;"></div>
<script>
var rand2;
document.getElementById("id").onmouseover = function(){
var color = ['red','green','blue','orange','yellow','violet','cyan']
var rand = Math.floor(Math.random()*color.length);
if (rand2 === rand) rand = ++rand%color.length;
this.style.backgroundColor = color[rand];
rand2 = rand;
};
</script>
</body>
|
точно Math.round же в первом примере
конечно же Math.floor надо незаметил :thanks: |
Цитата:
<head>
<meta charset="utf-8">
</head>
<body>
<div id="id" style="display: block; width: 200px; height: 200px; border: 1px solid grey;"></div>
<script>
var rand2;
document.getElementById("id").onmouseover = function(){
var color = ['red','green','blue','orange','yellow','violet','cyan']
var rand = Math.round(Math.random()*color.length-1);
if (rand2 === rand) rand = ++rand%color.length;
this.style.backgroundColor = color[rand];
rand2 = rand;
};
</script>
</body>
|
Цитата:
Math.floor - просто отрезает дробную часть оставляя целую, а Math.round округляет по правилам банка Интересный ход с процентом от остатка делимое которого даже если и будет больше делителя на 1 все равно мы никак промахнемся. (да и как бы маскирует наш немножко кривой подход) Тут можно применить много математических операций, разделит 2 потом прибавить 2 потом все это округлить и тоже не вылезти за диапазон. Но все равно в зависимости от от цвета который сейчас есть увеличивается вероятность выпадения цвета который мы получим применив к нему мат. операции которые мы используем. Вот это и есть единственный минус данной методики. :thanks: |
https://jsperf.com - Ну вот это супер конечно тема. протестировал все что можно уже. смотрю тесты других людей запоминаю методы которые работают быстрей. :thanks:
RegExp кстати почти везде самый медленный путь. |
| Часовой пояс GMT +3, время: 03:06. |