<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计时器</title>
<style type="text/css">
.one{
border: 2px solid;
height: 200px;
width: 400px;
margin: 0 auto;
margin-bottom: 20px;
}
.one p{
width: 300px;
height: 60px;
border: 2px pink solid;
margin: 0 auto;
font-size: 50px;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="one">
<h2>setInterval计时器</h2>
<p id="po"></p>
<button onclick="timeCount()">start</button>
<button onclick="stopCount()">stop</button>
</div>
<div class="one">
<h2>setTimeout计时器</h2>
<p id="pp"></p>
<button onclick="jishi()">start</button>
<button onclick="bujishi()">stop</button>
</div>
<script type="text/javascript">
// setInterval计时器
var po=document.getElementById('po');
var n=0;
var m=0;
var f=0;
var ff=0;
var timert=null;
function timeCount(){
clearInterval(timert);
timert=setInterval(
function(){
n=n+1;
f=n/60;
ff=parseInt(f)
m=n%60;
po.innerHTML=ff+"分"+m;
},1000);
}
function stopCount(){
clearInterval(timert);
}
// setTimeout计时器
var pp=document.getElementById('pp');
var x=0;
var timer=null;
function jishi(){
clearTimeout(timer);
x+=1;
timer=setTimeout("jishi()",1000);
pp.innerHTML=x;
}
function bujishi(){
clearTimeout(timer);
}
</script>
</body>
</html>
js timer ①setInterval②setTimeout
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=325386540&siteId=291194637
Recommended
Ranking