原生js轮播以及setTimeout和setInterval的理解

时间  2019-11-11
标签 原生 以及 settimeout setinterval 理解 栏目 JavaScript 繁體版
原文   原文链接

   下面这个代码是从一个群下载下来的，为了帮助本身理解和学习如今贴出来，与初学者共勉。javascript

<!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。不过二者各有各的应用场景。html

 方 法

实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段以后就将执行那段代码。java

不过这两个函数仍是有区别的，setInterval在执行完一次代码以后，通过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。web

虽然表面上看来setTimeout只能应用在on-off方式的动做上，不过能够经过建立一个函数循环重复调用setTimeout，以实现重复的操做。浏览器

深刻学习：http://www.cnblogs.com/qiantuwuliang/archive/2009/06/20/1507304.htmlapp

Window clearTimeout() 方法

定义和用法

clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。框架

clearTimeout()方法的参数必须是由setTimeout()返回的ID值。函数

语法

clearTimeout( id_of_settimeout)
 
 
 

Window clearInterval() 方法

定义和用法

clearInterval() 方法可取消由 setInterval() 设置的 timeout。post

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是一个只有一个值的特殊类型。表示一个空对象引用。

 

Note 用 typeof 检测 null 返回是object。

 

你能够设置为 null 来清空对象:

Undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。

typeof 一个没有值的变量会返回 undefined。

 


任何变量均可以经过设置值为 undefined 来清空。 类型为 undefined.

Undefined 和 Null 的区别

typeof undefined             // undefined
typeof 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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程