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

最後更新：2018-08-30 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本篇文章給大家帶來的內容是關於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>

這樣，時鐘就完成了！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More