原生js轮播以及setTimeout和setInterval的理解
2016-02-25 17:58
771 查看
下面这个代码是从一个群下载下来的,为了帮助自己理解和学习现在贴出来,与初学者共勉。
方 法
实际上,setTimeout和setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。
不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码。
虽然表面上看来setTimeout只能应用在on-off方式的动作上,不过可以通过创建一个函数循环重复调用setTimeout,以实现重复的操作。
深入学习:http://www.cnblogs.com/qiantuwuliang/archive/2009/06/20/1507304.html
clearTimeout()方法的参数必须是由setTimeout()返回的ID值。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
在javascript中如果
设置 var xx,xxb=7;
if(xxb){
alert("5")
} else{
alert("000!")
} //弹出 5
if(xx){
alert("5")
} else{
alert("000!")
}//弹出000!
说明 条件语句中只要有值就是true 否则是false。
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
null是一个只有一个值的特殊类型。表示一个空对象引用。
你可以设置为 null 来清空对象:
typeof 一个没有值的变量会返回 undefined。
任何变量都可以通过设置值为 undefined 来清空。 类型为 undefined.
typeof null // object
null === undefined // false
null == undefined // true
Js中的window.parent ,window.top,window.self 详解
在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法打开当前窗口的那个窗口。
window.self
功能:是对当前窗口自身的引用。它和window属性是等价的。
语法:window.self
注:window、self、window.self是等价的。
window.top
功能:返回顶层窗口,即浏览器窗口。
语法:window.top
注:如果窗口本身就是顶层窗口,top属性返回的是对自身的引用。
window.parent
功能:返回父窗口。
语法:window.parent
注:如果窗口本身是顶层窗口,parent属性返回的是对自身的引用。
在框架网页中,一般父窗口就是顶层窗口,但如果框架中还有框架,父窗口和顶层窗口就不一定相同了。
判断当前窗口是否在一个框架中:
<script type="text/javascript">
var b = window.top!=window.self;
document.write( "当前窗口是否在一个框架中:"+b );
</script>
你应当将框架视为窗口中的不同区域,框架是浏览器窗口中特定的部分。一个浏览器窗口可以根据你的需要分成任意多的框架,一个单个的框架也可以分成其它多个框架,即所谓的嵌套框架。
转载:http://blog.csdn.net/zdwzzu2006/article/details/6047632
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原生JS图片轮播</title> <style> * {margin: 0;padding: 0;} #box {width: 520px;height: 280px;margin: 100px auto 0;overflow: hidden;position: relative;box-shadow: 0 0 15px black;} ul {width: 400%;height: 100%;position: absolute;left: 0;top: 0;} li {width: auto;display: block;float: left;} #btnBox {width: 360px;height: 30px;margin: 50px auto 0;} .btn {display: block;width: 80px;height: 30px;margin: 0 50px;background: peru;color: white;text-align: center;line-height: 30px;float: left;cursor: pointer;-webkit-user-select: none;} </style> </head> <body> <div id="box"> <ul> <li><img src="https://aecpm.alicdn.com/simba/img/TB1wjqpLFXXXXa0aXXXSutbFXXX.jpg" /></li> <li><img src="https://aecpm.alicdn.com/simba/img/TB13rqpLpXXXXavXVXXSutbFXXX.jpg" /></li> <li><img src="https://aecpm.alicdn.com/simba/img/TB1QJsLLpXXXXc2XFXXSutbFXXX.jpg" /></li> <li><img src="https://img.alicdn.com/tps/TB1wPXTLFXXXXa8XFXXXXXXXXXX-520-280.jpg" /></li> </ul> </div> <div id="btnBox"> <span class="btn" onclick="btnRight()">向左滚</span> <span class="btn" onclick="btnLeft()">向右滚</span> </div> </body> <script> var moveAnimationTime, moveIng = false, box = document.getElementById("box"), ul = box.getElementsByTagName("ul")[0], liList = ul.getElementsByTagName("li"), liLength = liList.length, onceMaxLeft = boxWidth = box.clientWidth;//这里一次定义了 moveAnimationTime,moveIng,box,ul,liList,liLength,onceMaxLeft 等全局变量 function moveAnimation(callBack) {//callBack是回调函数 if (moveIng) return false; moveIng = true; var moveInterval, name = callBack.name; if (name == "moveItemRight") { var moveS = 0; moveInterval = setInterval(function() { moveS -= 20; ul.style.left = moveS + "px"; if (Math.abs(moveS) === onceMaxLeft) { clearInterval(moveInterval); callBack();//调用回调函数 moveIng = false; }; }, 20); } else { var moveS = boxWidth * (-1), li = liList[3]; ul.insertBefore(li, liList[0]); ul.style.left = "-" + boxWidth + "px"; moveInterval = setInterval(function() { moveS += 20; ul.style.left = moveS + "px"; if (moveS >= 0) { clearInterval(moveInterval); callBack(); moveIng = false; }; }, 20); }; }; function moveItemRight() { var li = liList[0]; ul.appendChild(li); ul.style.left = "0px"; moveAnimationTime = setTimeout(function() { moveAnimation(moveItemRight); }, 3000); }; function moveItemLeft() { moveAnimationTime = setTimeout(function() { moveAnimation(moveItemLeft); }, 3000); }; function btnLeft() { if (moveAnimationTime) clearTimeout(moveAnimationTime);//moveAnimationTime 有值就是true 否则就是false moveAnimation(moveItemLeft); }; function btnRight() { if (moveAnimationTime) clearTimeout(moveAnimationTime); moveAnimation(moveItemRight); }; moveAnimationTime = setTimeout(function() { moveAnimation(moveItemRight); }, 2000); </script> </html>
setTimeout和setInterval的使用
这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。方 法
实际上,setTimeout和setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。
不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码。
虽然表面上看来setTimeout只能应用在on-off方式的动作上,不过可以通过创建一个函数循环重复调用setTimeout,以实现重复的操作。
深入学习:http://www.cnblogs.com/qiantuwuliang/archive/2009/06/20/1507304.html
Window clearTimeout() 方法
定义和用法
clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。clearTimeout()方法的参数必须是由setTimeout()返回的ID值。
语法
clearTimeout(id_of_settimeout)Window clearInterval() 方法
定义和用法
clearInterval() 方法可取消由 setInterval() 设置的 timeout。clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
语法
clearInterval(id_of_setinterval)在javascript中如果
设置 var xx,xxb=7;
if(xxb){
alert("5")
} else{
alert("000!")
} //弹出 5
if(xx){
alert("5")
} else{
alert("000!")
}//弹出000!
说明 条件语句中只要有值就是true 否则是false。
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
Null
在 JavaScript 中 null 表示 "什么都没有"。null是一个只有一个值的特殊类型。表示一个空对象引用。
用 typeof 检测 null 返回是object。 |
Undefined
在 JavaScript 中, undefined 是一个没有设置值的变量。typeof 一个没有值的变量会返回 undefined。
任何变量都可以通过设置值为 undefined 来清空。 类型为 undefined.
Undefined 和 Null 的区别
typeof undefined // undefinedtypeof null // object
null === undefined // false
null == undefined // true
var bba=null; if(bba){alert("bbbaaa")}else{alert("yyyyyy")}; //弹出 yyyyyy var ppp=undefined; if(ppp){alert("bbbaaa")}else{alert("yyyyyy")}; //弹出 yyyyyy
Js中的window.parent ,window.top,window.self 详解
在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法打开当前窗口的那个窗口。
window.self
功能:是对当前窗口自身的引用。它和window属性是等价的。
语法:window.self
注:window、self、window.self是等价的。
window.top
功能:返回顶层窗口,即浏览器窗口。
语法:window.top
注:如果窗口本身就是顶层窗口,top属性返回的是对自身的引用。
window.parent
功能:返回父窗口。
语法:window.parent
注:如果窗口本身是顶层窗口,parent属性返回的是对自身的引用。
在框架网页中,一般父窗口就是顶层窗口,但如果框架中还有框架,父窗口和顶层窗口就不一定相同了。
判断当前窗口是否在一个框架中:
<script type="text/javascript">
var b = window.top!=window.self;
document.write( "当前窗口是否在一个框架中:"+b );
</script>
你应当将框架视为窗口中的不同区域,框架是浏览器窗口中特定的部分。一个浏览器窗口可以根据你的需要分成任意多的框架,一个单个的框架也可以分成其它多个框架,即所谓的嵌套框架。
转载:http://blog.csdn.net/zdwzzu2006/article/details/6047632
相关文章推荐
- Js定时跳转
- 一些JS常用的方法
- JavaScript闭包面试题
- JsonPropertyOrder无法为DTO对象进行属性排序
- 次讲解js中的回收机制是怎么一回事。
- js函数中参数的传递
- 20个JS优化代码技巧
- 彻底理解js中this的指向,不必硬背。
- js对数组按顺序排序
- js观察者模式简单实现
- js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop。
- Js实现AES/RSA加密
- Js随机生成指定长度字符串
- Javascript—XPATH技术解析XML
- javascript 中的arguments.callee
- JS中showModalDialog 详细使用
- 关于使用非阻塞方式下载JavaScript
- <javascript>每日小结
- el表达式里面fn的用法
- chapter 14 表单脚本