智能社 石川Blue 老师 的 JavaScript教程 笔记
定时器
定时器的作用
开启定时器
setInterval() 间隔型
setInterval(function(),1000) 每隔1000ms执行一次function
function show(){
alert('!!!');
}
setInterval(show,1000);//每1s弹窗一次
setTimeout() 延时性
用法相同，只执行一次
停止定时器
- clearInterval()& clearTimeOut()
window.onload = function(){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var timer = null;//设置为setInterva()的返回值
oBtn1.onclick=function(){
timer=setInterval(function(){
alert("setInterval正在运行中！");
},3000);
}
oBtn2.onclick=function(){
clearInterval(timer);//将需要关闭的setInterval()的返回值作为参数传入
}
}
demo1:数码时钟
一、获取系统时间
date对象
var oDate = new Date()//声明一个date对象
运用date对象的方法获取时间
获得的是number
| getDate() | 以数值返回天（1-31） |
|---|---|
| getDay() | 以数值获取周名（0-6）0代表周日 |
| getFullYear() | 获取四位的年（yyyy） |
| getHours() | 获取小时（0-23） |
| getMilliseconds() | 获取毫秒（0-999） |
| getMinutes() | 获取分（0-59） |
| getMonth() | 获取月（0-11）需要+1 |
| getSeconds() | 获取秒（0-59） |
| getTime() | 获取时间（从 1970 年 1 月 1 日至今 |
二、显示系统时间
问题1：如何显示时间
解决方法：修改字符串来控制显示的时间
var str ="011312";//01:13:12
for(var i=0;i<aImg.length;i++){
aImg[i].src='img/'+str[i]+'.png';
}
问题2：02s getSeconds()获得的是2(int)
解决方法：空位补零
function toDoubleFormat(t){//使个位数拥有补0的前缀同时转换成字符串的形式
if(t<10){
return '0'+t;
}
else{
return ''+t;
}
}
var str = toDoubleFormat(oDate.getHours())+toDoubleFormat(oDate.getMinutes())+toDoubleFormat(oDate.getSeconds());
问题3：无法实时更新
解决方法：setInterval()来运用
把代码封装进setInterval函数，设定刷新时间
问题4：刷新的时候会出现全0的图片
出现问题的原因：setInterval会在第一个间隔时间后才执行函数
解决方法：在调用setInterval前先执行一次该函数
三、兼容性问题
问题5：部分浏览器无法获取图片路径 如IE7
解决方法：charAt()方法 取字符串的某一位
str[i]--->str.charAt(i)
JS完整代码
window.onload=function(){
var aImg = this.document.getElementsByTagName('img');
function tictok(){
var oDate = new Date();
var str = oDate.getFullYear()+toDoubleFormat(oDate.getMonth()+1)+toDoubleFormat(oDate.getDate())+toDoubleFormat(oDate.getHours())+toDoubleFormat(oDate.getMinutes())+toDoubleFormat(oDate.getSeconds());
function toDoubleFormat(t){//使个位数拥有补0的前缀同时转换成字符串的形式
if(t<10){
return '0'+t;
}
else{
return ''+t;
}
}
for(var i=0;i<aImg.length;i++){
aImg[i].src='img/'+str.charAt(i)+'.png';
}
}
tictok();
this.setInterval(tictok,1000);
}
demo2：延时提示框
通过mouseover和mouseout实现
window.onload=function(){
var oDiv1 = document.getElementsByClassName('div1');
var oDiv2 = document.getElementsByClassName('div2');
oDiv1[0].onmouseover=function(){
oDiv2[0].style.display='block';
}
oDiv1[0].onmouseout=function(){
oDiv2[0].style.display='none';
}
}
问题1：鼠标刚刚移出div1，div2马上就消失
解决办法：开一个定时器setTimeOut()
oDiv1[0].onmouseout=function(){
setTimeout(function(){
oDiv2[0].style.display='none';
},500);
}
问题2：鼠标移入div2，过了设定的时间还是会消失
解决办法：当鼠标移入div2时，解除定时
oDiv1[0].onmouseover=function(){
oDiv2[0].style.display='block';
}
oDiv1[0].onmouseout=function(){
timer=setTimeout(function(){
oDiv2[0].style.display='none';
},500);
}
oDiv2[0].onmouseover=function(){
clearTimeout(timer);
}
问题3：鼠标移出div2时，div2应该自动消失
解决方法：添加div2的onmouseout
oDiv2[0].onmouseout=function(){
oDiv2[0].style.display='none';
}
问题4：鼠标从div2移入div1时，会闪一下
出现原因：经过margin部分
解决方法：给div2添加定时器
oDiv2[0].onmouseover=function(){
clearTimeout(timer);
}
问题5：鼠标从div2移入div1，div2会消失
出现原因：div2的定时器会使得div2消失
解决方法：在div1的onmouseover 中解除定时
oDiv2[0].onmouseout=function(){
timer=setTimeout(function(){
oDiv2[0].style.display='none';
},500);
}
问题6：简化代码
-
onmouseout的合并
div1和div2的完全一样可以合并
JS中允许使用连等于号 进行赋值
oDiv1[0].onmouseout=oDiv2[0].onmouseout=function(){
timer=setTimeout(function(){
oDiv2[0].style.display='none';
},500);
}
-
onmouseover的合并
div2的onmouseover只有在已经显示出来的时候才会触发
此时增添与div1的onmouseover一样的语句
进行合并
oDiv1[0].onmouseover=oDiv2[0].onmouseover=function(){
clearTimeout(timer);
oDiv2[0].style.display='block';
}
完整JS代码
<script>
window.onload=function(){
var oDiv1 = document.getElementsByClassName('div1');
var oDiv2 = document.getElementsByClassName('div2');
var timer = null;
oDiv1[0].onmouseover=oDiv2[0].onmouseover=function(){
clearTimeout(timer);
oDiv2[0].style.display='block';
}
oDiv1[0].onmouseout=oDiv2[0].onmouseout=function(){
timer=setTimeout(function(){
oDiv2[0].style.display='none';
},500);
}
// oDiv2[0].onmouseover=function(){
// clearTimeout(timer);
// oDiv2[0].style.display='block';
// }
// oDiv2[0].onmouseout=function(){
// timer=setTimeout(function(){
// oDiv2[0].style.display='none';
// },500);
// }
}
</script>
