JavaScript タイミング イベント
JavaScript タイミング イベント
JavaScript を使用すると、関數(shù)が呼び出された直後ではなく、設(shè)定された時(shí)間間隔の後にコードを?qū)g行できます。これをタイミング イベントと呼びます。
この例のボタンをクリックすると、5 秒後に警告ボックスが表示されます:
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 秒！')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="顯示定時(shí)的警告框" onClick = "timedMsg()">
</form>
<p>請點(diǎn)擊上面的按鈕。警告框會(huì)在 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="顯示計(jì)時(shí)的文本" onClick="timedText()">
<input type="text" id="txt">
</form>
<p>點(diǎn)擊上面的按鈕。輸入框會(huì)顯示出已經(jīng)逝去的時(shí)間（2、4、6 秒）。</p>
</body>
</html>この例では、クリックした後、 [タイミング開始] ボタンをクリックすると、プログラムは 0 から秒?yún)g位でカウントを開始します
<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="開始計(jì)時(shí)！" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>請點(diǎn)擊上面的按鈕。輸入框會(huì)從 0 開始一直進(jìn)行計(jì)時(shí)。</p>
</body>
</html>この例では、[カウント] ボタンをクリックした後、ユーザーが入力した値に基づいてカウントダウンが開始され、[停止] ボタンをクリックするとタイミングが停止します
<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="開始計(jì)時(shí)！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止計(jì)時(shí)！" onClick="stopCount()">
</form>
<p>請點(diǎn)擊上面的“開始計(jì)時(shí)”按鈕來啟動(dòng)計(jì)時(shí)器。輸入框會(huì)一直進(jìn)行計(jì)時(shí)，從 0 開始。點(diǎn)擊“停止計(jì)時(shí)”按鈕可以終止計(jì)時(shí)，并將計(jì)數(shù)重置為 0。</p>
</body>
</html>A小さな JavaScript 時(shí)計(jì):
<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 タイミング イベント
JavaScript を使用すると、関數(shù)が呼び出された直後ではなく、設(shè)定された時(shí)間間隔の後にコードを?qū)g行できます。これをタイミング イベントと呼びます。
JavaScript でタイミング イベントを使用するのは非常に簡単です。主なメソッドは次の 2 つです:
setTimeout() 將來のある時(shí)點(diǎn)でコードを?qū)g行する clearTimeout() キャンセル setTimeout()
setTimeout()
構(gòu)文
var t= setTimeout("javascript ステートメント", ミリ秒)
setTimeout() メソッドは特定の値を返します。上記のステートメントでは、値は t という名前の変數(shù)に格納されます。このsetTimeout()をキャンセルしたい場合は、この変數(shù)名で指定できます。
setTimeout() の最初のパラメータは、JavaScript ステートメントを含む文字列です。このステートメントは、「alert('5 秒!')」のようなもの、または、alertMsg() などの関數(shù)の呼び出しである可能性があります。
2 番目のパラメーターは、最初のパラメーターが現(xiàn)在時(shí)刻から何ミリ秒後に実行されるかを示します。
ヒント: 1000 ミリ秒は 1 秒に相當(dāng)します。
clearInterval() メソッドは、setInterval() メソッドの実行を停止するために使用されます。 (intervalVariable)window .clearInterval() メソッドは、ウィンドウ プレフィックス を使用せずに関數(shù) clearInterval() を直接使用できます。
clearInterval() メソッドを使用するには、タイミング メソッドの作成時(shí)にグローバル変數(shù)を使用する必要があります:
myVar=setInterval("javascript function",milliseconds);
その後、clearInterval() メソッドを使用して実行を停止できます。
りー
