html如何完成計(jì)數(shù)器以及時(shí)鐘的技巧代碼
發(fā)表時(shí)間：2023-09-03 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于html如何實(shí)現(xiàn)計(jì)數(shù)器以及時(shí)鐘的功能代碼 ，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。在許多的網(wǎng)頁(yè)中，我們都會(huì)看到計(jì)數(shù)器以及時(shí)鐘，那么我們?cè)趺醋约簩?shí)現(xiàn)著種功能呢？先說(shuō)計(jì)數(shù)器，計(jì)數(shù)器的邏輯功能很簡(jiǎn)單，就是秒針每秒加一，逢60進(jìn)一就可以。代碼如下：&l...
本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于html如何實(shí)現(xiàn)計(jì)數(shù)器以及時(shí)鐘的功能代碼 ，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。
在許多的網(wǎng)頁(yè)中，我們都會(huì)看到計(jì)數(shù)器以及時(shí)鐘，那么我們?cè)趺醋约簩?shí)現(xiàn)著種功能呢？
先說(shuō)計(jì)數(shù)器，計(jì)數(shù)器的邏輯功能很簡(jiǎn)單，就是秒針每秒加一，逢60進(jìn)一就可以。代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div></div>
<script>
var index = 0;
var i=0;
/**
* 對(duì)時(shí)間進(jìn)行預(yù)先處理，逢60進(jìn)一
*/
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;
}
/**
* 將獲得的時(shí)間插入到div的區(qū)域
*/
function show(){
var time = counter();
document.getElementsByTagName("div")[0].innerHTML=time;
}
/**
* 每秒鐘獲得一次時(shí)間，實(shí)現(xiàn)計(jì)數(shù)功能
*/
function set(){
setInterval("show()",1000);
}
show();
set();
</script>
</body>
</html>這樣，一個(gè)簡(jiǎn)單的計(jì)數(shù)器就完成了。
時(shí)鐘功能的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/**
* 向Date類(lèi)中添加獲取當(dāng)前時(shí)間的方法
*/
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>這樣，時(shí)鐘就完成了！
相關(guān)推薦：
js如何使用定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)功能
jQuery+css實(shí)現(xiàn)的時(shí)鐘效果(兼容各瀏覽器)_jquery
以上就是html如何實(shí)現(xiàn)計(jì)數(shù)器以及時(shí)鐘的功能代碼的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
