ホームページ > 記事 > ウェブフロントエンド > JavaScript でカウンターの基本を実装する方法
JavaScript でカウンターの基本を実装する方法
- 黄舟オリジナル
- 2017-10-11 10:18:293488ブラウズ
この記事では主にJavaScriptでカウンタを実装する基本的な方法を詳しく紹介します。 、特定の参照値があり、興味のある友人はそれを参照できます
この記事の例では、参考のためにjs実装カウンターの特定のコードを共有します。具体的な内容は次のとおりです
JavaScriptを使用して、設定された時間間隔の後、関数が呼び出された直後ではなく、コードを実行します。それをタイミングイベントと呼びます。
JavaScript でタイミング イベントを使用するのは簡単です。主なメソッドは次の 2 つです:
setInterval() - 指定されたコードを指定されたミリ秒数で継続的に実行します。
setTimeout() - 指定されたミリ秒間一時停止した後、指定されたコードを実行します
注: setInterval() と setTimeout() は、HTML DOM Window オブジェクトの 2 つのメソッドです。ここでは setTimeout() メソッドのみを紹介します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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() {
//清除计时器
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
</form>
</body>
</html> 効果:
[開始] をクリックするとカウントが 0 から始まり、タイマーを停止するとその時点で一時停止され、もう一度 [開始] をクリックします。累積カウントは継続します ...しかし、このプログラムには小さなバグがあり、タイミングを開始するために連続してクリックすると、タイミングの速度が増加し、タイミングを停止するために一度クリックする必要があります。停止に応じて...
以上がJavaScript でカウンターの基本を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。