智能社Js笔记——定时器的使用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了智能社Js笔记——定时器的使用相关的知识，希望对你有一定的参考价值。
写JS代码，首先确定写的JS能够完成功能，并且没有任何bug，然后再做的事情就是把代码里面相似的东西进行合并，代码优化；
1、定时器的作用
开启定时器
setInterval（function (){} , 1000） 间隔型
setTimeOut (function (){}, 1000) 延时型
两种定时器的区别
停止定时器
clearInterval（timer）;
clearTimeout(timer);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开启关闭定时器</title>
</head>
<script type="text/javascript">
window.onload=function (){
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var timer=null;
oBtn1.onclick=function (){
timer=setTimeout(function (){
alert("a");
}, 1000);
// timer=setInterval(function (){
// alert("a");
// }, 1000);
};
oBtn2.onclick=function (){
clearTimeout(timer);
//clearInterval(timer);
};
};
</script>
<body>
<input id="btn1" type="button" value="开启" />
<input id="btn2" type="button" value="关闭" />
</body>
</html>
2、数码时钟
如何用JS获取到当前时间
var oDate=new Date();
oDate.getHours();
oDate.getMinutes();
oDate.getSeconds();
显示系统时间（用一个toDou()函数来实现）
字符串连接
空位补零
设置图片路径
charAt方法
str[0]在低版本下不兼容
此时要用charAt(0) 获取字符串下某一位的东西
整个时间中只有月有问题
年：getFullYear()
月：getMonth()+1
日：getDate()
星期：getDay() //星期天是0，以此类推
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数码时钟</title>
<style type="text/css">
div{width: 25px; height: 25px; line-height: 25px; font-size: 20px; text-align: center; background: black; color: #eee; margin: 5px; float: left; }
</style>
<script type="text/javascript">
function toDou(n){
if(n<10){
return "0"+n;
}else{
return ""+n;
}
};
window.onload=function (){
function tick(){
var aDiv=document.getElementsByTagName("div");
var oDate=new Date();
var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
// alert(str);
for(var i=0; i<aDiv.length; i++){
aDiv[i].innerHTML=str[i];
}
};
setInterval(tick, 1000);
tick();
};
</script>
</head>
<body>
<div>1</div>
<div>6</div>
<div>1</div>
<div>4</div>
<div>2</div>
<div>0</div>
</body>
</html>
3、延时提示框（要搞清楚事件发生的过程）
原来的方法：移入显示，移出隐藏
移出延时隐藏：移入下面的div后还是隐藏了
简化代码：合并两个相同的mouseover和mouseout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延时提示框</title>
<style type="text/css">
div{float: left; margin: 10px;}
#div1{width: 50px; height: 50px; }
#div2{width: 150px; height: 150px; background-color: #ccc; display: none;}
</style>
<script type="text/javascript">
window.onload=function (){
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var timer=null;
oDiv1.onmouseover=function (){
clearTimeout(timer);
oDiv2.style.display="block";
};
oDiv1.onmouseout=function (){
timer=setTimeout(function (){
oDiv2.style.display="none";
}, 500);
};
oDiv2.onmouseover=function (){
clearTimeout(timer);
};
oDiv2.onmouseout=function (){
timer=setTimeout(function (){
oDiv2.style.display="none";
},500);
};
//优化，相同的函数代码合并
// oDiv1.onmouseover=oDiv2.onmouseover=function (){
// clearTimeout(timer);
// oDiv2.style.display="block";
// };
// oDiv1.onmouseout=oDiv2.onmouseout=function (){
// timer=setTimeout(function (){
// oDiv2.style.display="none";
// },500);
// };
};
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
4、无缝滚动
offsetLeft、offsetTop、offsetHeight、offsetWidth在运动的时候用来获取物体的位置；
运动的div首先要给它一个绝对定位 position：absolute； top: 50px; left:100px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
*{margin: 0; padding: 0;}
#div1{width: 712px; height: 118px; margin: 100px auto; position: relative; background: red;
overflow: hidden;}
#div1 ul{position: absolute; left: 0; top: 0;}
#div1 ul li{width: 178px; height: 118px; float: left; list-style: none;}
</style>
<script type="text/javascript">
window.onload=function (){
var oDiv=document.getElementById("div1");
var oUl=oDiv.getElementsByTagName("ul")[0];
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
var aLi=oUl.getElementsByTagName("li");
oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";
var speed=-2;
document.getElementsByTagName("a")[0].onclick=function (){
speed=-2;
};
document.getElementsByTagName("a")[1].onclick=function (){
speed=2;
};
function move(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left=0;
}
if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+"px";
}
oUl.style.left=oUl.offsetLeft+speed+"px";
}
timer=setInterval(move,30);
oDiv.onmouseover=function (){
clearInterval(timer);
};
oDiv.onmouseout=function (){
timer=setInterval(move,30);
};
};
</script>
</head>
<body>
<a href="javascrip:;">向左走</a>
<a href="javascrip:;">向右走</a>
<div id="div1">
<ul>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
</ul>
</div>
</body>
</html>
以上是关于智能社Js笔记——定时器的使用的主要内容，如果未能解决你的问题，请参考以下文章