자바스크립트 타이밍 이벤트

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>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p>点击第一个按钮等待3秒后出现"Hello"弹框。</p> <p>点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。</p> <button onclick="myFunction()">点我</button> <button onclick="myStopFunction()">停止弹框</button> <script> var myVar; function myFunction(){ myVar=setTimeout(function(){alert("Hello")},3000); } function myStopFunction(){ clearTimeout(myVar); } </script> </body> </html>

제출하다 코드 재설정

자동운전