计时器的两种原生写法
方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计时器</title>
<style type="text/css">
*{margin:0;padding:0;}
.count{
width:600px;
height:320px;
margin:100px auto;
background: pink;
text-align: center;
box-shadow: 7px 7px 10px #999;
}
.bt{
width:200px;
height:80px;
line-height:80px;
margin:0 auto;
font-size:48px;
}
#txt{
width:400px;
height:80px;
margin:10px auto;
text-align: center;
padding-top:40px;
font-size:42px;
background: white;
font-family: "微软雅黑";
}
#btn1{
width:100px;
height:30px;
margin-top: 20px;
margin-right:40px;
}
#btn2{
width:100px;
height:30px;
margin-top: 20px;
margin-right:40px;
}
#btn3{
width:100px;
height:30px;
margin-top: 20px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="count">
<h1 class="bt">倒计时</h1>
<div id ="txt">00:10:30:00</div>
<input type="button" value="开始倒计时" id="btn1" />
<input type="button" value="结束倒计时" id="btn2" />
<input type="button" value="重新倒计时" id="btn3" />
</div>
</body>
</html>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var txt = document.getElementById("txt");
//console.log(txt.innerText);
var timer = null;
var arr = [];
var str = txt.innerText;
//console.log(str);
arr = str.split(':');
//console.log(txt.innerHTML);
btn1.onclick = function(){
timer = setInterval(function(){
if(arr[3]!=00){
arr[3]--;
if(arr[3]<10){
arr[3]="0"+arr[3];
}
txt.innerHTML = arr[0]+":"+arr[1]+":"+arr[2]+":"+arr[3];
}else if(arr[3]==00&&arr[2]!=00){
arr[3]=99;
arr[2]--;
if(arr[2]<10){
arr[2]="0"+arr[2];
}
txt.innerHTML = arr[0]+":"+arr[1]+":"+arr[2]+":"+arr[3];
}else if(arr[3]==00&&arr[2]==00&&arr[1]!=00){
arr[3]=99;
arr[2]=59;
arr[1]--;
if(arr[1]<10){
arr[1]="0"+arr[1];
}
txt.innerHTML = arr[0]+":"+arr[1]+":"+arr[2]+":"+arr[3];
}
},10)
}
btn2.onclick = function(){
clearInterval(timer);
}
btn3.onclick = function(){
txt.innerHTML = "00:10:30:00";
}
</script>
方法二：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计时器</title>
<style type="text/css">
*{margin:0;padding:0;}
.count{
width:600px;
height:320px;
margin:100px auto;
background: pink;
text-align: center;
box-shadow: 7px 7px 10px #999;
}
.bt{
width:200px;
height:80px;
line-height:80px;
margin:0 auto;
font-size:48px;
}
#txt{
width:400px;
height:80px;
margin:10px auto;
text-align: center;
padding-top:40px;
font-size:42px;
background: white;
font-family: "微软雅黑";
}
#btn1{
width:100px;
height:30px;
margin-top: 20px;
margin-right:40px;
}
#btn2{
width:100px;
height:30px;
margin-top: 20px;
margin-right:40px;
}
#btn3{
width:100px;
height:30px;
margin-top: 20px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="count">
<h1 class="bt">倒计时</h1>
<div id ="txt">00:10:30:00</div>
<input type="button" value="开始倒计时" id="btn1" />
<input type="button" value="结束倒计时" id="btn2" />
<input type="button" value="重新倒计时" id="btn3" />
</div>
</body>
</html>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var txt = document.getElementById("txt");
var maxtime =(10*60 + 30)*100;
function fn(){
minutes = Math.floor(maxtime/60/100);
seconds = Math.floor(maxtime/100- (minutes*60));
millisecond = maxtime - seconds*100 - minutes*60*100;
if(minutes < 10){
minutes = "0" + minutes;
}
if(seconds < 10){
seconds = "0" + seconds;
}
if(millisecond < 10){
millisecond = "0" + millisecond;
}
txt.innerHTML = "00:" + minutes + ":" + seconds + ":" + millisecond;
}
btn1.onclick = function(){
var timer=setInterval(function(){
maxtime -= 1;
if(maxtime <= 0){
clearInterval(timer)
}else{
fn();
}
},10)
btn2.onclick = function(){
clearInterval(timer);
}
btn3.onclick = function(){
clearInterval(timer);
maxtime = (10*60 + 30)*100;
fn();
}
}
</script>
浙公网安备 33010602011771号