html如何實現計數器以及時鐘的功能代碼-html教學-PHP中文網

首頁

web前端

html教學

html如何實現計數器以及時鐘的功能代碼

不言

Aug 30, 2018 am 11:29 AM

時鐘計數器

這篇文章帶給大家的內容是關於html如何實現計數器以及時鐘的功能代碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

在許多的網頁中，我們都會看到計數器以及時鐘，那麼我們怎麼自己實作著種功能呢？

先說計數器，計數器的邏輯功能很簡單，就是秒針每秒加一，逢60進一就可以。程式碼如下：

<!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信箱登陸入口在哪裡

7934

Java教學

1652

CakePHP 教程

1412

Laravel 教程

1303

PHP教程

1250

Related knowledge

iPhone中缺少時鐘應用程式：如何修復 May 03, 2024 pm 09:19 PM

您的手機中缺少時鐘應用程式嗎？日期和時間仍將顯示在iPhone的狀態列上。但是，如果沒有時鐘應用程序，您將無法使用世界時鐘、碼錶、鬧鐘等多項功能。因此，修復時鐘應用程式的缺失應該是您的待辦事項清單的首位。這些解決方案可以幫助您解決此問題。修復1–放置時鐘應用程式如果您錯誤地從主畫面中刪除了時鐘應用程序，您可以將時鐘應用程式放回原位。步驟1–解鎖iPhone並開始向左側滑動，直到到達「應用程式庫」頁面。步驟2–接下來，在搜尋框中搜尋「時鐘」。步驟3–當您在搜尋結果中看到下方的「時鐘」時，請按住它並

如何在 iPhone 上使用多計時器與 iOS 17 Jun 21, 2023 am 08:18 AM

什麼是iOS17上的多計時器？在iOS17中，Apple現在為用戶提供了在iPhone上一次設定多個計時器的能力。這是一個可喜的變化，許多人多年來一直期待的變化。時鐘應用程式在iOS16之前只允許使用者一次設定一個計時器，現在可用於啟動任意數量的計時器，使其成為您一次完成多個任務的理想選擇。您可以在計時器畫面中設定任意數量的計時器。啟動計時器後，所有活動計時器都將在鎖定螢幕介面和通知中心顯示為「即時活動」通知。從這裡，您可以查看計時器關閉、暫停或停止計時器的剩餘時間，而無需打開時鐘應用程式。當您在時鐘

iOS 17：如何在待機模式下變更iPhone時鐘樣式 Sep 10, 2023 pm 09:21 PM

待機是一種鎖定螢幕模式，當iPhone插入充電器並以水平（或橫向）方向定位時啟動。它由三個不同的螢幕組成，其中一個是全螢幕時間顯示。繼續閱讀以了解如何變更時鐘的樣式。 StandBy的第三個畫面顯示各種主題的時間和日期，您可以垂直滑動。某些主題也會顯示其他訊息，例如溫度或下一個鬧鐘。如果您按住任何時鐘，則可以在不同的主題之間切換，包括數位、類比、世界、太陽能和浮動。 Float以可自訂的顏色以大氣泡數字顯示時間，Solar具有更多標準字體，具有不同顏色的太陽耀斑設計，而World則透過突出顯示世界地

如何在 iPhone 上關閉鬧鐘 [2023] Aug 21, 2023 pm 01:25 PM

自從智慧型手機問世以來，它們無疑取代了鬧鐘。如果您擁有iPhone，則可以使用時鐘應用程式在一天中的多個場合輕鬆設定任意數量的鬧鐘。該應用程式可讓您配置鬧鐘時間，提示音，重複的頻率，以及您是否希望使用“貪睡”選項來延遲它們。如果您想關閉已設定的鬧鐘，以下貼文應該可以幫助您停用和刪除iPhone上的常規鬧鐘和喚醒鬧鐘。如何在iPhone上關閉常規鬧鐘預設情況下，當您在時鐘應用程式上添加鬧鐘或要求Siri為您添加鬧鐘時，您實際上是在創建常規鬧鐘。您可以在iPhone上創建任意數量的鬧鐘，並且可以將它們

iOS 17中如何自訂待機顏色 Sep 23, 2023 pm 12:53 PM

Apple在iOS17中提供了一種新的鎖定螢幕模式，稱為待機模式，當您的iPhone插入充電器（有線或無線）並以橫向方向放置在支架上時，該模式會啟動。此模式將透過顯示時鐘、天氣資料、日曆和一些小部件，一目了然地顯示比標準鎖定螢幕更多的資訊。在設定中啟用此功能後，當您的iPhone在充電時橫向放置時，它將自動進入待機模式。如何在iOS17中更改待機顏色待機模式提供了一組三個頁面（小部件、照片和時鐘），您可以透過在螢幕上滑動來回切換。在這些頁面中，只有「時鐘」畫面可讓您自訂螢幕上顯示的顏色，以便您可以

win10電腦時鐘總是不準確怎麼辦_調整win10電腦時間的幾種方法 Mar 27, 2024 pm 05:10 PM

1.先點選開始選單，選擇開始選單裡的設定按鈕。 2、開啟後選擇時間與語言設定。 3.把它換成自動設定時間。 4.你也可以把自動設定時間關掉，選擇自己更改的時間。方法二：1、開啟【其他日期、時間、區域設定】選項。 2、選擇【設定時間和日期】。 3.選擇【Internet時間】，開啟【更改設定選項】。 4.勾選【與Internet時間伺服器同步(S)】，點選【立即更新】，然後點選確定就可以了。

使用Redis實作分散式計數器 May 11, 2023 am 08:06 AM

什麼是分散式計數器？在分散式系統中，多個節點之間需要對共同的狀態進行更新和讀取，而計數器是其中一種應用最廣泛的狀態之一。通俗地講，計數器就是一個變量，每次被訪問時其值就會加1或減1，用於追蹤某個系統進展的指標。而分散式計數器則指的是分散式環境下對計數器進行操作和管理。為什麼要使用Redis實作分散式計數器？隨著分散式運算的普及，分散式系統中的許多細節問題也

如何使用Redis實作分散式計數器 Nov 07, 2023 am 09:02 AM

Redis是一種高效能的快取資料庫，被廣泛應用於Web應用程式中。其中，一個常用的場景是使用Redis實作分散式計數器。在本文中，我們將介紹如何使用Redis實作分散式計數器，並提供具體的程式碼範例。一、什麼是分散式計數器？分散式計數器是一種用於計數的共享資源，其特點在於被多個客戶端同時存取。在傳統的單機環境下，計數器可以透過簡單的變數或檔案來實現。但在分散式環

See all articles

html如何實現計數器以及時鐘的功能代碼

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題