溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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>這樣，時鐘就完成了！
以上是html實現計數器以及時鐘的方法的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
