计时器
2017-09-28 本文已影响0人
likeli
今天给大家讲两个有关计时器的例子，设置计时器时，你需要根据要求来添加计时器，清除计时器，有时候可能会清除计时器清除不了，而且会造成运动越来越快，这是因为计时器不是全局变量造成的，下面举一个倒计时的例子与无缝滚动
倒计时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秒的倒计时，刚开始我就是没有设置全局变量而导致清除不了，现在搞定了就会发现真的好简单。
无缝滚动
<!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>
通过上面的代码就可以实现无缝滚动。
