点击链接时的自动开始时间

时间:2017-03-11 20:11:45

标签: javascript html

我想在下面的代码中寻求您的专业知识:

这是我的浏览器的布局,所以我把我的页面分成2个

<FRAMESET rows="5%,*" border=0>
    <FRAME SRC="MENU.HTML"> 
    <FRAMESET rows="50%,*">
        <FRAME SRC="" NAME=1>
        <FRAME SRC="" NAME=2>
    </FRAMESET>
</FRAMSET>

下面是我想自动设置开始时间的代码,其中标签中的开始时间相同。

<html>
  <head >
	<title>Start and stop</TITLE>

<script type="text/javascript">
  document.getElementById('date').value = Date();
</script>

<script>function getDateString(){
    var myDate = new Date();
    return padDatePart(myDate.getMonth() + 1) + 
        "/" + padDatePart(myDate.getDate()) + 
        "/" + myDate.getFullYear()+ 
        ' ' + padDatePart(myDate.getHours()) + 
        ":" + padDatePart(myDate.getMinutes()) + 
        ":" + padDatePart(myDate.getSeconds());
}

function padDatePart(part){
    return ('0'+part).slice(-2); 
}
</script>


<script>
function clearFields(formName)
{
      var formElements = formName.elements;
      for(var i=0;i<formElements.length;i++)
      {
            var elementType = formElements[i].type;
            if('text' == elementType){
                  formElements[i].value="";
                                formElements[i].disabled = false;
            }
            else if('select-one' == elementType){
                  formElements[i].selectedIndex = 0;
                  formElements[i].disabled = false;
            }
            else if('select-multiple' == elementType)
            {
                  var multiOptions = formElements[i].options;
                  for(var j=0;j<multiOptions.length;j++)
                  {
                        multiOptions[j].selected = false;
                  }
            }
      }
}
</script>

  </head>
  <form>
  <body BGCOLOR=#FFFF99 SCROLL=NO>
<CENTER>


<table border=0>
<tr>
<td align=center>
	<input onclick="this.form.StartTime.value = getDateString();" type="button" class=button value="   START   " > 
</td>

<td align=center>
	<input onclick="this.form.StopTime.value =getDateString();" type="button" class=button value="    STOP    ">
</td>
<TD COLSPAN=2 ALIGN=CENTER>
	 <input type="reset"  class=button value="   CLEAR   ">
</TD>
</tr>
</table>
<table>
	<TR>
		<TD colspan=2 align=center>
			<input type="text" name="StartTime" size="17" id="date" class=select disabled="disabled">
			| <label id="minutes">00</label>:<label id="seconds">00</label> |
				    <script type="text/javascript">
					        var minutesLabel = document.getElementById("minutes");
					        var secondsLabel = document.getElementById("seconds");
					        var totalSeconds = 0;
					        setInterval(setTime, 1000);

				        function setTime()
					        {
					            ++totalSeconds;
					            secondsLabel.innerHTML = pad(totalSeconds%60);
					            minutesLabel.innerHTML = pad(parseInt(totalSeconds/60));
					        }

				        function pad(val)
					        {
					            var valString = val + "";
					            if(valString.length < 2)
						            {
						                return "0" + valString;
						            }
					            else
						            {
						                return valString;
						            }
					        }
				    </script>
			<input type="text" name="StopTime" size="17" class=select disabled="disabled">
		</TD>
	</TR>
</table>
  </form>
  </body>
</html>
</br></br></html>

当我点击停止按钮时,是否可以自动停止?

1 个答案:

答案 0 :(得分:-1)

  1. 将页面呈现后需要设置的内容移动到onload
  2. 确保表格包装正确的表格标签
  3. &#13;
    &#13;
    function pad(part) {
      return ('0' + part).slice(-2);
    }
    
    function getDateString() {
      var myDate = new Date();
      return pad(myDate.getMonth() + 1) +
        "/" + pad(myDate.getDate()) +
        "/" + myDate.getFullYear() +
        ' ' + pad(myDate.getHours()) +
        ":" + pad(myDate.getMinutes()) +
        ":" + pad(myDate.getSeconds());
    }
    
    
    function clearFields(formName) {
      var formElements = formName.elements;
      for (var i = 0; i < formElements.length; i++) {
        var elementType = formElements[i].type;
        if ('text' == elementType) {
          formElements[i].value = "";
          formElements[i].disabled = false;
        } else if ('select-one' == elementType) {
          formElements[i].selectedIndex = 0;
          formElements[i].disabled = false;
        } else if ('select-multiple' == elementType) {
          var multiOptions = formElements[i].options;
          for (var j = 0; j < multiOptions.length; j++) {
            multiOptions[j].selected = false;
          }
        }
      }
    }
    
    function setTime() {
      ++totalSeconds;
      secondsLabel.innerHTML = pad(totalSeconds % 60);
      minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
    }
    
    
    
    var minutesLabel, secondsLabel, totalSeconds = 0;
    window.onload = function() {
      document.getElementById('date').value = Date();
      minutesLabel = document.getElementById("minutes");
      secondsLabel = document.getElementById("seconds");
      setInterval(setTime, 1000);
    }
    &#13;
    <form>
      <table border=0>
        <tr>
          <td align=center>
            <input onclick="this.form.StartTime.value = getDateString();" type="button" class=button value="   START   ">
          </td>
    
          <td align=center>
            <input onclick="this.form.StopTime.value =getDateString();" type="button" class=button value="    STOP    ">
          </td>
          <TD COLSPAN=2 ALIGN=CENTER>
            <input type="reset" class=button value="   CLEAR   ">
          </TD>
        </tr>
      </table>
      <table>
        <TR>
          <TD colspan=2 align=center>
            <input type="text" name="StartTime" size="17" id="date" class=select disabled="disabled"> | <label id="minutes">00</label>:<label id="seconds">00</label> |
            <input type="text" name="StopTime" size="17" class=select disabled="disabled">
          </TD>
        </TR>
      </table>
    </form>
    &#13;
    &#13;
    &#13;