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 回答