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 の使い方の説明
推薦する
Docker プライマリ ネットワーク ポート マッピング構成
ポートマッピングDocker コンテナを起動する前にポート マッピングを行わないと、コンテナ外部のネ...
ubuntu20.04 上の CLion2020.1.3 での ROS のインストールと設定の詳細な説明
1. CLionをダウンロード、インストール、アクティベートするオンラインで提供されるチュートリアル...
jQueryはネストされたタブ機能を実装します
この記事では、ネストされたタブ機能を実装するためのjQueryの具体的なコードを参考までに紹介します...
jQueryは要素を追加した後に元のイベントが実行されない問題を解決します
まずエラーコードを見てみましょう。 html: <テーブルボーダー="1"...
ウェブのさまざまなフロントエンド印刷方法: CSS はウェブページの印刷スタイルを制御します
CSS は Web ページの印刷スタイルを制御します。 CSS を使用して印刷スタイルを制御します。...
MYSQL 文字関数を使用してデータをフィルタリングすることに関する質問
問題の説明:構造：テストには2つのフィールドがあります。これらは col1 と col2 で、どちら...
純粋な CSS 流星群の背景サンプルコード
GitHubアドレス、気に入ったらスターを付けてくださいプラグインのプレビューチュートリアルコード表...
Zabbix パスワードをリセットする方法 (ワンステップ)
問題の説明長い間アカウントパスワードを入力して Zabbix にログインしていないため、管理者パスワ...
ボタンをクリックした後のCSS読み込み効果を実現する
自社製品にクリック後1～2秒待機時間があるボタン（確認メールを送信する）があるため、クリック後の1～...
ウェブページ入力ボックスのスタイルトリガー効果
<br />この例では、主に onblur と onFocus という 2 つのパラメー...
Linux環境変数の設定に関する完全なガイド
Linux環境変数の設定ソフトウェアのインストールをカスタマイズする場合、多くの場合、環境変数を設定...
mysql5.7.22 ダウンロードプロセス図
1. 公式ウェブサイト www.mysql.com にアクセスし、ダウンロードを選択します。 2. ...
ラベルタグを使用してテキストをクリックしてラジオボタンを選択します
<label> タグは、入力要素のラベル (タグ) を定義します。ラベル要素はユーザーに...
MySQLデータベースに中国語の文字を保存するときに発生するエラーを解決する方法を教えます
目次1. 遭遇した問題2. 問題を分析する3. 本当の問題4. 解決策5. ソリューション効果1. ...
親要素に対する CSS 子要素の配置の実装
解決親要素に position:relative を追加します。子要素に position:abso...