Maison >interface Web >js tutoriel >Comment implémenter un simple effet chronomètre en js
Comment implémenter un simple effet chronomètre en js
- 王林avant
- 2020-03-14 11:24:462112parcourir
Description :
Implémentez un chronomètre simple, démarrez le chronométrage lorsque vous cliquez sur le bouton de démarrage, puis le bouton de démarrage se transforme en pause,
Cliquez sur pause pour suspendre le chronométrage, cliquez sur Réinitialiser pour revenir à l'état initial.
Effet :
(Tutoriel recommandé : tutoriel javascript)
Le code est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#showTime
{
width: 300px;
height: 60px;
font-size: 60px;
line-height: 60px;
}
</style>
</head>
<body>
<div>
<div id="showTime">00:00:00</div>
<button id="startBn">启动</button>
<button id="restBn">复位</button>
</div>
<script>
//——————
var time,showTime,startBn,restBn,pauseDate;
//布尔开关
var bool=false;
//暂停的累计时间
var pauseTime=0;
init();
function init() {
showTime=document.getElementById("showTime");
startBn=document.getElementById("startBn");
restBn=document.getElementById("restBn");
startBn.addEventListener("click",clickHandler);//开始按钮 ~ 暂停按钮
restBn.addEventListener("click",clickHandler);//复位按钮
setInterval(animation,16);
}
//转化时间函数
function animation() {
if(!bool) return;
//前时间减去上次开启时间减去暂停累计时间
var times=new Date().getTime()-time-pauseTime;
var minutes=Math.floor(times/60000);//毫秒转化为分钟
var seconds=Math.floor((times-minutes*60000)/1000);//已知分钟
将time减去分钟 除去1000得出 秒
var ms=Math.floor((times-minutes*60000-seconds*1000)/10);//
showTime.innerHTML=
(minutes<10 ? "0" +minutes : minutes)+":"
+(seconds<10 ? "0"+seconds :seconds)+":"
+(ms<10 ? "0"+ms : ms);
}
//点击时的事件
function clickHandler(e) {
e= e || window.event;
if(this===startBn){
bool=!bool;
if(bool){
this.innerHTML="暂停";
//如果我们上一次暂停时间是空，表示没有暂停过，因此，直接返回0
//如果上次的暂停时间是有值得，用当前毫秒数减去上次的毫秒数，这样就会得到暂停时间
pauseTime+=(!pauseDate ? 0 : new Date().getTime()-pauseDate);
if(time) return;
time=new Date().getTime();
return;//是为bool判断跳出
}
this.innerHTML="启动";
pauseDate=new Date().getTime();
return;//是为this是否等于startBn判断跳出
}
startBn.innerHTML="启动";
pauseTime=0;
pauseDate=null;
bool=false;
time=0;
showTime.innerHTML="00:00:00";
}
</script>
</body>
</html>D'autres codes d'effets spéciaux javascript sympas sont disponibles sur : effets spéciaux javascript
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!
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment js détermine-t-il si un objet est un tableau (fonction)Article suivant：Comment js détermine-t-il si un objet est un tableau (fonction)