javascript - 在两个括号内插入文本 - Javascript

标签 javascript html

我想要有打字机效果,以便我以 {} 开头,并且每 120 毫秒键入一次该单词的每个字母。我几乎用以下代码完成了这一点:

Javascript

<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 秒延迟

关于javascript - 在两个括号内插入文本 - Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29024820/

相关文章:

html - 为什么在移动设备中引导导航栏会缩小

html - 导航按钮下方没有空格

html - CSS 图表 align=right

javascript - 滚动到 View /滚动到顶部

javascript - Ajax 为我的联接表发出帖子请求时出现问题

javascript - Object.prototype.toString.call(currentFruit) === "[object Date]"

html - 在 HTML4 和 HTML5 中嵌入视频

ajax - ASP.NET MVC 4 - Ajax.BeginForm 和 html5

javascript - 如何在 csv 对象数据中插入 header 以使用 d3.js 进行管理

javascript - Vite Vue 3 库构建不隐式包含 dist/style.css