Question

我找到了以下代码：

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

问题是文本只适用于我的CSS中的一些属性（用//标记）：

#intro1 {
font-family: 'Press Start 2P', cursive; //OK
font-size: 80px; //OK
display: block; //?
text-align: center; //OK
margin-bottom: auto;
margin-top: auto;
top: 50%;
}

我正在尝试将文本显示在页面的中心，但JavaScript会忽略我的放置。当我直接将文本输入到HTML中的div时，它起了作用，但是当我使用JavaScript做肮脏的工作时，它搞砸了。

另外，如何为动画添加延迟（在间隔后开始）？

请帮帮忙？

Answer 1

我改变了您在type()中呼叫setInterval功能的方式。希望这能回答你的问题。

http://jsfiddle.net/fenderistic/eHGK8/

JS

var index = 0;
var text = 'Hardcode';
// Here you can put in the text you want to make it type.
var f = setTimeout(function () {
    type()
}, 1000);

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

CSS

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
#intro1 {
display: table-cell;
text-align: center;
vertical-align: middle;
font-family:'Press Start 2P', cursive;
font-size: 80px;
}

格式化JS生成的文本？

1 个答案: