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代码：
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系列属性 & 图片无缝滚动的更多相关文章
- JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作
javascript-对文档对象的内容.属性.样式的操作 一.操作内容 1. innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签) 2. innerText 用来设置或获取 ...
- Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记（8——jQuery选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（2——复制和继承财产）
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
- Java程序猿的JavaScript学习笔记（3——this/call/apply）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（4——关闭/getter/setter）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- Java程序猿JavaScript学习笔记（14——扩大jQuery UI）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- JavaScript学习笔记之数组（二）
JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...
随机推荐
- 网站缓存技术总结（ ehcache、memcache、redis对比）
网站技术高速发展的今天,缓存技术已经成为大型网站的一个关键技术,缓存设计好坏直接关系的一个网站访问的速度,以及购置服务器的数量,甚至影响到用户的体验. 网站缓存按照存放的地点不同,可以分为客户端缓存. ...
- clang_intprt_t类型探究
作者:玄魂工作室-钱海龙 问题 这篇手把手教你构建 C 语言编译器,里面有着这样的代码 void eval() { int op, *tmp; while (1) { if (op == IMM) { ...
- Windbg Extension NetExt 使用指南 【3】 ---- 挖掘你想要的数据 Managed Heap
摘要 : NetExt中有两个比较常用的命令可以用来分析heap上面的对象. 一个是!wheap, 另外一个是!windex. !wheap 这个命令可以用于打印出heap structure信息. ...
- CSharpGL(19)用glReadPixels把渲染的内容保存为PNG图片(C#)
CSharpGL(19)用glReadPixels把渲染的内容保存为PNG图片(C#) 效果图 本文解决了将OpenGL渲染出来的内容保存到PNG图片的方法. 下载 CSharpGL已在GitHub开 ...
- 埃尔米特插值问题——用Python进行数值计算
当插值的要求涉及到对插值函数导数的要求时,普通插值问题就变为埃尔米特插值问题.拉格朗日插值和牛顿插值的要求较低,只需要插值函数的函数值在插值点与被插函数的值相等,以此来使得在其它非插值节点插值函数的值 ...
- web全栈开发之网站开发一（Mac环境配置）
个人第一次写博客,想给大家分享的是PHP+HTML5+MySQL开发一个个人网站所需的部分技术,希望能帮到志同道合和开发者,别人小白高手勿喷就行 先说一下我在制作这个网站之前的配置: 我用的是MacB ...
- Spring的前期配置
1创建一个java项目,鼠标单击项目右键新建一个名为lib的文件夹 2在lib文件夹中考入Spring需要的配置文件(俗称jar包) 3 按Shift选中这些jar右键添加至构建路径 4选中src目录 ...
- JVM学习（1）——通过实例总结Java虚拟机的运行机制
俗话说,自己写的代码,6个月后也是别人的代码……复习!复习!复习!涉及到的知识点总结如下: JVM的历史 JVM的运行流程简介 JVM的组成(基于 Java 7) JVM调优参数:-Xmx和-Xms ...
- u-boot-2015.04 在tq2440上的移植（使用spl引导u-boot）
本次移植跟以往的不同之处是采用了spl来引导u-boot,参考了博客http://blog.csdn.net/fulinus/article/details/42738641 下载链接:http:// ...
- 利用Python进行数据分析(4) NumPy基础: ndarray简单介绍
一.NumPy 是什么 NumPy 是 Python 科学计算的基础包,它专为进行严格的数字处理而产生.在之前的随笔里已有更加详细的介绍,这里不再赘述. 利用 Python 进行数据分析(一)简单介绍 ...