时间戳

首页 > 解决方案 > 我如何为 innerHTML 设置动画

javascript - 我如何为 innerHTML 设置动画

问题描述

我正在寻找动画文本，“这是不允许的”下面。

 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>';

不幸的是，我的情况是我必须在 java 脚本中使用 innerHTML。没有 HTML 页面。java 脚本动态生成 HTML，因此我无法访问 HTML 页面。我想为文本动画淡入或一些简单的反弹。因为它是一个 javascript 文件，所以我无权访问 css 文件（或者我错了吗？）。我正在寻找更少的代码和非常简单的机制。一个想法是我可以通过复制粘贴显示 innerHTML 来模拟闪烁，将其设置为“”，然后每 1 秒再次显示一次。有什么优雅的方法吗？我不能使用像 jQuery 这样的任何 javascript 框架。

注意*：我复制粘贴的代码将值分配给innerHTML，并将其设置为“”每2秒，闪烁效果没有发生。所以这个选项被排除了，我猜。我是具有丰富后端经验的 UI nube :(

编辑** 我决定选择@JoshB 的答案。它可以工作并且更清洁。HTML 标签和动画是明确分开的。我的目标是患有某些疾病的人。我是一个 0/​​10，我想要更简单的愚蠢解决方案。谢谢你的帮助。

标签： javascripthtml

解决方案

实际上，您可以通过 JavaScript 中的 DOM CSS 更改文本的外观。我决定最简单的方法是创建一个循环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函数中的第二个参数进行修改。我希望这可以帮助你解决你的问题！

推荐阅读