Maison >interface Web >tutoriel HTML >Comment implémenter le code des fonctions de compteur et d'horloge en HTML
Comment implémenter le code des fonctions de compteur et d'horloge en HTML
- 不言original
- 2018-08-30 11:29:512720parcourir
Le contenu de cet article explique comment implémenter le code de fonction du compteur et de l'horloge en HTML. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Dans de nombreuses pages Web, nous verrons des compteurs et des horloges, alors comment pouvons-nous implémenter cette fonction nous-mêmes ?
Parlons d'abord du compteur. La fonction logique du compteur est très simple, c'est-à-dire que la trotteuse incrémente de un toutes les secondes, et elle avance de un toutes les 60. Le code est le suivant :
<!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>De cette façon, un simple compteur est complété.
Code pour la fonction horloge :
<!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>De cette façon, l'horloge est complète !
Recommandations associées :
Comment utiliser la minuterie pour implémenter la fonction de compte à rebours dans js
Effet d'horloge implémenté par jQuery+css (compatible avec chaque navigateur)_jquery
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!