웹 페이지에서 자동 시간 계산을 실현하다

웹 페이지에서 자동 시간 계산을 실현하다

<script>
x=0
y=-1
function countMin( )
{ y=y+1
 document.displayMin.displayBox.value=y
 setTimeout("countMin( )",60000)
}
Function countSec( )
{ x=x+1
z =x%60
 document.displaySec.displayBox.value=z
 setTimeout("countSec( )", 1000)
}
<table>  :
<td> <form name=displayMin>
<input type="text" name="displayBox" value="0" size=4 >
</form></td>
<td> </td>
<td> <form name=displaySec> </td>
<td> <input type="text" name="displayBox" value="0" size=4 >
</form> </td>
<td>  </td> </tr> </table>
<script>
countMin( )
countSec( )
</script>

이 웹 페이지는 두 개의 function입니다. 하나는 점수를 계산하는 데 사용되고 하나는 초를 계산하는 데 사용됩니다. 이것은 시간을 계산하는 방식일 뿐입니다. 그러나 이런 방식은 시간을 정확하게 계산하지 않습니다. z=x%60은 먼저 x/60을 하고 나온 나머지를 z의 값으로 표시합니다. 예를 들어 82초,modulus는 22이기 때문에 문자 상자에 82가 아니라 22를 표시합니다.단위 숫자를 앞에 0, 예를 들어 01, 02, 03 등을 더하려면 다음과 같은 방법을 사용할 수 있다.

functioncountSec( )
{x=x+1
z=x%60
if (z < 10){z= "0"+z}
 document.displaySec.displayBox.value=z
 setTimeout("countSec( )",1000)
}

띄엄띄엄 계수가 필요할 때: 다른 방법으로 설계됩니다:clearTimeout(timeoutID)
여기서 timeoutID는 setTimeout에 설정된 변수 이름입니다.
예:
meter1=setTimeout("count1( )", 1000)



이 방법은 매우 부족하다!왜죠?
하지만 버튼을 눌렀을 때 몇 번 더 눌렀더니 데이터 결과가 정확하지 않은데...
이때: 당신은 플래그로 표시할 수 있습니다.

<script>
x=0
flag=0
function count()
{x=x+1
 document.display.box.value =x
timeoutID=setTimeout("count( )", 1000)
flag=1
}
Function restart( )
{if (flag==0)
{count( )}
}
</script></head>
<input type="text" name="box" value="0" size=4 >
<input type=button value=" "
onClick="clearTimeout(timeoutID); flag=0 " >
<input type=button value=" " onClick="restart()" >

이렇게 하면 위의 문제를 해결할 수 있을 거야..