JavaScript でシンプルなタイマーを実装する

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">&nbsp&nbsp&nbsp&nbsp
        <button type="button" id="start">開始</button>
        &nbsp
        <button type="button" id="stop">停止</button>
        &nbsp
        <button type="button" id="reset">リセット</button>
        &nbsp
    </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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue.jsはシンプルなタイマー機能を実装します
  • JSはストップウォッチタイマーを実装します
  • JSはsetIntervalタイマーを使用して10秒間のチャレンジを実装します
  • JavaScriptで見栄えの良いストップウォッチタイマーを実装する
  • JavaScript setInterval() と setTimeout() タイマー
  • jsは組み込みタイマーを実装します
  • JavaScriptタイマーとボタン効果設定の詳細な説明

<<:  MySQL での replace と replace into の使い方の説明

>>:  MySQLインデックスを正しく作成する方法

推薦する

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を構成...