JavaScript 타이밍 이벤트
JavaScript를 사용하면 함수가 호출된 직후가 아니라 설정된 시간 간격 후에 코드를 실행할 수 있습니다. 우리는 이것을 타이밍 이벤트라고 부릅니다.
이 예에서 버튼을 클릭하면 5초 후에 경고 상자가 나타납니다.
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 秒！')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="显示定时的警告框" onClick = "timedMsg()">
</form>
<p>请点击上面的按钮。警告框会在 5 秒后显示。</p>
</body>
</html>이 예의 프로그램은 2초, 4초, 6초의 타이밍을 실행합니다.
<html>
<head>
<script type="text/javascript">
function timedText()
{
var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)
var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000)
var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000)
}
</script>
</head>
<body>
<form>
<input type="button" value="显示计时的文本" onClick="timedText()">
<input type="text" id="txt">
</form>
<p>点击上面的按钮。输入框会显示出已经逝去的时间（2、4、6 秒）。</p>
</body>
</html>이 예에서는 클릭한 후 Start Timing 버튼을 누르면 프로그램은 0부터 초 단위로 카운트를 시작합니다
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
</body>
</html> 이 예에서는 Count 버튼을 클릭한 후 사용자가 입력한 값을 기준으로 카운트다운이 시작되고 Stop 버튼을 클릭하면 타이밍이 중지됩니다
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
c=0;
setTimeout("document.getElementById('txt').value=0",0);
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
</form>
<p>请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时，从 0 开始。点击“停止计时”按钮可以终止计时，并将计数重置为 0。</p>
</body>
</html>A 작은 JavaScript 시계:
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html> JavaScript Timing Events
JavaScript를 사용하면 함수가 호출된 직후가 아니라 설정된 시간 간격 후에 코드를 실행할 수 있습니다. 우리는 이것을 타이밍 이벤트라고 부릅니다.
JavaScript에서 타이밍 이벤트를 사용하는 것은 매우 쉽습니다. 두 가지 주요 메서드는 다음과 같습니다.
setTimeout() 나중에 코드 실행clearTimeout() setTimeout() 취소
setTimeout()
Syntax
var t= setTimeout("javascript 문", 밀리초)
setTimeout() 메서드는 특정 값을 반환합니다. 위의 명령문에서 값은 t라는 변수에 저장됩니다. 이 setTimeout()을 취소하려면 이 변수 이름을 사용하여 지정할 수 있습니다.
setTimeout()의 첫 번째 매개변수는 JavaScript 문이 포함된 문자열입니다. 이는 "alert('5 second!')"와 같은 문일 수도 있고, AlertMsg()"와 같은 함수에 대한 호출일 수도 있습니다.
두 번째 매개 변수는 첫 번째 매개 변수가 실행될 현재 시간으로부터 몇 밀리초가 경과했는지 나타냅니다.
팁: 1000밀리초는 1초와 같습니다.
실행을 중지하는 방법은 무엇입니까?
clearInterval() 메소드는 setInterval() 메소드 실행을 중지하는 데 사용됩니다. (intervalVariable)
window .clearInterval() 메서드는 창 접두어 를 사용하지 않고 직접적으로clearInterval() 함수를 사용할 수 있습니다.clearInterval() 메서드를 사용하려면 타이밍 메서드를 생성할 때 전역 변수를 사용해야 합니다.
myVar=setInterval("javascript function",milliseconds);
그런 다음 ClearInterval() 메서드를 사용하여 실행을 중지할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时钟停止示例</title>
</head>
<body>
<p>页面上显示时钟：</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止时钟</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
clearInterval(myVar);
}
</script>
</body>
</html>
다음 섹션
