该问题来自与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>

09-17 06:04