JavaScript での setTimeout() の使用方法の詳細な説明

黄舟
リリース: 2017-12-04 10:24:43
オリジナル
1971 人が閲覧しました

JavaScript の setTimeout メソッド は、通常、ページの更新や実行の遅延などに使用されます。しかし、多くの JavaScript 初心者は setTimeout の使い方についてまだよく知りません。 JavaScriptでのsetTimeout()の使い方を詳しく解説!

setTimeout の使用法

まず、メモ帳を開き、次のコードを貼り付けて、エフェクトを実行してみましょう。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1> <font color=blue> haorooms博客示范网页 </font> </h1>
<p> 请等三秒!</p>

<script>
setTimeout("alert(&#39;对不起, haorooms博客要你等候多时&#39;)", 3000 )
</script>

</body> 
</html>
ログイン後にコピー

このページは3秒ほど滞在するとフォトフレームがポップアップします!このケースでは、setTimeout の最も基本的な構文が使用されており、setTimeout は自動的に繰り返されません。

setTimeoutは関数を実行することもでき、繰り返し実行することもできます!別のケースを一緒にやってみましょう:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var x = 0
function countSecond()
{
   x = x+1
  document.haorooms.haoroomsinput.value=x
  setTimeout("countSecond()", 1000)
}
</script>
</head>
<html>
<body>

<form name="haorooms">
   <input type="text" name="haoroomsinput"value="0" size=4 >
</form>

<script>
countSecond()
</script>

</body> </html>
ログイン後にコピー

入力テキスト ボックスの数値が毎秒増加しているのがわかります。したがって、setTimeout は Web ページでタイムジャンプを行うこともできます。

ケースがなければ、学習は速くなりません。haorooms の特定のページに滞在している時間を計算する別の例を一緒に作成しましょう:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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)
}
</script> </head>
<body>
<table> <tr valign=top> <td> 你在haorooms博客中的停留时间是: </td>
<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>
</body>
</html>
ログイン後にコピー

はどうでしょうか。上記の例では、setTimeout() を使用できると思います。全部理解してね!

概要:

上記の説明を通じて、次回は setTimeout を使用する方法について理解できたでしょうか。これがあなたの仕事に役立つことを願っています。

関連する推奨事項:

setTimeout インスタンス

js の setTimeout() 関数

JavaScript 関数 setTime の使用例の詳細な説明パラメーターを使用して出力します

setTimeout より イベント ループ モデルについて話しましょう

以上がJavaScript での setTimeout() の使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!