原生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是一個只有一個值的特殊類型。表示一個空對象引用。

	用 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

功能：返回父窗口。