<script language="JavaScript" type="text/javascript">
    var ms = 0;
    var state = 0;
    function startstop()
    {
      if (state == 0)
      {
        state = 1;
        then = new Date();
        then.setTime(then.getTime() - ms);
      }
      else
      {
        state = 0;
        now = new Date();
        ms = now.getTime() - then.getTime();
        document.stpw.time.value = ms;
      }
    }
    function swreset()
    {
      state = 0;
      ms = 0;
      document.stpw.time.value = ms;
    }
    function display() 
    {
      setTimeout("display();", 50);
      if (state == 1)  
      {
        now = new Date();
        ms = now.getTime() - then.getTime();
        document.stpw.time.value = ms;
      }
    }
</script>
<body onload="display()">
<form name="stpw" >
开始计时:
<input type="text" name="time" />
<input type="button" name="ssbutton" value="开始/停止" onclick="startstop()" />
<input type="button" name="reset" value="重置" onclick="swreset()" />
</form>
</body>

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script language="JavaScript" type="text/javascript">
            var ms = 0;
            var state = 0;
            function startstop() {
                if (state == 0) {
                    state = 1;
                    then = new Date();
                    then.setTime(then.getTime() - ms);
                }
                else {
                    state = 0;
                    now = new Date();
                    ms = now.getTime() - then.getTime();
                    document.stpw.time.value = ms;
                }
            }
            function swreset() {
                state = 0;
                ms = 0;
                document.stpw.time.value = ms;
            }
            function display() {
                setTimeout("display();", 50);
                if (state == 1) {
                    now = new Date();
                    // ms = now.getTime() - then.getTime();
                    var hours = now.getHours();
                    var minutes = now.getMinutes();
                    var seconds = now.getSeconds();
                    var time = hours + "时" + minutes + "分" + seconds + "秒";
                    document.stpw.time.value = time;
                }
            }
    </script>
    </head>
    <body onload="display()">
    <form name="stpw" >
    开始计时:
    <input type="text" name="time" />
    <input type="button" name="ssbutton" value="开始/停止" onclick="startstop()" />
    <input type="button" name="reset" value="重置" onclick="swreset()" />
    </form>
    </body></html>是这样吗?
      

  2.   

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    </head>
    <body onload="display()">
    <form name="stpw" >
    <label>
    <span>开始计时:</span>
    <input type="text" name="time" />
    </label>
    <input type="button" name="ssbutton" value="开始/停止" />
    <input type="button" name="reset" value="重置" />
    </form>
    <script>
    var form = document.forms['stpw'],
    startTime = 0,
    timer,
    switcher = false;
    form['ssbutton'].onclick = function(){
    if(switcher){
    switcher = false;
    clearInterval(timer);
    }else{
    switcher = true;
    startTime = startTime ? startTime : new Date().getTime();
    timer = setInterval(function(){
    display(new Date().getTime() - startTime);
    }, 50);
    }
    }
    form['reset'].onclick = function(){
    clearInterval(timer);
    startTime = 0;
    display(0);
    }
    function display(time){
    time = time ? time : 0;
    if(time === 0){
    result = "0";
    }else{
    var hour, minute, second, milisecond, result = '';
    milisecond = time % 1000;
    time = Math.floor(time / 1000);
    second = time % 60;
    time = Math.floor(time / 60);
    minute = time % 60;
    time = Math.floor(time / 60);
    hour = time % 24;
    result = '' + hour + ': ' + minute + ': ' + second + ', '+ milisecond;
    result = result.replace(/^(0: )+/, '');
    }
    form['time'].value = result;
    }
    </script>
    </body>
    </html>
      

  3.   

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <script src="jquery.js"></script>
    </head>
    <body onload="display()">
    <form name="stpw" >
    <label>
    <span>开始计时:</span>
    <input type="text" name="time" />
    </label>
    <input type="button" name="ssbutton" value="开始/停止" />
    <input type="button" name="reset" value="重置" />
    </form>
    <script>
    var form = document.forms['stpw'],
    startTime = 0,
    timer,
    switcher = false;
    form['ssbutton'].onclick = function(){
    if(switcher){
    switcher = false;
    clearInterval(timer);
    }else{
    switcher = true;
    startTime = startTime ? startTime : new Date().getTime();
    timer = setInterval(function(){
    display(new Date().getTime() - startTime);
    }, 50);
    }
    }
    form['reset'].onclick = function(){
    clearInterval(timer);
    startTime = 0;
    display(0);
    }
    function display(time){
    var result = '';
    time = time ? time : 0;
    if(time === 0){
    result = "0";
    }else{
    var hour, minute, second, milisecond;
    milisecond = time % 1000;
    time = Math.floor(time / 1000);
    second = time % 60;
    time = Math.floor(time / 60);
    minute = time % 60;
    time = Math.floor(time / 60);
    hour = time % 24;
    result = '' + hour + ': ' + minute + ': ' + second + ', '+ milisecond;
    result = result.replace(/^(0: )+/, '');
    }
    form['time'].value = result;
    }
    </script>
    </body>
    </html>
      

  4.   

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <script src="jquery.js"></script>
    </head>
    <body>
    <form name="stpw" >
    <label>
    <span>开始计时:</span>
    <input type="text" name="time" value="0" />
    </label>
    <input type="button" name="ssbutton" value="开始/停止" />
    <input type="button" name="reset" value="重置" />
    </form>
    <script>
    var form = document.forms['stpw'],
    timeDisplayer = form['time'],
    startTime = 0,
    timer,
    switcher = false;
    window.onload = function(){
    timeDisplayer.value = "0";
    }
    form['ssbutton'].onclick = function(){
    if(switcher){
    switcher = false;
    clearInterval(timer);
    }else{
    switcher = true;
    startTime = startTime ? startTime : new Date().getTime();
    timer = setInterval(function(){
    display(new Date().getTime() - startTime, timeDisplayer);
    }, 50);
    }
    }
    form['reset'].onclick = function(){
    clearInterval(timer);
    startTime = 0;
    switcher = false;
    display(0, timeDisplayer);
    }
    function display(time, elem){
    var result = '';
    time = time ? time : 0;
    if(time === 0){
    result = "0";
    }else{
    var hour, minute, second, milisecond;
    milisecond = autoFillZero(time % 1000, 2);
    time = Math.floor(time / 1000);
    second = autoFillZero(time % 60, 1);
    time = Math.floor(time / 60);
    minute = autoFillZero(time % 60, 1);
    time = Math.floor(time / 60);
    hour = autoFillZero(time % 24, 1);
    result = hour + ':' + minute + ':' + second + ','+ milisecond;
    result = result.replace(/^(0{2}:)+/, '');
    }
    elem.value = result;
    }
    function autoFillZero(num, length){
    var min = Math.pow(10, length);
    return num < min ? '0' + num : '' + num;
    }
    </script>
    </body>
    </html>
      

  5.   

    <script language="JavaScript" type="text/javascript">
        var ms = 0;
        var state = 0;
        function startstop()
        {
          if (state == 0)
          {
            state = 1;
            then = new Date();
            then.setTime(then.getTime() - ms);
          }
          else
          {
            state = 0;
            now = new Date();
            ms = now.getTime() - then.getTime();
            document.stpw.time.value = ms;
          }
        }
        function swreset()
        {
          state = 0;
          ms = 0;
          document.stpw.time.value = ms;
        }
        function display() 
        {
          setTimeout("display();", 50);
          if (state == 1)  
          {
            now = new Date();
            ms = now.getTime() - then.getTime();
                    var msec = ms % 1000
                    var seconds = Math.floor(ms / 1000);
                    var minutes = Math.floor(seconds/60);
                    var hours = Math.floor(minutes/24);
                    var time = hours % 24 + "时" + minutes % 60 + "分" + seconds % 60 + "秒" + msec + "毫秒";
                    document.stpw.time.value = time;

          }
        }
    </script>
    <body onload="display()">
    <form name="stpw" >
    开始计时:
    <input type="text" name="time" />
    <input type="button" name="ssbutton" value="开始/停止" onclick="startstop()" />
    <input type="button" name="reset" value="重置" onclick="swreset()" />
    </form>
    </body>