JavaScript でシンプルなタイマーを実装する
|
この記事では、参考までに簡単なタイマーを実装するためのJavaScriptの具体的なコードを紹介します。具体的な内容は次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>タイマー</title>
<スタイル>
.bigDiv {
マージン: 50px 自動;
幅: 200ピクセル;
高さ: 200px;
背景色: ライトスカイブルー;
境界線の半径: 10px;
}
#表示数 {
幅: 200ピクセル;
高さ: 20px;
背景色: オレンジ;
テキストをすべて中央揃えにします。
境界線の半径: 5px;
}
</スタイル>
</head>
<本文>
<div class="bigDiv">
<h2 align="center">タイマー</h2>
<div id="showNum" align="center">
0
</div>
<br>
<br>
<div class="butDiv">    
<button type="button" id="start">開始</button>
 
<button type="button" id="stop">停止</button>
 
<button type="button" id="reset">リセット</button>
 
</div>
</div>
<スクリプト>
// 表示される時間を定義します。let int = null;
/**
* クリックイベントの開始 */
document.getElementById("start").addEventListener('click', 関数() {
（int == null）の場合{
//タイマーを設定する//2ミリ秒ごとに実行する パラメーター1 int = setInterval(startNum, 1000);
}
});
/**
* クリックイベントを停止 */
document.getElementById("stop").addEventListener('click', 関数() {
// タイマーをクリアします。
クリア間隔(int);
整数 = null;
});
/**
* クリックイベントをリセット */
num = 0 とします。
document.getElementById("reset").addEventListener('click', 関数() {
（int == null）の場合{
数値 = 0;
//時間を0に変更する
document.getElementById("showNum").innerHTML = num;
}
});
関数startNum() {
数値++;
// 時間を継続的に変更します document.getElementById("showNum").innerHTML = num;
}
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL での replace と replace into の使い方の説明
推薦する
PHP スケジュールバックアップ MySQL および mysqldump 構文パラメータの詳細
まず、MySQL バックアップ コマンド mysqldump の一般的な操作例をいくつか紹介します。...
mysql order by in の文字順序の詳細な説明 (推奨)
//MySQL ステートメント SELECT * FROM `MyTable` WHERE `id...
@font-face を使用して Web ページに特殊文字を実装する (カスタム フォントを作成する)
数日前、CSS を使用して三角形の矢印を実装する方法について記事を書きました。 目的の効果は達成され...
Linuxで大きなファイルを素早くコピーする方法
データをコピーリモートでデータをコピーする場合、通常は rsync コマンドを使用しますが、小さなフ...
JavaScript初心者がよく犯す間違い
目次序文undefined と null の混同紛らわしい数値の加算と文字列の連結戻り文の改行の問題...
jsは赤い封筒の順序と量を指定するアルゴリズムを実装します
この記事では、指定された赤い封筒の順序と金額を実装するためのjsの具体的なコードを共有します。具体的...
IDEA 2020.3.1 で Tomcat をデプロイし、最初の Web プロジェクトを作成するプロセスの詳細な説明
目次Tomcat の紹介Tomcat の展開Web プロジェクトの作成tomcatの設定プロジェクト...
TypeScript で時間を費やした場所の概要
TS で時間を過ごした場所をいくつか記録します。 (まず、文句を言わせてください。stackover...
MySQL 演算子の具体的な使用法 (and、or、in、not)
目次1. はじめに2. 本文2.1 および演算子2.2 または演算子2.3 オペレーター2.4 no...
よく使われるJavaScript配列メソッド
目次1. フィルター() 2. 各() 3. いくつか() 4. すべて() 5. 減らす() 6....
MySQL ユーザー変数と set ステートメントの例の詳細な説明
目次1 ユーザー変数の概要2 ユーザー変数の定義3 ユーザー変数の使用3.1 セットを通した例3.2...
ミニプログラム録画機能の実装
序文ミニプログラムを開発する過程では、録音機能を実装し、録音を再生し、録音をサーバーにアップロードす...
Js における new 演算子の役割の詳細な説明
序文Js は現在最も一般的に使用されているコード操作言語であり、その中でも new 演算子は特によく...
Nginx Webサーバーのサンプルコードの設定方法の詳細な説明
概要今日は主に、NGINX を Web サーバーとして設定する方法を共有します。内容は次のとおりです...
Win10 は Tsinghua ソースを使用して pytorch-GPU バージョンをすばやくインストールします (推奨)
Cudaがインストールされているかどうかを確認してくださいアナコンダプロンプトに入力nvcc -V...