6

问题与上次相同。我的网站运行在一个静态域上，所以我希望能够在每个站点上使用这个脚本，而不需要制作重复的副本。

它起到打字文本效果的作用，我希望能够定义它从网页本身而不是脚本打印出来的文本。

Javascript

var index = 0;
var text = 'Text';

function type()
{
    document.getElementById('screen').innerHTML += text.charAt(index);
    index += 1;
    var t = setTimeout('type()',100);
}

我试过摆弄代码并使用与我上一篇文章相同的方法，但我似乎无法让它工作。

4

6 回答 6

5

好吧，我不喜欢上面的任何代码。一旦到达输入文本的末尾，您的原始代码也不会停止运行，我不相信任何其他建议的解决方案也不会停止。

这是一个用纯 JS 重写的函数：

function type(i, t, ie, oe) {
    input = document.getElementById(ie).innerHTML;
    document.getElementById(oe).innerHTML += input.charAt(i);
    setTimeout(function(){
        ((i < input.length - 1) ? type(i+1, t, ie, oe) : false);
    }, t);
}

你可以这样称呼它：

type(0, 100, "text", "screen");

参数为：beginning index, speed, input element,output element

您的 HTML 将如下所示：

<div id="screen"></div>
<div id="text" style="display:none">Hello Bobby</div>

只要您相应地更新参数，您就可以将 div 重命名为您喜欢的任何名称。我敢肯定还有一种更简单的方法来编写它，但我最喜欢这种方法。

演示

function type(i, t, ie, oe) {
    input = document.getElementById(ie).innerHTML;
    document.getElementById(oe).innerHTML += input.charAt(i);
    setTimeout(function(){
        ((i < input.length - 1) ? type(i+1, t, ie, oe) : false);
    }, t);
}

type(0, 100, "text", "screen");
<div id="screen"></div>
<div id="text" style="display:none">Hello Bobby</div>

于 2013-11-11T18:19:11.347 回答
3

好问题，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>

于 2013-11-11T18:11:15.367 回答
1

您可以将网页中的文本嵌入到隐藏元素中，如下所示：

HTML

<span id="hiddenText" style="display: none">Text you want to type out.</span>

然后你可以像这样从网页本身获取文本：

Javascript

var text = document.getElementById('hiddenText').innerHTML;

这是您可以看到的 jsfiddle：http: //jsfiddle.net/FMq6d/。这将对您的代码进行最小的更改。

于 2013-11-11T17:43:45.183 回答
1

如果您想定义它打印出的文本，如果我正确理解您的问题，您应该通过参数传递文本。

试着弄乱这个：

var type = function( elem , text , index )
{
    var index = index||0;
    elem.innerHTML += text.charAt(index);
    index++;

    var t = setTimeout(function(){
        type( elem , text , index );
    },100);
}
type( document.getElementById('screen') , 'How\'re You?' );
<p id="screen">Hello, </p>

于 2013-11-11T17:53:22.413 回答
1

2年后：

看看这个很棒的打字和擦除效果以及闪烁的光标 - CodePen

简而言之：

var index = 0;
var text = "The Typing Effect - In a Nutshell";

function type(){
  var screenEl = $('#screen');
  screenEl.html(text.substr(0, index++));

  if (index < text.length) {
    // Feel free to type
    setTimeout('type()', 50);
  } else {
    // Reset and restart.
    index = 0;
    text = '';
  }
};

type();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="screen"></p>

于 2016-06-28T15:51:44.073 回答
1

这是一种使用承诺在按键之间休眠的方法。

这是Github 上的 repo链接，但代码基本上是这样的：

class Typer {

    constructor(typingSpeed, content, output) {

        this.typingSpeed = typingSpeed;
        // Parses a NodeList to a series of chained promises
        this.parseHtml(Array.from(content), output);
    };

    makePromise(node, output) {

        if (node.nodeType == 1) // element 
        {
            // When a new html tag is detected, append it to the document
            return new Promise((resolve) => {
                var tag = $(node.outerHTML.replace(node.innerHTML, ""));
                tag.appendTo(output);
                resolve(tag);
            });

        } else if (node.nodeType == 3) // text
        {
            // When text is detected, create a promise that appends a character
            // and sleeps for a while before adding the next one, and so on...
            return this.type(node, output, 0);
        } else {
            console.warn("Unknown node type");
        }
    }

    parseHtml(nodes, output) {
        return nodes.reduce((previous, current) => previous
            .then(() => this.makePromise(current, output)
                .then((output) => this.parseHtml(Array.from(current.childNodes), output))), Promise.resolve());
    }

    type(node, output, textPosition) {
        var textIncrement = textPosition + 1;

        var substring = node.data.substring(textPosition, textIncrement);

        if (substring !== "") {
            return new Promise(resolve => setTimeout(resolve, this.typingSpeed))
                .then(() => output.append(substring))
                .then(() => this.type(node, output, textIncrement));
        }

        return Promise.resolve(output);
    }
}
于 2017-02-09T12:44:26.083 回答