我正在研究一种CSS动画类型的东西，需要在HTML文本框中显示文本，就像有人在键入文本一样，但实际上没有人在输入任何文本。到目前为止，我有：
<html>
<head><style>
input, input:focus {
border:none;
}
input {
animation: blink-empty 1s infinite;
border-left: transparent solid 1px;
margin:5px
}
@keyframes blink-empty {
50% {border-left: 1px solid #333;}
}
</style></head>
<body>
<input type="text" value="" id="Box1"/>
<script type="text/javascript">
window.onload = function() {
document.getElementById("Box1").focus();
document.getElementById("Box1").value= ("Text in the textbox");
};
</script>
</body>
</html>
我希望希望像输入用户一样，逐个字符显示“文本框中的文本”值，每个字符之间要间隔一段时间。所以我的问题是有人知道在js中计时和追加列表的方法吗？谢谢！
您可以使用setTimeout并排队将字符写入文本框。
window.onload = function() {
var box = document.getElementById("Box1"),
text = "Text in the textbox";
document.getElementById("Box1").focus();
for (var i = 0, l = text.length; i < l; i++) {
setTimeout(function(i) {
box.value = text.substring(0, i + 1);
}.bind(this, i), i * 200);
}
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句