该问题来自与last time相同的问题。我的网站是在静态域上运行的,因此我希望能够在每个网站上使用此脚本而无需进行重复复制。
它起键入文字效果的作用,我希望能够定义它从网页本身而不是脚本中打印出来的文字。
Javascript
var index = 0;
var text = 'Text';
function type()
{
document.getElementById('screen').innerHTML += text.charAt(index);
index += 1;
var t = setTimeout('type()',100);
}
我尝试摆弄代码,并使用与上一篇文章相同的方法,但似乎无法正常工作。
最佳答案
很好的问题,LMGTFY在过去经常给我一个笑声。我认为您可能会发现以下内容很容易在任何地方乱扔。这只是添加到目标容器的一些属性,以及调用以启动打字机的调用。
在这里,我同时踢4个球只是为了踢球。在此示例中,值得使用forEachNode,而不是使用一些注释行。如果getElementsByClassName的结果是一个真实的数组,则可以只调用该数组具有的.forEach方法。不幸的是,nodeList是相似但不相同的,因此需要这样的功能。我在意识到可能没有它的情况下更清楚地使用了它。无论如何,这是我发现很多方便的功能。我将把它留在那里,以感谢您考虑这样一个有趣的问题。
function forEachNode(nodeList, func) {
var i, n = nodeList.length;
for (i = 0; i < n; i++) {
func(nodeList[i], i, nodeList);
}
}
window.addEventListener('load', mInit, false);
function typeWriter(el) {
var myDelay = el.getAttribute('keyDelay');
if (el.getAttribute('curIndex') == undefined)
el.setAttribute('curIndex', 0);
var curIndex = el.getAttribute('curIndex');
var curStr = el.getAttribute('typewriterdata');
el.innerHTML += curStr.charAt(curIndex);
curIndex++;
el.setAttribute('curIndex', curIndex);
if (curIndex < curStr.length)
setTimeout(callback, myDelay);
else {
if (el.getAttribute('nextline') != undefined) {
var nextTgt = el.getAttribute('nextline');
typeWriter(document.getElementById(nextTgt));
}
}
function callback() {
typeWriter(el);
}
}
function mInit() {
typeWriter(document.getElementById('line1'));
var i, n, elementList;
elementList = document.getElementsByClassName('autoType');
forEachNode(elementList, typeWriter);
// n = elementList.length;
// for (i=0; i<n; i++)
// typeWriter( elementList[i] );
}
.multi {
border: solid 2px #333333;
width: 400px;
}
<body>
<div class='autoType' typewriterdata='Enter this string letter by letter' keydelay='300'></div>
<div class='autoType' typewriterdata='Enter this string letter by letter' keydelay='200'></div>
<div class='autoType' typewriterdata='This is short but slooooow' keydelay='1000'></div>
<div class='autoType' typewriterdata='The rain falls mainly on the plain in Spain' keydelay='100'></div>
<div class='multi'>
<div id='line1' typewriterdata='This is line 1' keydelay='300' nextline='line2'></div>
<div id='line2' typewriterdata='This is line 2' keydelay='300' nextline='line3'></div>
<div id='line3' typewriterdata='This is line 3' keydelay='300' nextline='line4'></div>
<div id='line4' typewriterdata='This is line 4' keydelay='300'></div>
</div>
</body>