Question

我在DOM上为4个元素创建活动脚本时遇到问题。我不能使用JQuery，必须用纯JavaScript编写 - 它是学校的实践...... 1.我做的计数器工作得很好但是在下一步我必须将html网站分成4部分，任何部分都必须有他的计数器...所以我必须使用对象的javascript并且那里是合乎逻辑的是问题...... 2.任何时候当我尝试创造4对象的最后一个，摧毁另一个。 3.一般不起作用，我不知道为什么。

有代码：

<pre><!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
        <title>Example #6</title>
    <script>
      function T(div){
        var millis = 0;
        var sec = 0;
        var stopTime=0;
        var totalTime =0;
        var temp = 0;
        var startTime=0;
        var work = false;
          setStopTime = function(){
            stopTime = (new Date()).getTime() + 3000;
          }
          function setValue(value) {
            millis = Math.floor ( value % 1000 );
            value = Math.floor( value / 1000 );
            sec = Math.floor ( value % 60 );
            value = Math.floor( value / 60 );
            if( value < 10 ) { value="0" + value;
            if( sec < 10 ) { sec = "0" + sec; }
            else if( millis < 100 ) { millis = "00" + millis; }
            }
          document.getElementById(div).innerHTML = value + ":" + sec +"." + millis;
          }
          go2 = function() {
            if ( work == true ) return;
            work = true;
            document.getElementById(div).style.backgroundColor="red";
            var currentTime = (new Date()).getTime();
            startTime = currentTime;
            var counter = setInterval(function() {
          if(currentTime >= stopTime){
          document.getElementById(div).style.backgroundColor="";
          clearInterval(counter);
          totalTime+= stopTime - startTime;
          work = false;
          setValue(totalTime);
          return;
          }
          temp = currentTime - startTime;
          setValue(temp+totalTime);
          currentTime = (new Date()).getTime();
          }, 1);
        }
     addEventListener("mousemove",  function() {setStopTime();go2();});
     addEventListener("keydown",  function() {setStopTime();go2();});
    }


    var obj1 = new T('obj1');
    var obj2 = new T('obj2');
    var obj3 = new T('obj3');
    var obj4 = new T('obj4');



  </script>
    </head>
  <body>

      <div id="obj1"><p>counter1</p></div>
      <div id="obj2"><p>counter2</p></div>
      <div id="obj3"><p>counter3</p></div>
      <div id="obj4"><p>counter4</p></div>

  </body>
</html></pre>

Answer 1

go2和setStopTime必须是本地的。

var setStopTime = function(){...
var go2 = function() {

没有jquery的纯javascript中的活动计数器

1 个答案: