JavaScript タイミング イベント
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>この例では、クリックした後、 [タイミング開始] ボタンをクリックすると、プログラムは 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>この例では、[カウント] ボタンをクリックした後、ユーザーが入力した値に基づいてカウントダウンが開始され、[停止] ボタンをクリックするとタイミングが停止します
<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 タイミング イベント
JavaScript を使用すると、関数が呼び出された直後ではなく、設定された時間間隔の後にコードを実行できます。これをタイミング イベントと呼びます。
JavaScript でタイミング イベントを使用するのは非常に簡単です。主なメソッドは次の 2 つです:
setTimeout() 将来のある時点でコードを実行する clearTimeout() キャンセル setTimeout()
setTimeout()
構文
var t= setTimeout("javascript ステートメント", ミリ秒)
setTimeout() メソッドは特定の値を返します。上記のステートメントでは、値は t という名前の変数に格納されます。このsetTimeout()をキャンセルしたい場合は、この変数名で指定できます。
setTimeout() の最初のパラメータは、JavaScript ステートメントを含む文字列です。このステートメントは、「alert('5 秒!')」のようなもの、または、alertMsg() などの関数の呼び出しである可能性があります。
2 番目のパラメーターは、最初のパラメーターが現在時刻から何ミリ秒後に実行されるかを示します。
ヒント: 1000 ミリ秒は 1 秒に相当します。
clearInterval() メソッドは、setInterval() メソッドの実行を停止するために使用されます。 (intervalVariable)window .clearInterval() メソッドは、ウィンドウ プレフィックス を使用せずに関数 clearInterval() を直接使用できます。
clearInterval() メソッドを使用するには、タイミング メソッドの作成時にグローバル変数を使用する必要があります:
myVar=setInterval("javascript function",milliseconds);
その後、clearInterval() メソッドを使用して実行を停止できます。
りー
