我想要一个打字机效果,这样我就从{}开始,单词的每个字母每120毫秒输入一次。我几乎用以下代码完成了此操作:
爪哇语
<script type='text/javascript'>
var index = 0;
var text = 'hello'
// 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()',120);
}
</script>
.HTML
<html>
<body onload="type()">
...
<div id='screen'>{</div>
...
</body>
</html>
我的问题是,当单词打字时,没有右大括号。所以在前 120 毫秒之后,它看起来像这样:{h
但我希望它看起来像这样{h}
我该如何解决这个问题?
在这里查看 http://jsfiddle.net/p56awrea/2
<script type='text/javascript'>
var index = 0;
var text = 'hello'
var current = ''
// Here you can put in the text you want to make it type.
function type()
{
document.getElementById('screen').innerHTML = '{'+current+'}';
current+=text.charAt(index);
index += 1;
if(index==text.length+1){
current = '';
index=0;
setTimeout('type()',2000);
} else {
setTimeout('type()',120);
}
}
</script>
<body onload="type()">
...
<div id='screen'>{}</div>
编辑:添加了循环行为之前的 2 秒延迟
将 HTML 更改为以下内容怎么样?
<html>
<body onload="type()">
...
<div>{<span id='screen'></span>}</div>
...
</body>
</html>
我使用的是等效的 HTML 实体而不是原始的大括号字符。
编辑:将 #screen 元素从div 更改为 span,这是一个内联元素
现在,您将始终在插入的文本周围使用左大括号和右大括号。