22.04.2019, 20:15
|
Аспирант
|
|
Регистрация: 15.04.2019
Сообщений: 72
|
|
Вопрос по DOM
Приветствую. Не могу придумать код, который менял бы содержимое div-элемента по движению мыши несколько раз. Точнее, могу, но не более 2 движений. Мне же нужно, чтобы по каждому движению мыши, сколько бы их ни было, вписывались заранее заготовленные слова. Прошу помочь скорректировать код или продемонстрировать Ваш вариант кода (желательно, несложный). Спасибо.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="text.css">
<title>Тест
</title>
</head>
<body>
<div class="text">Цвет</div>
<script>
var text = document.getElementsByClassName("text")[0];
text.onmouseover = function(){
text.style.color = "red";
text.innerHTML = "Красный";
if(text.innerHTML = "Красный"){
text.onmouseover = function(){
text.style.color = "yellow";
text.innerHTML = "Желтый";
}
}
else if(text.innerHTML = "Желтый"){
text.onmouseover = function(){
text.style.color = "green";
text.innerHTML = "Зеленый";
}
}
}
</script>
</body>
</html>
п.с. если детальнее, то мой код не отображает слово "Зеленый", хотя я провожу по строке "Желтый" и по идее соблюдаю условие.
п.п.с. пробовал с массивами и циклами, но мой код не прощелкивается по одному, а перескакивает сразу на последний элемент.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="text.css">
<title>Тест
</title>
</head>
<body>
<div class="text">Цвет</div>
<script>
var text = document.getElementsByClassName("text")[0];
var value = ["Красный", "Желтый", "Зеленый"];
text.onmouseover = function(){
for(i = 0; i < value.length; i++){
text.innerHTML = value[i];
}
}
</script>
</body>
</html>
п.п.п.с. словом, идеи есть, попытки - тоже, страницы кода исписаны, а реализация хромает, практического навыка и помощи старших коллег недостает. Спасибо еще раз)
Последний раз редактировалось Иса Мирзоев, 22.04.2019 в 20:18.
|
|
22.04.2019, 20:22
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,102
|
|
Иса Мирзоев,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="text.css">
<title>Тест
</title>
</head>
<body>
<div class="text">Цвет</div>
<script>
var text = document.getElementsByClassName("text")[0];
var value = ["Красный", "Желтый", "Зеленый"];
var i = 0;
text.onmouseover = function(){
text.innerHTML = value[i];
i = ++i % value.length
}
</script>
</body>
</html>
|
|
22.04.2019, 21:08
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="text.css">
<title>Тест</title>
</head>
<body>
<div class="text">Цвет</div>
<script>
var textElement = document.querySelector(".text");
function* getColors() {
while(true) yield* [
{ color: "red", "text": "Красный" },
{ color: "gold", "text": "Жёлтый" },
{ color: "green", "text": "Зелёный" },
];
}
async function mouseOver() {
return new Promise(resolve => textElement.onmouseover = resolve);
}
(async function main() {
for(const { color, text } of getColors()) {
await mouseOver();
textElement.style.color = color;
textElement.textContent = text;
}
})();
</script>
</body>
</html>
Всё происходит внутри функции main. Для каждого цвета из бесконечной последовательности цветов повторять: подождать пока наведут мышь, покрасить в цвет.
|
|
22.04.2019, 21:30
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,102
|
|
Malleys,
можно пояснить почему getColors работает бесконечно по массиву?
|
|
22.04.2019, 23:38
|
Аспирант
|
|
Регистрация: 15.04.2019
Сообщений: 72
|
|
Всем спасибо, очень выручили) Все отлично работает)
Сообщение от рони
|
Malleys,
можно пояснить почему getColors работает бесконечно по массиву?
|
А у меня к Вам вопрос ( ++i % value.length) всегда замыкает конец цикла к началу?) Просто не могу понять условие: i = i + 1, пока это все делится без остатка на длину массива или как?
|
|
22.04.2019, 23:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,102
|
|
Сообщение от Иса Мирзоев
|
( ++i % value.length) всегда замыкает конец цикла к началу?)
|
да.
возможно так будет проще понять
i = i + 1;//i увеличили на 1
i = i % value.length;//в i сохранили остаток от деления
<script>
var length = 3, n = 0;
for (var i = 0; i < 50; i++) {
document.write(n + "<br>");
++n;
n %= length;
}
</script>
Основные операторы
|
|
23.04.2019, 09:04
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Сообщение от рони
|
можно пояснить почему getColors работает бесконечно по массиву?
|
Строка 15 говорит, что используется бесконечный цикл.
|
|
23.04.2019, 10:23
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,102
|
|
Malleys,
я понимаю что getColors будет работать бесконечно из-за while(true)
... видимо я не понимаю как работает строка 27, почему цикл по массиву бесконечен?
|
|
23.04.2019, 11:22
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Сообщение от рони
|
видимо я не понимаю как работает строка 27, почему цикл по массиву бесконечен?
|
Раз список содержит бесконечное кол-во элементов, то и перечисление будет бесконечно, не так ли?
Для того, чтобы у вас получилось понять, можно это рассмотреть! Давайте рассмотрим массив ["a", "b", "c"]. Вы его можете перебрать и получится три вхождения. Но что, если вы хотите, чтобы после того, как при перечислении был достигнут последний элемент, то вместо того, чтобы закрывать итератор, мы пойдём дальше сначала списка?
Мы можем создать функцию, которая приводит любой список к такому перечислению! Назовём её cycle...
function* cycle(xs) {
yield* xs;
yield* cycle(xs);
}
// дополнительная функция, которая берёт определённое кол-во элементов списка
function* take(n, i) {
for(const v of i) {
if(n-- <= 0) break;
yield v;
}
}
console.log([...take(10, cycle(["a", "b", "c"]))]);
console.log([...take(10, cycle("123"))]);
В посте №3 тогда функция getColors не нужна, а строка 27 может быть выражена так...
const colors = [
{ color: "red", "text": "Красный" },
{ color: "gold", "text": "Жёлтый" },
{ color: "green", "text": "Зелёный" },
];
for(const { color, text } of cycle(colors)) {
Последний раз редактировалось Malleys, 23.04.2019 в 11:25.
|
|
23.04.2019, 11:46
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,102
|
|
Malleys,
уже больше понимания, тут
yield* xs;
yield* cycle(xs);
здесь вопросов нет, но как работет while(true) yield* недопонимаю.
спасибо за обьяснения.
|
|
|
|