Question

正如标题所说，我正在尝试进行速度测试阅读计数器，出于某种原因，它总是给我“无趣”，我无法弄清楚原因。控制台不会给出任何错误

HTML

<button class="btn" id="start" onclick="start();">Start Reading</button>
<div id="page1" style="display: block;">text goes here</div>
<button class="btn" id="stop" onclick="stop();">Finished!</button>
<span id="wordValue"></span>
<span id="timeValue"></span>

JAVASCRIPT

jQuery('#stop').click(function(){
jQuery('#timeValue').append(getSeconds());
jQuery('#wordValue').append(Math.round(wordCount('#page1')));
jQuery('#wordValue').append(wpm);
jQuery('#wordValue').append(difference);
});

Stopwatch();

function Stopwatch(){
  var startTime, endTime, instance = this;

  this.start = function (){
    startTime = new Date();
  };

  this.stop = function (){
    endTime = new Date();
  }

  this.clear = function (){
    startTime = null;
    endTime = null;
  }

  this.getSeconds = function(){
    if (!endTime){
    return 0;
    }
    return Math.round((endTime.getTime() - startTime.getTime()) / 1000);
  }

  this.getMinutes = function(){
    return instance.getSeconds() / 60;
  }      
  this.getHours = function(){
    return instance.getSeconds() / 60 / 60;
  }    
  this.getDays = function(){
    return instance.getHours() / 24;
  }   

  this.wordCount = function wordCount(text){
     testWords = (jQuery(text).text().length) / 5;
     return testWords;
  }

    wpm = Math.round(wordCount('#page1') / (getSeconds() / 60));
   difference = Math.round(100*((wpm/250)-1));

    }
 }

Answer 1

它给出无限wpm，因为它在页面加载时被初始化。所以单词计数是正确的，但getSeconds（）总是返回0.我把它与停止按钮放在一起，我想是的。请看一下。

        <button class="btn" id="start" onclick="start();">Start Reading</button>
    <div id="page1" style="display: block;">text goes here
    What is Lorem Ipsum?
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    Why do we use it?
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


    Where does it come from?
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

    Where can I get some?
    There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.



    </div>
    <button class="btn" id="stop" onclick="stop();">Finished!</button><br/>

    <span id="wordValue"></span> words <br/>
    <span id="timeValue"></span> time <br/>
    <span id="wpm"></span> WPM Speed <br/>
    <span id="diff"></span> difference


        <script>
$(document).ready(function() {
           jQuery('#stop').click(function(){

                jQuery('#timeValue').append(getSeconds());
                jQuery('#wordValue').append(Math.round(wordCount('#page1')));
                jQuery('#wpm').append(wpm);
                jQuery('#diff').append(difference);
            });


    Stopwatch();
    function Stopwatch(){
      var startTime, endTime, instance = this;

      this.start = function (){ 
        startTime = new Date();
        alert(startTime);
      };

      this.stop = function (){
        endTime = new Date();

       wpm = Math.round(wordCount('#page1') / (getSeconds() / 60));
       alert(Math.round(wordCount('#page1')));
       alert(getSeconds() / 60);
       difference = Math.round(100*((wpm/250)-1));
      };

      this.clear = function (){
        startTime = null;
        endTime = null;
      };

      this.getSeconds = function(){
        if (!endTime){
        return 0;
        }
        return Math.round((endTime.getTime() - startTime.getTime()) / 1000);
      };

      this.getMinutes = function(){
        return instance.getSeconds() / 60;
      } ;     
      this.getHours = function(){
        return instance.getSeconds() / 60 / 60;
      } ;   
      this.getDays = function(){
        return instance.getHours() / 24;
      } ;  

      this.wordCount = function wordCount(text){
         testWords = (jQuery(text).text().length) / 5;
         return testWords;
      };



        }
     } );
        </script>

Answer 2

代码不起作用的主要原因： wpm 和差异是在你致电Stopwatch时计算的，但你应该只计算这些时钟停止了。当您在调用Stopwatch时执行此操作时，getSeconds()将检测到endTime尚未定义并返回0.当您在分母中使用该结果时，您将得到除以0，其中JavaScript提供无限。

但是你不应该只纠正这个问题，因为还有其他一些问题：

您在this中使用Stopwatch关键字，就好像该函数是构造函数一样，但您从不将它用作构造函数。为此，您应该使用new关键字调用该函数，并将创建的对象分配给变量，您需要访问其变量（start，stop，... ）。正如您现在所做的那样，this只是window的同义词，如果您使用strict mode，JavaScript会抱怨这一点。

因此，您可以删除this前缀，也可以使Stopwatch成为真正的构造函数。第一个选项并不是很好，因为然后您继续在函数内更改全局范围中的变量。这被认为是糟糕的设计。所以我将使用Stopwatch作为构造函数来呈现代码。
您在HTML和JavaScript代码中的 stop 按钮上都有点击处理程序。这也是糟糕的设计，因为它对首先执行的内容产生怀疑。我建议仅通过JavaScript将JavaScript代码绑定到元素，而不是HTML。
您使用jQuery的append附加纯文本。首先，通过总是附加结果，可读性非常差，并且连续的结果将彼此粘附。其次，append适合添加HTML。对于文本，您应该使用text方法。最好将文本的不同部分放在单独的HTML容器中。

这是更正后的代码。评论应澄清变化：

// Use stopwatch as a constructor with `this` being the created object:
var watch = new Stopwatch();

// Bind the event handlers to both the buttons. No more HTML `onclick` attributes.
jQuery('#start').click(watch.start);
jQuery('#stop').click(function(){
  if (watch.getSeconds() === null) {
    alert('you did not start yet!');
    return;
  }
  //Stop the clock
  watch.stop();
  // create wpm and difference here:
  var wpm = Math.round(wordCount('#page1') / (watch.getSeconds() / 60));
  var difference = Math.round(100*((wpm/250)-1));
  // refer to watch's methods, and use text()
  jQuery('#timeValue').text(watch.getSeconds());
  // Make sure to replace the previous result, and give some clarity in the output
  jQuery('#wordValue').text(Math.round(wordCount('#page1')));
  jQuery('#speed').text(wpm);
  jQuery('#difference').text(difference + '%');
});

function Stopwatch(){
  var startTime, endTime, instance = this;

  this.start = function (){
    startTime = new Date();
  };

  this.stop = function (){
    endTime = new Date();
  }

  this.clear = function (){
    startTime = null;
    endTime = null;
  }

  this.getSeconds = function(){
    // return non-numerical value to indicate timer was not started
    if (!startTime){
      return null;
    }
    if (!endTime){
      return 0;
    }
    return Math.round((endTime.getTime() - startTime.getTime()) / 1000);
  }

  this.getMinutes = function(){
    return instance.getSeconds() / 60;
  }      
  this.getHours = function(){
    return instance.getSeconds() / 60 / 60;
  }    
  this.getDays = function(){
    return instance.getHours() / 24;
  }   
}

// create separate function that has little to do with the stopwatch:
function wordCount(text){
  testWords = (jQuery(text).text().length) / 5;
  return testWords;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" id="start" >Start Reading</button>
<div id="page1" style="display: block;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<button class="btn" id="stop" >Finished!</button><br>
Words: <span id="wordValue"></span><br>
Speed: <span id="speed"></span><br>
Difference: <span id="difference"></span><br>
Seconds: <span id="timeValue"></span><br>

速度测试读数每秒计算单词

2 个答案: