Question

我正在尝试为我的网页重新创建终端动画。我尝试用div类改变颜色，但我不相信它正在注册。实现这一目标的最佳方法是什么？非常感谢。

<html>
<head>

<div class="color">
<script type='text/javascript'>
var index = 0;
var text = 

    '<span id="color"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt, nulla at tempus tristique, nisl leo molestie est, ut vestibulum mauris mauris a odio. Sed at massa vitae ipsum venenatis porta. Integer iaculis pretium tempus. Donec viverra sollicitudin velit non gravida. Phasellus sit amet tortor odio. Vivamus lectus nisl, suscipit porttitor bibendum ut, tristique quis dui. Vestibulum non eros leo. Maecenas tincidunt semper turpis, a tristique purus pretium sit amet. Praesent nec neque tortor.Donec suscipit tristique ante quis molestie. Phasellus ac lacus non felis faucibus dictum vitae ac ipsum. Sed pharetra nulla sodales nulla porta imperdiet. Quisque pretium hendrerit laoreet.</span>';


    // Here you can put in the text you want to make it type.
    function type()
{
    document.getElementById('screen').innerHTML += text.charAt(index);
    index += 1;
    var t = setTimeout('type()',100);
    // The time taken for each character here is 100ms. You can change it if you want.
}

{
    document.getElementById("color").style.color = "red"; // red or #ffffff

}

</script>
</div>
</head>


<body onload='type()'>
<!-- And here, you create the container in which you display the typed text -->
<div id='screen'></div>
</body>
</html>

Answer 1

这是一个更新的小提琴：https://jsfiddle.net/zx5qs2qy/2/

我假设您只是尝试设置＆＃39;屏幕＆＃39;如果是这样，请改用css：

<style>
 #screen {
    color:red
 }
</style>

另外，不要在div中包装脚本标签，这没有用处。

如果您真的想使用javascript更新颜色，可以这样做：

function setColor()
{
   //use #screen here, no need for the span in the text
   document.getElementById('screen').style.color = "red";
}

现在调用身体标签上的两个功能：

<body onload='type();setColor()'>

小提琴显示：https://jsfiddle.net/zx5qs2qy/3/

Answer 2

你造型错了。在字符串变量中有一个<span>元素，因此它不会将该元素添加到DOM中，而只是显示该文本。

更改此行...

document.getElementById("color").style.color = "red"; // red or #ffffff

到

document.getElementById("screen").style.color = "red"; // red or #ffffff

并从<span>变量中删除text个元素。

Answer 3

https://jsfiddle.net/zx5qs2qy/4/ 你插入#screen，但造型.color。简单修复！

document.getElementById('insertRed').innerHTML += text.charAt(index);

我将其更改为带有上述ID的p标签。干杯

Answer 4

this你想要实现的目标是什么？

如果是，screen是ID，而不是类，请使用#screen。

如何更改此JavaScript代码的字体颜色？

4 个答案: