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 の使い方の説明
推薦する
Vue はボタンをクリックしてファイルをダウンロードする操作コードを実装します (バックエンド Java)
前回の記事では、ボタンをクリックしてファイルをダウンロードするVueの機能を紹介しました。今日は、ボ...
MySQLデータベースのリアルタイムバックアップの知識ポイントを詳しく解説
序文リアルタイムのデータベース バックアップの必要性は非常に一般的です。MySQL 自体はレプリケー...
MySQL空間関数を使用してロケーションパンチインを実装するための完全な手順
序文プロジェクトの要件は、ユーザーの現在の位置が特定の地理的位置範囲内にあるかどうかを判断することで...
Dockerはポートマッピングを設定しますが、ソリューションにアクセスできません
#docker ps チェック、すべてのポートがマップされています コンテナID イメージ コマンド...
Linux の MySQL 設定の変更が有効にならない問題の解決方法
背景AWS EC2 を使用するプロジェクトサービスがあります。セキュリティとパフォーマンスを考慮して...
MySQLで大きなテーブルを正常に削除する方法の詳細な説明
序文テーブルを削除するには、無意識に思い浮かぶコマンドは、DROP TABLE "テーブル...
CSSフロートの特性についての簡単な説明
この記事では、CSS フロートの特徴を紹介します。皆さんと共有し、自分用のメモとして残したいと思いま...
Django+Mysql+Redis+Gunicorn+NginxのDockerデプロイメントの実装
I. はじめにDockerテクノロジーは現在非常に人気があります。コンテナを介してプロジェクト環境を...
ミニプログラムは左スライドのドロワーメニューをネイティブに実装します
目次WXS レスポンス イベントプランAページ構造とスタイルWXS イベントコールバック関数WXS ...
MySQL の集計関数 count の使用法とパフォーマンスの最適化テクニック
この記事の環境はWindows 10、MySQLのバージョンは5.7.12-logです1. 基本的な...
jsはシンプルなショッピングカートモジュールを実装します
この記事の例では、参考までに、シンプルなショッピングカートモジュールを実装するためのjsの具体的なコ...
js を使用して 2 つの HTML ウィンドウ間で通信する方法
シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必...
Vueのログインとログアウトの詳細な説明
目次ログインビジネスプロセスログイン機能の実装要約するまず、エフェクトの実装プロセスを見てみましょう...
77.9K の GitHub リポジトリを持つ Axios プロジェクト: 学ぶ価値のあることは何でしょうか?
目次序文1. Axiosの紹介2. HTTPインターセプターの設計と実装2.1 インターセプターの紹...
Vueはカウンターのシンプルな生成を実装します
この記事では、Vueカウンターの簡単な実装コードを例として紹介します。具体的な内容は以下のとおりです...