JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一、计时器
setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后，执行一次相应的函数(重复)
setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后，只执行一次相应的函数(不重复)
清除计时器：
clearInterval( );
clearTimeout( );
当计时器调用执行完毕时，它将返回一个timer ID，
如果将该ID传递给clearInterval，便可以终止代码的执行。
实例：
页面布局：
<div id="wrap">
<h2>计时开始</h2>
<p id="show"></p>
<button id="btn1">clearInterval( )</button>
<button id="btn2">clearTimeout( )</button>
</div>
JS代码：
1 var show=document.getElementById('show'); 2 var btn1=document.getElementById('btn1'); 3 var btn2=document.getElementById('btn2'); 4 var x=0; 5 var timer1=null;//设置timer1为空对象类型 6 var timer2=null; 7 //1.setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后，执行一次相应的函数(重复) 8 timer1=setInterval(function(){//当计时器调用执行完毕时，它将返回一个timerID(timer1), 9 x++; 10 show.innerHTML=x; 11 },500); 12 btn1.onclick=function(){ 13 clearInterval(timer1);//将该ID传递给clearInterval，便可以终止代码的执行 14 // 清除计时器：clearInterval( ); 15 } 16 //2.setTimeout ( 函数/名称 , 毫秒数 )表示经过一定的毫秒后，只执行一次相应的函数(不重复) 17 timer2=setTimeout(function(){ 18 alert('我是一次性计时器'); 19 },3000) 20 btn2.onclick=function(){ 21 clearTimeout(timer2);//清除计时器 clearTimeout( ); 22 }
二、scroll系列属性
scrollLeft：设置或获取当前左滚的距离，即左卷的距离；
scrollTop：设置或获取当前上滚的距离，即上卷的距离；
scrollHeight：获取对象可滚动的总高度；
scrollWidth：获取对象可滚动的总宽度；
使用实例：
页面布局：
<div id="box">
<div id="box1">几点见覅当时就发哦哦降低副书记艾佛积分抵沙发几点见覅当时就发哦哦降低副书记艾佛积。。。。。。</div>
</div>
<button id="btn">获取</button>
<p id="totop">返回顶部</p>
JS代码：
var box=document.getElementById('box'); var box1=document.getElementById('box1'); var btn=document.getElementById('btn'); var show=document.getElementById('show'); var totop=document.getElementById('totop'); btn.onclick=function(){ console.log(box.scrsollLeft);//获取父级（box）左滚的距离，即左卷的距离； console.log(box.scrollTop);//获取当前父级（box）上滚的距离，即上卷的距离 console.log(box.scrollWidth);//获取对象（box1）可滚动的总宽度 console.log(box.scrollHeight);//获取对象（box1）可滚动的总高度 }
document.body 访问到<body>元素，页面没有DTD，或者说没有指定doctype时，
document.documentElement 访问到<html>根元素，页面有DTD，或者说指定了doctype时，
获取scrollTop的兼容写法
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
示例：
1 totop.onclick=function(){ 2 var timer1=null; 3 var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 4 //document.documentElement访问到<html>根元素(页面没有DTD，或者说没有指定doctype时) 5 //window.pageYOffset (safari自己的方法) 6 //document.body 访问到<body>元素,适用（页面没有DTD，或者说没有指定doctype时） 7 timer1=setInterval(function(){ 8 scrollTop-=20; 9 if(scrollTop<=0){ 10 /*scrollTop=0; 11 return false;*/ 12 clearInterval(time); 13 } 14 document.documentElement.scrollTop=scrollTop; 15 document.body.scrollTop=scrollTop; 16 window.pageYOffset=scrollTop; 17 },2) 18 }
三、offset系列属性
offsetLeft：获取对象左侧与定位父级之间的距离
offsetTop：获取对象上侧与定位父级之间的距离
PS：获取对象到父级的距离取决于最近的定位父级
offsetWidth：获取元素自身的宽度（包含边框）
offsetHeight：获取元素自身的高度（包含边框）
四、client系列属性
clientLeft、clientTop：获取元素内容到边框的距离，效果和边框宽度相同，比较少使用
clientWidth：获取元素自身的宽度（不含边框）
clientHeight：获取元素自身的高度（不含边框）
五、图片无缝滚动
页面布局：
1 <div id="wrap"> 2 <div id="con"> 3 <div id="box1"> 4 <img src="images/qzl1.jpg" alt=""> 5 <img src="images/qzl2.jpg" alt=""> 6 <img src="images/qzl3.jpg" alt=""> 7 <img src="images/qzl4.jpg" alt=""> 8 <img src="images/qzl5.jpg" alt=""> 9 </div> 10 <div id="box2"> 11 </div> 12 </div> 13 </div> 14 <script> 15 var wrap=document.getElementById('wrap'); 16 var box1=document.getElementById('box1'); 17 var box2=document.getElementById('box2'); 18 // var img1=wrap.getElementsByTagName('img')[0]; 19 var timer=null,x=0; 20 var maxWidth=box1.offsetWidth; 21 box2.innerHTML=box1.innerHTML; 22 function move(){ 23 timer=setInterval(function(){ 24 x+=5; 25 if(x>=maxWidth){//临界点，一组图片转完时 26 wrap.scrollLeft=0; 27 //设这组图片的左卷距离为0，回到初始位置 28 x=0; 29 } 30 wrap.scrollLeft=x; 31 },20) 32 } 33 move();//进入页面自动执行 34 wrap.onmouseenter=function(){ 35 clearInterval(timer); 36 } 37 wrap.onmouseleave=function(){ 38 move(); 39 } 40 </script>
