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はブラウザ側のコードスキャン機能を実装します
背景少し前にブラウザカメラの取得とスキャンコード認識の機能を作りました。その際の知識ポイントと具体的...
Vue2.0でデータの双方向バインディング機能をjsを使って実装する
Object.definePropertyの理解文法：オブジェクト.defineProperty(o...
CSS 評価効果の星の例
何？何のスターコートですか？さて、もっとわかりやすくするために写真を見てみましょう。 よく見ると、パ...
MySQL 5.7.17 無料インストールバージョンの設定方法グラフィックチュートリアル (Windows10)
1. 概要ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージ...
Nginx における accept lock の仕組みと実装の詳細な説明
序文nginx はマルチプロセス モデルを使用します。リクエストが届くと、システムはプロセスをロック...
MySQL 5.7.23 解凍バージョンのインストールチュートリアル（画像とテキスト付き）
毎回インストールチュートリアルを探すのは面倒なので、後で確認できるように手順をバックアップします。解...
MySQL サービス 1067 エラーの解決策: mysql 実行可能ファイルのパスを変更する
今日、MySQLサービス1067エラー問題に遭遇しました。システムアカウントを使用するように設定して...
ローカルサーバーを構築するためのwebpack-dev-serverの実装
目次序文webpack-deb サーバーwebpack-dev-server 起動エラー解決策1解決...
Sysbench の MySQL ベンチマーク プロセスの分析
序文1.ベンチマークは、テスト オブジェクトのクラスの特定のパフォーマンス指標の定量的、再現可能、比...
CSS での配置の使用方法の詳細な研究 (要約)
CSS における位置指定の概要position属性は英語で位置を意味し、 CSSでの主な機能は要素...
JavaScript フレームワーク デザイン パターンの詳細な説明
目次動画最優秀選手ムヴヴムVueのソーススパ mpa要素を作成するクラス要約する動画 Model（模...
Gokudōゲームにおけるフロントエンド知識のまとめ
背景日本語を学び始めた当初は、日本語の50音を覚えるのは簡単ではなく、特にカタカナを覚えるのは困難で...
CSS の境界線を通して三角形と矢印を実装するサンプルコード
1. CSS ボックスモデルボックスには、余白、境界線、パディング、コンテンツが含まれます境界線の接...
Vue の基本 MVVM、テンプレート構文、データバインディング
目次1. Vueの概要Vue公式サイトMVVM アーキテクチャ パターンVue の紹介2. Vueを...
Vueグローバルカスタム命令の実践 モーダルドラッグ
目次背景実装のアイデア成果を達成する背景最近取り組んでいるプロジェクトは、Vue2 で構築されたプロ...