一、计时器

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代码：

 var show=document.getElementById('show');

     var btn1=document.getElementById('btn1');

     var btn2=document.getElementById('btn2');

     var x=0;

     var timer1=null;//设置timer1为空对象类型

     var timer2=null;

 //1.setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后，执行一次相应的函数(重复)

     timer1=setInterval(function(){//当计时器调用执行完毕时，它将返回一个timerID(timer1),

         x++;

         show.innerHTML=x;

     },500);

     btn1.onclick=function(){

         clearInterval(timer1);//将该ID传递给clearInterval，便可以终止代码的执行

         // 清除计时器：clearInterval( );

     }

 //2.setTimeout ( 函数/名称 , 毫秒数 )表示经过一定的毫秒后，只执行一次相应的函数(不重复)

     timer2=setTimeout(function(){

         alert('我是一次性计时器');

     },3000)

     btn2.onclick=function(){

         clearTimeout(timer2);//清除计时器 clearTimeout( );

     }

二、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;

示例：

 totop.onclick=function(){

         var timer1=null;

         var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

         //document.documentElement访问到<html>根元素(页面没有DTD，或者说没有指定doctype时)

         //window.pageYOffset (safari自己的方法)

         //document.body   访问到<body>元素,适用（页面没有DTD，或者说没有指定doctype时）

         timer1=setInterval(function(){

              scrollTop-=20;

              if(scrollTop<=0){

                  /*scrollTop=0;

                  return false;*/

                  clearInterval(time);

              }

              document.documentElement.scrollTop=scrollTop;

              document.body.scrollTop=scrollTop;

               window.pageYOffset=scrollTop;

         },2)

     }

三、offset系列属性

offsetLeft：获取对象左侧与定位父级之间的距离
offsetTop：获取对象上侧与定位父级之间的距离
PS：获取对象到父级的距离取决于最近的定位父级
offsetWidth：获取元素自身的宽度（包含边框）
offsetHeight：获取元素自身的高度（包含边框）

四、client系列属性

clientLeft、clientTop：获取元素内容到边框的距离，效果和边框宽度相同，比较少使用
clientWidth：获取元素自身的宽度（不含边框）
clientHeight：获取元素自身的高度（不含边框）

五、图片无缝滚动

页面布局：

 <div id="wrap">

     <div id="con">

         <div id="box1">

             <img src="data:images/qzl1.jpg" alt="">

             <img src="data:images/qzl2.jpg" alt="">

             <img src="data:images/qzl3.jpg" alt="">

             <img src="data:images/qzl4.jpg" alt="">

             <img src="data:images/qzl5.jpg" alt="">

         </div>

         <div id="box2">

         </div>

     </div>

 </div>

 <script>

 var wrap=document.getElementById('wrap');

 var box1=document.getElementById('box1');

 var box2=document.getElementById('box2');

 // var img1=wrap.getElementsByTagName('img')[0];

 var timer=null,x=0;

 var maxWidth=box1.offsetWidth;

 box2.innerHTML=box1.innerHTML;

 function move(){

     timer=setInterval(function(){

         x+=5;

         if(x>=maxWidth){//临界点，一组图片转完时

             wrap.scrollLeft=0;

             //设这组图片的左卷距离为0，回到初始位置

             x=0;

         }

         wrap.scrollLeft=x;

     },20)

 }

 move();//进入页面自动执行

 wrap.onmouseenter=function(){

     clearInterval(timer);

 }

 wrap.onmouseleave=function(){

     move();

 }

 </script>

JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动的更多相关文章

  1. JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作

    javascript-对文档对象的内容.属性.样式的操作 一.操作内容 1. innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签) 2. innerText 用来设置或获取 ...

  2. Java程序猿的JavaScript学习笔记（汇总文件夹）

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  3. Java程序猿的JavaScript学习笔记（8——jQuery选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  4. Java程序猿JavaScript学习笔记（2——复制和继承财产）

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  5. Java程序猿的JavaScript学习笔记（3——this/call/apply）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  6. Java程序猿JavaScript学习笔记（4——关闭/getter/setter）

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  7. Java程序猿JavaScript学习笔记（14——扩大jQuery UI）

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  8. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  9. JavaScript学习笔记之数组（二）

    JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

随机推荐

  1. Linux下的C Socket编程 -- server端的继续研究

    Linux下的C Socket编程(四) 延长server的生命周期 在前面的一个个例子中,server在处理完一个连接后便会立即结束掉自己,然而这种server并不科学啊,server应该是能够一直 ...

  2. 如何在Open Live Writer(OLW)中使用precode代码高亮Syntax Highlighter

    早先Microsotf的Windows Live Writer(WLW)现在已经开源了,并且更名为Open Live Writer,但是现在Windows Live Writer还是可以现在,Open ...

  3. 腾讯云 安装mono

    一.yum -y update 运行出现以下错误: http://centos.tencentyun.com/contrib/x86_64/repodata/filelists.xml.gz: [Er ...

  4. .Net中的AOP系列之《拦截位置》

    返回<.Net中的AOP>系列学习总目录 本篇目录 位置拦截 .Net中的字段和属性 PostSharp位置拦截 真实案例--懒加载 .Net中的懒加载 使用AOP实现懒加载 如何懒加载字 ...

  5. ReactNative入门（安卓）——API（下）

    LayoutAnimation - layout动画 当布局发生改变时的动画模块,它有两个方法: 1. 最常用的方法是 LayoutAnimation.configureNext(conf<Ob ...

  6. 虚拟机体验之 KVM 篇

    在上一篇中,我展示了虚拟机软件 QEMU 的使用.效果及其性能,同时也分析了不同用户对虚拟机的不同追求.但是不管是桌面用户还是企业级用户,对虚拟机软件的追求有一点是共同的,那就是性能.QEMU 是一个 ...

  7. 利用Netty构建自定义协议的通信

    在复杂的网络世界中,各种应用之间通信需要依赖各种各样的协议,比如:HTTP,Telnet,FTP,SMTP等等. 在开发过程中,有时候我们需要构建一些适应自己业务的应用层协议,Netty作为一个非常优 ...

  8. python的拷贝（深拷贝和浅拷贝）

    今天看了几篇关于python拷贝的博文,感觉不太清楚,所以我就自己做实验试一下,特此记录. 拷贝是针对组合对象说的,比如列表,类等,而数字,字符串这样的变量是没有拷贝这一说的. 实现拷贝有: 1.工厂 ...

  9. Android开发学习之路-Android中使用RxJava

    RxJava的核心内容很简单,就是进行异步操作.类似于Handler和AsyncTask的功能,但是在代码结构上不同. RxJava使用了观察者模式和建造者模式中的链式调用(类似于C#的LINQ). ...

  10. 搭建LNAMP环境（二）- 源码安装Nginx1.10

    上一篇:搭建LNAMP环境(一)- 源码安装MySQL5.6 1.yum安装编译nginx需要的包 yum -y install pcre pcre-devel zlib zlib-devel ope ...