Я работаю над веб-сайтом, и я пытаюсь программно затушевывать объекты.
Однако, когда я запускаю свой цикл, он только вычитает непрозрачность из объекта, когда я пытаюсь добавить к непрозрачности, он просто остается равным 0,01 для всех 100 циклов, но когда он запускается 100-199, он вычитает 0,01 каждый раз.
Я запутался, почему он делает такие ...
function searched() {
var count = 0;
if (srched) {
return
} else {
let runloop = setInterval(function () {
if (count <= 99) {
document.getElementById("done").style.opacity += 0.01;
} else if (count > 99 && count <= 199) {
document.getElementById("done").style.opacity -= 0.01;
} else {
clearInterval(this)
srched = false;
}
count += 1;
}, 40)
}
}
HTML-код:
<p id = "done" style="opacity: 0; color: #1a5b02;">
Там нет проблем с циклом, просто добавив к непрозрачности.
2 ответа
Проблема в том, что +=
также может означать конкатенацию, поэтому свойство opacity получает значение '0' + '0.01' = '00.01'
для значения в первый раз в цикле, которое исправляется до 0,01, но затем вы получаете {{X2 }} в следующей итерации, что является ошибкой.
-=
не имеет проблемы - это не может быть строковой операцией, поэтому он просто выполняет вычитание.
Решение: убедитесь, что не сделали конкатенацию по ошибке. Я думаю, что самое короткое решение - написать ...opacity -= -0.01;
, но мне любопытно, есть ли более короткие;)
Вам нужно использовать Number()
, чтобы добавить / вычесть непрозрачность, иначе это будет выглядеть как строка и, следовательно, ваш эффект не работает
var srched=false;
function searched() {
var count = 0,done=document.getElementById("done");
if (srched) {
return
} else {
let runloop = setInterval(function () {
if (count <= 99) {
done.style.opacity = Number(done.style.opacity)+0.01;
} else if (count > 99 && count <= 199) {
done.style.opacity = Number(done.style.opacity)-0.01;
} else {
clearInterval(this)
srched = false;
}
count += 1;
}, 40)
}
}
searched();
<p id="done">Lorem ipsum doner inut</p>
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.