一、计时器

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

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

清除计时器：

clearInterval( );

clearTimeout( );

当计时器调用执行完毕时，它将返回一个timer ID，

如果将该ID传递给clearInterval，便可以终止代码的执行。

实例：

页面布局：

  1. <div id="wrap">
  2.     <h2>计时开始</h2>
  3.         <p id="show"></p>
  4.         <button id="btn1">clearInterval( )</button>
  5.         <button id="btn2">clearTimeout( )</button>
  6. </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：获取对象可滚动的总宽度；

使用实例：

页面布局：

  1. <div id="box">
  2.     <div id="box1">几点见覅当时就发哦哦降低副书记艾佛积分抵沙发几点见覅当时就发哦哦降低副书记艾佛积。。。。。。</div>
  3. </div>
  4. <button id="btn">获取</button>
  5. <p id="totop">返回顶部</p>

JS代码：

  1.     var box=document.getElementById('box');
  2.     var box1=document.getElementById('box1');
  3.     var btn=document.getElementById('btn');
  4.     var show=document.getElementById('show');
  5.     var totop=document.getElementById('totop');
  6.     btn.onclick=function(){
  7.         console.log(box.scrsollLeft);//获取父级（box）左滚的距离，即左卷的距离；
  8.         console.log(box.scrollTop);//获取当前父级（box）上滚的距离，即上卷的距离
  9.         console.log(box.scrollWidth);//获取对象（box1）可滚动的总宽度
  10.         console.log(box.scrollHeight);//获取对象（box1）可滚动的总高度
  11.     }

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="data:images/qzl1.jpg" alt="">
  5.              <img src="data:images/qzl2.jpg" alt="">
  6.              <img src="data:images/qzl3.jpg" alt="">
  7.              <img src="data:images/qzl4.jpg" alt="">
  8.              <img src="data: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>

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. 【Star CCM+实例】开发一个简单的计算流程.md

    流程开发在CAE过程中处于非常重要的地位. 主要的作用可能包括: 将一些经过验证的模型隐藏在流程中,提高仿真的可靠性 将流程封装成更友好的界面,降低软件的学习周期 流程开发实际上需要做非常多的工作,尤 ...

  2. .NET开源进行时：消除误解、努力前行（本文首发于《程序员》2015第10A期的原始版本）

    2014年11月12日,ASP.NET之父.微软云计算与企业级产品工程部执行副总裁Scott Guthrie,在Connect全球开发者在线会议上宣布,微软将开源全部.NET核心运行时,并将.NET ...

  3. Johnson 全源最短路径算法

    解决单源最短路径问题(Single Source Shortest Paths Problem)的算法包括: Dijkstra 单源最短路径算法:时间复杂度为 O(E + VlogV),要求权值非负: ...

  4. [DeviceOne开发]-土地销售项目源码分享

    一.简介 这个是一个真实项目开源,虽然不是很花哨,但是中规中矩,小细节处理的也很好,非常值得参考和借鉴.里面的数据都缓存到本地,可以离线运行,但是调整一下代码,马上就可以和服务端完全对接.后续会有详细 ...

  5. X Window 的奥秘

    大名鼎鼎的 X Window 大家肯定不陌生.都知道它是 Unix/Linux 下面的窗口系统,也都知道它基于 Server/Clinet 架构.在网上随便搜一搜,也可以找到不少 X Window 的 ...

  6. mysql sleep进程过多,应用级配置

    <property name="hibernateProperties"> <props> <prop key="hibernate.dia ...

  7. 最大子段和（c++）

    // 最大子段和.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> using namesp ...

  8. Spark核心作业调度和任务调度之DAGScheduler源码

    前言:本文是我学习Spark 源码与内部原理用,同时也希望能给新手一些帮助,入道不深,如有遗漏或错误的,请在原文评论或者发送至我的邮箱 tongzhenguotongzhenguo@gmail.com ...

  9. Linux 与 Linux Windows 文件共享 小知识

    Linux 与 Linux Windows 文件共享   前提说明:windows主机信息:192.168.1.100 帐号:abc 密码:123 共享文件夹:sharelinux主机信息:192.1 ...

  10. Owin：“System.Reflection.TargetInvocationException”类型的未经处理的异常在 mscorlib.dll 中发生

    异常汇总:http://www.cnblogs.com/dunitian/p/4523006.html#signalR 这个异常我遇到两种情况,供园友参考: 第一种,权限不够,在项目运行的时候弹出== ...