![](/img/trans.png)
[英]Typewriter effect in JS (can't pass my string to the typewriter function)
[英]Achieved JS typewriter effect, can't figure out how to make it loop after last array item
我已经达到了我期望的打字机效果。 问题是,当到达数组的最后一项时,循环不会重新开始,这就是我希望弄清楚如何实现的效果。
这是我的笔: http : //codepen.io/marlee/pen/MeYOZd
这是代码:
HTML:
<div class="normalText">Flex allows you to manage information relating to <span id="changeText">customers.</span></div>
CSS:
body {
background: #333;
color: #eee;
font-family: Consolas, monaco, monospace;
}
使用Javascript:
var container = document.getElementById('changeText');
var things = ['investors.','clients.', 'stakeholders.', 'students.', 'properties.'];
var t = -1;
var thing = '';
var message = container.innerHTML;
var mode = 'write';
var delay = 1000;
function updateText(txt) {
container.innerHTML = txt;
}
function tick() {
if(container.innerHTML.length == 0) {
t++;
thing = things[t];
message = '';
mode = 'write';
}
switch(mode) {
case 'write' :
message += thing.slice(0, 1);
thing = thing.substr(1);
updateText(message);
if(thing.length === 0 && t === (things.length - 1)) {
window.clearTimeout(timeout);
return;
}
if(thing.length == 0){
mode = 'delete';
delay = 1500;
} else {
delay = 32 + Math.round(Math.random() * 40);
}
break;
case 'delete' :
message = message.slice(0, -1);
updateText(message);
if(message.length == 0)
{
mode = 'write';
delay = 1500;
} else {
delay = 32 + Math.round(Math.random() * 100);
}
break;
}
timeout = window.setTimeout(tick, delay);
}
var timeout = window.setTimeout(tick, delay);
我改了
您可以在这里查看差异: https : //www.diffnow.com/?report=diqrj
var container = document.getElementById('changeText'); var things = ['investors.','clients.', 'stakeholders.', 'students.', 'properties.']; var t = -1; var thing = ''; var message = container.innerHTML; things.push(message); var mode = 'write'; var delay = 1000; function updateText(txt) { container.innerHTML = txt; } function tick() { if(container.innerHTML.length == 0) { t = (t+1) % things.length; thing = things[t]; message = ''; mode = 'write'; } switch(mode) { case 'write' : message += thing.slice(0, 1); thing = thing.substr(1); updateText(message); if(thing.length == 0){ mode = 'delete'; delay = 1500; } else { delay = 32 + Math.round(Math.random() * 40); } break; case 'delete' : message = message.slice(0, -1); updateText(message); if(message.length == 0) { mode = 'write'; delay = 1500; } else { delay = 32 + Math.round(Math.random() * 100); } break; } timeout = window.setTimeout(tick, delay); } var timeout = window.setTimeout(tick, delay);
body { background: #333; color: #eee; font-family: Consolas, monaco, monospace; }
<div class="normalText">Flex allows you to manage information relating to <span id="changeText">customers.</span></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.