Red Paje Red Paje - 8 months ago 26
Javascript Question

Automatic start time when a link is clicked

I would like to seek your expertise with regards to the coding below:

this is the layout of my browser, so i divided my page into 2

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


below is the code in which i would like to setup the start time automatic where in it will be the same start time in the label.



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





is it possible to have automatic stop as well when i clicked the stop button?

Answer Source
  1. Move the stuff that needs to be set after the page has rendered to an onload
  2. make sure the table is wrapped in correct form tags

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);
}
<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>