6

問題は前回と同じ問題から発生します。私の Web サイトは静的ドメインで運営されているため、複製コピーを作成せずに各サイトでこのスクリプトを使用できるようにしたいと考えています。

これはタイピング テキスト効果として機能します。スクリプトではなく、Web ページ自体から出力されるテキストを定義できるようにしたいと考えています。

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 に答える
1

これは、キーを押す間にスリープするための約束を使用したアプローチです。

ここに Github のリポジトリへのリンクがありますが、コードは基本的に次のとおりです。

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 に答える
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

次のように、Web ページ自体の非表示要素にテキストを埋め込むことができます。

HTML

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

次に、次のように Web ページ自体からテキストを取得できます。

Javascript

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

これがあなたが見ることができるjsfiddleです: http://jsfiddle.net/FMq6d/ . これにより、コードに最小限の変更が加えられます。

于 2013-11-11T17:43:45.183 に答える