今天給大家講兩個有關計時器的例子，設置計時器時，你需要根據(jù)要求來添加計時器庐舟，清除計時器，有時候可能會清除計時器清除不了兔朦，而且會造成運動越來越快，這是因為計時器不是全局變量造成的磨确，下面舉一個倒計時的例子與無縫滾動
倒計時100秒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒計時</title>
<style type="text/css">
.wrap{
width: 300px;
height: 150px;
background: black;
margin: 10px auto;
color: white;
text-align: center;
padding: 30px 10px;
box-sizing: border-box;
}
input{
width: 30px;
text-align: center;
vertical-align: middle;
}
label{
vertical-align: middle;
}
#btn{
margin-top: 30px;
width: 280px;
height: 40px;
line-height: 25px;
text-align: center;
font-size: 22px;
background: green;
color: white;
border: 2px solid gray;
}
</style>
</head>
<body>
<div class="wrap">
<input type="text" id="inp1" value="1"><label> 分鐘 </label>
<input type="text" id="inp2" value="10"><label> 秒 </label>
<input type="button" id="btn" value="啟動">
</div>
<script type="text/javascript">
var btn=document.getElementById("btn");
var inp1=document.getElementById("inp1");
var inp2=document.getElementById("inp2");
var c=1;
function demo(){
var a=inp1.value;
var b=inp2.value;
b--;
if(b<0){
if(a==1){
a=0;
b=59;
}
}if(b<=0 && a<=0){
b=0;
a=0;
}
inp1.value=a;
inp2.value=b;
}
var timer=setInterval(function(){
},1000)
btn.onclick=function(){
if(c%2==1){
btn.style.background="darkred";
btn.value="取消";
timer=setInterval(function(){
demo();
},1000)
}
if(c%2==0){
btn.style.background="green"
btn.value="啟動"
clearInterval(timer);
}
c++;
}
</script>
</body>
</html>
上面就是100秒的倒計時沽甥，剛開始我就是沒有設置全局變量而導致清除不了，現(xiàn)在搞定了就會發(fā)現(xiàn)真的好簡單乏奥。
無縫滾動
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>無縫滾動</title>
<style type="text/css">
* { margin: 0; padding: 0; }
#wrap { position: relative; width: 600px; height:300px; margin: 20px auto; border: 1px #ccc solid; overflow: hidden; }
#roll { position: absolute; left: 0; width: 9999px; overflow: hidden; }
#roll img { float: left; width: 300px; height: 300px; }
</style>
</head>
<body>
<div id="wrap">
<div id="roll">
</div>
</div>
</body>
<script type="text/javascript">
var count=0;
var roll=document.getElementById("roll");
var img=document.querySelectorAll("img");
function demo(){
count-=3;
if(count<-1200){
count=0;
}
roll.style.left=count+'px';
console.log(roll.style.left)
}
var timer=setInterval(function(){
demo();
},10)
roll.onmouseover=function(){
clearInterval(timer);
}
roll.onmouseout=function(){
timer=setInterval(function(){
demo();
},10)
}
</script></html>
通過上面的代碼就可以實現(xiàn)無縫滾動摆舟。
