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 の使い方の説明
推薦する
Ubuntu 18.04 で中国語入力方法を設定する方法
Ubuntuの最新バージョンでは、ユーザーは中国語入力方法を別途ダウンロードする必要がなくなりました...
MySQL 8.0 WITH クエリの詳細
目次MySQL 8 の WITH クエリについて学ぶ1. 例3. 練習するMySQL 8 の WIT...
MySqlエスケープの詳細な使用例
MySQL エスケープエスケープとは、エスケープ文字の本来の意味を意味します。エスケープ文字の目的は...
Vue2 における 12 種類のコンポーネント通信
目次1. 小道具2..同期3.vモデル4.参照5. $emit/v-on 6. $attrs/$li...
MySQL の大きなテーブルで大量のデータを一括削除する方法
質問はhttps://www.zhihu.com/question/440066129/answer...
Nginx でアクセス頻度、ダウンロード速度、同時接続数を制限する方法
1. アクセス頻度、同時接続、ダウンロード速度を制限するために使用されるモジュールと命令の概要ngx...
jQuery を使用して、iframe 下の無効なページ アンカー ポイントの問題を修正する
適用シナリオ: iframe ページにスクロール バーがなく、親ウィンドウにスクロール バーが表示さ...
MySQLのインストールと設定方法のグラフィックチュートリアル（CentOS7）
1. システム環境[root@localhost ホーム]# cat /etc/redhat-re...
MySQL でファイルデータをインポートする際の 1290 エラーの解決方法
エラーシナリオcmd の mysql コマンドを使用して、学生情報テーブルにデータを追加します。デー...
Vueメソッドに基づくシンプルなタイマーの実装
Vueのシンプルなタイマーを参考にしてください。具体的な内容は以下のとおりです原理: setInte...
デザインスキルを向上させる良い方法
いわゆる才能（左脳と右脳）つまり、芸術的な才能があるかどうかは、人間の左脳と右脳の分業によって主に決...
効率化に役立つ 20 の CSS コーディングのヒント (並べ替え)
この記事では、主要な CSS ウェブサイトで推奨されている 20 個の便利なルールとベスト プラクテ...
MySQL でレプリケーション フィルターを動的に変更する方法
MySQLはレプリケーションフィルターを動的に変更します今日遭遇した問題についてお話しします。今日は...
jQueryはマウスドラッグ画像機能を実装します
この例では、jQuery を使用してマウス ドラッグ イメージ機能を実装します。まず、ラッパーを設定...
Mysql マスタースレーブ サービスの実装例を構成する
Mysql マスタースレーブ サービスの実装例を構成する### メインデータベースmy.cnfを構成...