我正在尝试为我的网页重新创建终端动画。我尝试使用 div 类更改颜色,但我不相信它正在注册。实现这一目标的最佳方法是什么?非常感谢。
https://jsfiddle.net/zx5qs2qy/
<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>
最佳答案
这是一个更新的 fiddle :https://jsfiddle.net/zx5qs2qy/2/
我假设您只是想设置“屏幕”的样式,如果是这样,请改用 css:
<style>
#screen {
color:red
}
</style>
此外,不要将 script 标签包装在 div 中,这没有任何用处。
如果你真的想使用 javascript 更新颜色,你可以这样做:
function setColor()
{
//use #screen here, no need for the span in the text
document.getElementById('screen').style.color = "red";
}
现在在你的 body 标签上调用这两个函数:
<body onload='type();setColor()'>
fiddle 显示:https://jsfiddle.net/zx5qs2qy/3/
关于javascript - 如何更改此 JavaScript 代码的字体颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41051116/