как я могу оживить innerHTML - PullRequest
Новая
       0

как я могу оживить innerHTML

0 голосов
/ 17 июня 2020

Я хочу оживить текст «Это НЕ разрешено» ниже. 

 document.getElementById("ve").innerHTML = '<p  style="text-align:center"><h1><span style="color:blue">This is  </span><span style="color:red">NOT allowed</span><span style="color:blue">. </span></h1></p>';

К сожалению, в моей ситуации я должен использовать внутренний HTML в сценарии java. Страницы HTML нет. Скрипт java динамически генерирует HTML, поэтому у меня нет доступа к странице HTML. Я хочу анимировать текст либо плавно, либо просто отскакивать. Поскольку это файл javascript, у меня нет доступа к файлу css (или я ошибаюсь?). Я ищу меньше кода и очень простой механизм. Одна идея состоит в том, что я могу имитировать моргание, копируя и вставляя, показывая внутренний HTML, устанавливая его на "" и показывая снова каждую секунду. Есть ли какой-нибудь изящный способ? Я не могу использовать фреймворк javascript, например jQuery.

Примечание *: я копирую вставленный код для присвоения значения внутреннему HTML и устанавливаю его на «» каждые 2 секунды, мигание не происходит. Так что этот вариант, я полагаю, исключен. Я пользовательский интерфейс с обширным опытом работы с бэкэнд: (

Edit ** Я решил go с ответом @JoshB. Он работает и намного чище. Теги HTML и анимация четко разделены. I Я нацелен на людей с некоторыми заболеваниями. Я 0 из 10, я хочу более простое решение. Спасибо за вашу помощь.

Ответы [ 2 ]

3 голосов
/ 17 июня 2020

Фактически вы можете просто изменить внешний вид текста через DOM CSS в JavaScript. Я решил, что самый простой способ - сделать al oop с setTimeout для достижения конечной цели. 

<!DOCTYPE html>
<html>
<head>
	<title>TEST</title>
</head>
<body>
<p id="ve">Example Text</p>
<script>
	state = "off";
	function blinkText() {
		if (state == "on") {
			state = "off";
			document.getElementById("ve").style.visibility = "visible";
			setTimeout(blinkText, 1000);
		} else {
			state = "on";
			document.getElementById("ve").style.visibility = "hidden";
			setTimeout(blinkText, 1000);
		}
	}
	blinkText();
</script>
</body>
</html>

Это в основном включает и выключает видимость текста каждую секунду. Время в миллисекундах можно изменить с помощью второго параметра функции setTimeout. Надеюсь, это поможет вам решить вашу проблему!

0 голосов
/ 17 июня 2020

Вы можете добавлять намного больше вещей в свой внутренний HTML.

  • Например, если вы хотите добавить эффект постепенного появления, вы должны начать с текста, установленного как невидимый, используя «opacity: 0»
  • Также вы должны добавить переход при подготовке к изменению этого значения с помощью «transition: opacity 1s».
  • Затем вы должны использовать javascript, чтобы получить ссылку на этот узел DOM. Если у вас есть ссылка на этот узел DOM, вы должны изменить значение непрозрачности, изменив значение style.opacity узла.

В совокупности это будет выглядеть так: 

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById("ve").innerHTML = '<p style="text-align:center"><h1 id="fadein" style="opacity: 0; transition: opacity 1s"><span style="color:blue">This is  </span><span style="color:red">NOT allowed</span><span style="color:blue">. </span></h1></p>';

  const fadein = document.getElementById("fadein");
  setTimeout(() => {
    fadein.style.opacity = "1";
  }, 0);
});

Причина тайм-аута связана с порядком отображения страницы и порядком выполнения кода javascript.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...