2

以下のスクリプトを使用すると、ボタンがクリックされたときにタイプライター効果でテキストを再生できます。しかし、ボタンが再度クリックされたときにスクリプトを一時停止または停止できるコードを変更するにはどうすればよいですか。

HTML

     <div ID="textDestination" class="news"></div>
     <div class="play" id="playbtn"></div>

JavaScript

  var text="I remember the big tree in Mums yard I used to climb when they were drinking. I remember sitting up there crying cause I knew I’d have to get down, and how the look on his face made me want to laugh, how small he looked from up there. I remember he would threaten to throw things at me if I didn't get down. He knew he had no power over me up there, but he also knew eventually I would have to get down. Then he would say I was in for it whether I came down or not. But up there I was untouchable, and the world outside our house held endless possibility."

  var delay=50;
  var currentChar=1;
  var destination="[none]";
  function type()
  {
      //if (document.all)
      {
    var dest=document.getElementById(destination);
    if (dest)// && dest.innerHTML)
    {
        dest.innerHTML=text.substr(0, currentChar)+"_";
        currentChar++;
        if (currentChar>text.length)
        {
            currentChar=1;
            setTimeout("type()", 5000);
        }   
        else
        {
            setTimeout("type()", delay);
        }
         }
     }
 }
 function startTyping(textParam, delayParam, destinationParam)
 {
   text=textParam;
   delay=delayParam;
   currentChar=1;
   destination=destinationParam;
   type();
 }

 $('#playbtn').click(function() {
 javascript:startTyping(text, 50, "textDestination");
 });
4

2 に答える 2

3

いくつかのメモ:

  • コードの可読性を向上させるために一貫したインデントに取り組みます
  • javascript:Javascript コードを実行するときに、関数呼び出しの前に を付ける必要はありません
  • テキスト文字列を setTimout 呼び出しとして評価することは避け、代わりにクロージャを使用してください。
  • 非常に特定のパフォーマンス上の理由がない限り、jQuery と生の DOM 操作を混在させないようにしてください。

http://jsfiddle.net/hhk67/5/

var text = "I remember the big tree in Mums yard I used to climb when they were drinking. I remember sitting up there crying cause I knew I’d have to get down, and how the look on his face made me want to laugh, how small he looked from up there. I remember he would threaten to throw things at me if I didn't get down. He knew he had no power over me up there, but he also knew eventually I would have to get down. Then he would say I was in for it whether I came down or not. But up there I was untouchable, and the world outside our house held endless possibility.";
var delay = 50;
var currentChar = 1;
var destination = "[none]";
var typeTimer = null;
var typing = true;

function type(tick)
{
    var dest = document.getElementById(destination);

    if (!typing) return;

    if (dest)
    {
        dest.innerHTML=text.substr(0, currentChar)+"_";
        currentChar++;

        if (currentChar > text.length) 
        {
            currentChar = 1;
            tick = 5000;
        }

        typeTimer = setTimeout(function() { type(delay); }, tick);
    }
}

function startTyping(textParam, delayParam, destinationParam)
{
    if (currentChar > 1) {
        typing = true;
        return type();
    }

    text=textParam;
    delay=delayParam;
    currentChar=1;
    destination=destinationParam;
    type(delay);
}

function pauseTyping()
{
    typing = false;
}

$('#control').click(function() {
    if ( $(this).hasClass('play') ) {
        startTyping(text, 50, "textDestination");

        $(this)
            .attr('class', 'pause')
            .text('Pause');
    } else {
        pauseTyping();

         $(this)
            .attr('class', 'play')
            .text('Play');
    }
});
于 2013-03-20T00:39:47.470 に答える
0

いくつかの変数を追加し、停止機能と一時停止機能を実装しました。変更したコード ブロックのみを次に示します。

<input type="button" class="pause" id="pausebtn" onclick="stop()" value="Pause" />
<input type="button" class="stop" id="stopbtn" onclick="pause()" value="Stop" />

var stopped=false;
var paused=false;

function type(){
    if(stopped==true){
        return;
    }

....

function startTyping(textParam, delayParam, destinationParam){
    text=textParam;
    delay=delayParam;
    if(paused==true){
        paused=false;
        currentChar=1;
    }

....

function start(){
dest=document.getElementById(destination);
stopped=false
console.log("jhi");
startTyping(text, 50, "textDestination");
}
function pause(){
paused=true;
stopped=true;
}
function stop(){
stopped=true;
}

楽しむ！

于 2013-03-20T01:12:29.307 に答える