HTMLでカウンターとクロック関数のコードを実装する方法-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLでカウンターとクロック関数のコードを実装する方法

不言

Aug 30, 2018 am 11:29 AM

時計カウンター

この記事の内容は、HTML でのカウンターとクロック関数のコードの実装方法についてです。必要な方は参考にしていただければ幸いです。

多くの Web ページではカウンターや時計が表示されますが、この機能を自分で実装するにはどうすればよいでしょうか?

まずカウンターについて話しましょう。カウンターの論理機能は非常に単純です。つまり、秒針は 1 秒ごとに 1 つずつ増え、60 ごとに 1 つ進みます。コードは以下の通りです:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div></div>
        <script>
            var index = 0;
            var i=0;
            
            /**
             * 对时间进行预先处理，逢60进一
             */
            function counter(){
                second = index;
                minute=i;
                index++;
                if(second==60){
                    second=0;
                    i++;
                    index=0;
                }
                if(second<10){
                    second = "0"+second;
                }
                if(minute<10){
                    minute="0"+minute;
                }
                return time = minute +":"+second;
            }
            
            /**
             * 将获得的时间插入到div的区域
             */
            function show(){
                var time = counter();
                document.getElementsByTagName("div")[0].innerHTML=time;
            }
            
            /**
             * 每秒钟获得一次时间，实现计数功能
             */
            function set(){
                setInterval("show()",1000);
            }
            
            show();
            set();
        </script>
    </body>
</html>

ログイン後にコピー

このようにして、簡単なカウンターが完成します。

時計関数のコード:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            /**
             * 向Date类中添加获取当前时间的方法
             */
            Date.prototype.currentTime = function(){
                var year = this.getFullYear();
                var month = this.getMonth()+1;
                var day = this.getDate();
                var week = this.getDay();
                week = "星期"+"日一二三四五六".charAt(week);
                month = month<10 ? "0"+month : month;
                day = day < 10 ? "0"+day : day;
                var hour = this.getHours();
                var second = this.getSeconds();
                var minute = this.getMinutes();
                hour = hour<10 ? "0"+hour : hour;
                second = second < 10 ? "0"+second : second;
                minute = minute < 10 ? "0"+minute : minute;
                return year+"-"+month+"-"+day+" "+week+" "+hour+":"+minute+":"+second;
            }
            
            function showTime(){
                var time = new Date().currentTime();
                document.getElementById("show").innerHTML = time;
            }
            
            function setTime(){
                showTime();
                setInterval("showTime()",1000);
            }
            window.onload = function(){
                setTime();
            }
            
        </script>
    </head>
    <body>
        <span id="show"></span>
        
    </body>
</html>

ログイン後にコピー

以上で、時計が完成しました。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7554

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

iPhoneに時計アプリがない：それを修正する方法 May 03, 2024 pm 09:19 PM

携帯電話に時計アプリがありませんか?日付と時刻は iPhone のステータスバーに引き続き表示されます。ただし、時計アプリがないと、世界時計、ストップウォッチ、目覚まし時計、その他多くの機能を使用できません。したがって、見つからない時計アプリを修正することは、やるべきことリストの一番上に置く必要があります。これらの解決策は、この問題の解決に役立ちます。解決策 1 – 時計アプリを配置する誤って時計アプリをホーム画面から削除した場合は、時計アプリを元の場所に戻すことができます。ステップ 1 – iPhone のロックを解除し、App ライブラリページに到達するまで左にスワイプを開始します。ステップ 2 – 次に、検索ボックスで「時計」を検索します。ステップ 3 – 検索結果に以下の「時計」が表示されたら、それを長押しして、

iOS 17を搭載したiPhoneで複数のタイマーを使用する方法 Jun 21, 2023 am 08:18 AM

iOS17のマルチタイマーとは何ですか？ iOS17 では、Apple はユーザーに iPhone で複数のタイマーを一度に設定できる機能を提供します。これは歓迎すべき変化であり、多くの人が何年も待ち望んでいたものです。 iOS 16 より前では、時計アプリはユーザーが一度に 1 つのタイマーしか設定できませんでしたが、現在は任意の数のタイマーをアクティブにするために使用できるため、複数のタスクを一度に完了するのに最適です。タイマー画面ではタイマーをいくつでも設定できます。タイマーが開始されると、すべてのアクティブなタイマーがロック画面と通知センターに「ライブアクティビティ」通知として表示されます。ここから、時計アプリを開かずに、タイマーがオフになるまでの残り時間を表示したり、タイマーを一時停止したり、停止したりできます。あなたが時計をしているとき

iOS 17: スタンバイモードでiPhoneの時計スタイルを変更する方法 Sep 10, 2023 pm 09:21 PM

スタンバイは、iPhone が充電器に接続され、水平 (または横) 向きになっているときにアクティブになるロック画面モードです。これは 3 つの異なる画面で構成されており、そのうちの 1 つは全画面表示されます。時計のスタイルを変更する方法については、この記事を読んでください。 StandBy の 3 番目の画面には、垂直にスワイプできるさまざまなテーマで時刻と日付が表示されます。一部のテーマでは、温度や次のアラームなどの追加情報も表示されます。時計を押し続けると、デジタル、アナログ、ワールド、ソーラー、フローティングなどのさまざまなテーマを切り替えることができます。 Float はカスタマイズ可能な色の大きなバブル数字で時間を表示します。Solar はさまざまな色の太陽フレアのデザインを備えたより標準的なフォントを持ち、World は世界を強調表示して表示します。

iPhone でアラームをオフにする方法 [2023] Aug 21, 2023 pm 01:25 PM

スマートフォンの出現以来、スマートフォンが目覚まし時計に取って代わられたのは間違いありません。 iPhone をお持ちの場合は、時計アプリを使用して、1 日を通して複数の機会にアラームを簡単に設定できます。このアプリでは、アラームの時間、トーン、繰り返しの頻度、およびスヌーズオプションを使用してアラームを遅らせるかどうかを設定できます。設定したアラームをオフにしたい場合は、次の投稿を参考に iPhone の定期アラームと目覚ましアラームを無効にして削除することができます。 iPhone で通常のアラームをオフにする方法デフォルトでは、時計アプリにアラームを追加するか、Siri にアラームの追加を依頼すると、実際には通常のアラームが作成されます。 iPhone に目覚まし時計を好きなだけ作成して配置できます

iOS 17で待ち受けカラーをカスタマイズする方法 Sep 23, 2023 pm 12:53 PM

Apple は、iOS 17 でスタンバイモードと呼ばれる新しいロック画面モードを提供しています。このモードは、iPhone が充電器 (有線またはワイヤレス) に接続され、横向きのスタンドに置かれたときにアクティブになります。このモードでは、時計、天気データ、カレンダー、および一部のウィジェットが表示されるため、標準のロック画面よりも多くの情報が一目でわかります。設定でこの機能を有効にすると、充電中に iPhone を横向きに置くと、自動的にスタンバイモードになります。 iOS 17 でスタンバイカラーを変更する方法スタンバイモードでは、画面をスワイプすることで前後に切り替えることができる 3 つのページ (ウィジェット、写真、時計) のセットが提供されます。これらのページのうち、時計画面のみ、画面に表示される色をカスタマイズできます。

win10 コンピューターの時計が常に不正確な場合はどうすればよいですか? win10 コンピューターの時間を調整するいくつかの方法 Mar 27, 2024 pm 05:10 PM

1. まず、[スタート] メニューをクリックし、[スタート] メニューの [設定] ボタンを選択します。 2. 開いたら、時間と言語の設定を選択します。 3. 時刻を自動設定するように変更します。 4. 自動時刻設定をオフにして、変更したい時刻を選択することもできます。方法 2: 1. [その他の日付、時刻、地域の設定] オプションを開きます。 2. [日時を設定する]を選択します。 3. [インターネット時刻]を選択し、[設定オプションの変更]を開きます。 4. [インターネットタイムサーバーと同期する(S)]にチェックを入れ、[今すぐ更新]をクリックし、[OK]をクリックします。

Redis を使用した分散カウンターの実装 May 11, 2023 am 08:06 AM

分散カウンターとは何ですか?分散システムでは、複数のノードが共通の状態を更新および読み取る必要があり、カウンタは最も広く使用されている状態の 1 つです。カウンタとは、平たく言えば、アクセスされるたびに値が1ずつ増加または減少する変数のことで、あるシステムの進行状況を追跡するために使用される指標です。分散カウンタとは、分散環境におけるカウンタの運用および管理を指します。分散カウンターを実装するために Redis を使用する理由は何ですか?分散コンピューティングの普及に伴い、分散システムにおける多くの詳細な問題も発生しています。

TikTokラベルの後ろに時計を設定するにはどうすればよいですか?トラフィックを集めるためにタグを設定するにはどうすればよいですか? Mar 25, 2024 pm 05:21 PM

世界で最も人気のあるショートビデオプラットフォームの 1 つである Douyin の強力な機能と豊富なゲームプレイにより、ユーザーはやめられなくなります。 Douyin では、作品にタグを追加して露出を増やすことができ、タグの後ろにある時計がタグの下のコンテンツの更新時間を知らせます。では、Douyin ラベルの後ろに時計を設定するにはどうすればよいでしょうか?この記事では、Douyin のタグと時計の設定方法、およびタグを介してトラフィックを促進する方法を詳しく紹介します。 1. Douyin ラベルの後ろに時計を設定するにはどうすればよいですか? 1. Douyin を開き、「作成」ボタンをクリックしてビデオ編集ページに入ります。 2.素材を選択したら「次へ」をクリックして作品公開ページに入ります。 3. 作品公開ページで作品名を入力し、「タグを追加」をクリックします。 4. ラベルページで、追加するラベルの名前を入力します。

See all articles

HTMLでカウンターとクロック関数のコードを実装する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック