JS學習第十二天總結

1.昨天内容回顧

内置對象
- 日期對象 Date();
- 必須通過new才能使用
- get.time(); 擷取的是從1970年1月1日開始到現在的毫秒數
- 年月日時分秒、星期的擷取
- 案例練習：
  - 簡單的月曆年月日星期的擷取
  - 數字時鐘時分秒的擷取
  - 倒計時距離未來某個時間還有多少天多少小時多少分鐘多少秒
  - 鐘表案例用到了定時器 CSS3中的旋轉度數計算
定時器
- setInterval（函數，間隔時間）；

2.短信驗證案例

單标簽内容用value
雙标簽内容用innerHTML
在定時器中，this指向的是window
聲明that或者_this變量存儲this，後面就可以調用了
聲明timer等于null，然後使用clearInterval清除定時器
用定時器一般都是先清除定時器
disabled=“disabled” 按鈕點選禁用
在定時器外面在單獨調用一次函數，可以清除頁面的短暫停留，能很好的過渡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="text" />
		<button>點選發送驗證碼</button>
		<script type="text/javascript">
			var btn=document.getElementsByTagName("button")[0];
			btn.function(){
				var that=this;//使用that變量來存儲this
				var timer=null;//聲明暫時未指派的變量，一般讓它等于null
				var count=5;//點選事件内部聲明，可以不用重新指派
				clearInterval(timer);//使用定時器，上來先清除定時器
				timer=setInterval(sendMsg,1000);//使用timer來指向定時器，友善清除操作
				function sendMsg(){
					count--;
					if(count<0){
						that.innerHTML="點選重新發送";//單标簽内容一般用value，雙标簽一般用innerHTML
						clearInterval(timer);
						that.disabled=false;//恢複按鈕點選
					}else{
						that.innerHTML="倒計時還有"+count+"秒";
						that.disabled=true;//禁用按鈕點選功能
					}
				}
			}
		</script>
	</body>
</html>

3.5s後關閉廣告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#ad{
				width:100%;
				height:800px;
				background-color:skyblue;
			}
		</style>
	</head>
	<body>
		<div id="ad"></div>
		<script type="text/javascript">
			var ad=document.getElementById("ad");
			var count=5;
			setInterval(close,1000);
			function close(){
				count--;
				if(count==0){
					ad.style.display="none";
				}
			}
		</script>
	</body>
</html>

4.另一個定時器

setTimeout(函數，間隔時間)；
這個定時器是間隔時間之後執行函數，隻執行一次，和定時炸彈類似
setInterval定時器是每間隔多少秒就執行一次，一直循環，除非清除定時器
案例：5s之後頁面自動跳轉
- window.location.href=“url”;//BOM裡面内容
- setTimeout可以實作倒計時

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p id="pp">5秒自動跳轉至百度首頁</p>
		<script type="text/javascript">
			var pp=document.getElementById("pp");
			var count=5;
			setTimeout(tioazhuan,1000);//沒秒循環操作一次，達到倒計時效果
			function tioazhuan(){
				count--;
				if(count<=0){
					window.location.href="http://www.baidu.com" target="_blank" rel="external nofollow" ;
				}else{
					setTimeout(tioazhuan,1000);//函數自調用——遞歸
					pp.innerHTML=count+"秒自動跳轉至百度首頁";
				}
			}
		</script>
	</body>
</html>

5.arguments

arguments.length 實參個數
argument.callee 代表目前執行的函數

函數自己調用自己可以使用arguments.callee來替代
遞歸的典型案例——斐波那契數列 1 1 2 3 5 8 13 21

6.長圖滾動

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width:600px;
				height: 500px;
				border: 3px solid #333;
				margin:100px auto;
				overflow: hidden;
				position: relative;
			}
			span{
				width:600px;
				height:250px;
				position: absolute;
			}
			#imgs{
				position: absolute;
			}
			#tops{
				top:0;
			}
			#bottoms{
				top:250px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="img/QQ圖檔20190402085835.jpg" id="imgs"/>
			<span id="tops"></span>
			<span id="bottoms"></span>
		</div>
		<script type="text/javascript">			
			var box=$id("box");
			var tops=$id("tops");
			var bottoms=$id("bottoms");
			var imgs=$id("imgs");
			var num=0;
			var timer=null;	
			mouseover(tops,upMove);
			mouseover(bottoms,downMove);
			function $id(id){
				return document.getElementById(id);
			}
			function mouseover(name,fun){
				name.function(){				
					timer=setInterval(fun,1);				
				}
				name.function(){
					clearInterval(timer);
				}
			}			
			function downMove(){					
					if(num<=0){
						clearInterval(timer);
					}else{
						num--;
						imgs.style.top=-num+"px";
					}
				}
			function upMove(){
					if(num>=(1571-500)){
						clearInterval(timer);
					}else{						
						num++;
						imgs.style.top=-num+"px";
					}
				}					
		</script>
	</body>
</html>

7.運算符

一進制運算符正号、符号、++、–
二進制運算符 +、-、*、/、%
三元運算符表達式？真：假
邏輯運算符 &&、||、！
關系運算符 >、<、>=、<=、==、===、！=、！==
優先級順序
- ()括号
- ！非、-符号++、–
- *、/、%
- +、-
- >、<、>=、<=
- ==、===、！=、！==
- &&
- ||
- 三元運算符
五種假：0、null、undefined、""、false
&&：同真為真；
||：同假為假；

var a =  2  &&  4  || 3 ;//傳回4
var b = 0 && 3 || 4 ;//傳回4
var c= 0 && 1 || 3 && 4;//傳回4
var d = 4 && 5 && 6 ;//傳回6

小問題：getAttribute隻能擷取寫在html元素行内的屬性值，寫在CSS中的屬性是擷取不到的。

自己寫的一個小練習：點選按鈕出現相應盒子。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			button{
				width:80px;
				height:40px;
				display:block;
				float:left;
			}
			#father{
				clear: both;
			}
			#father div{
				width: 78px;
				height:500px;
				border:1px solid #666;
				margin:10px 0;
				text-align: center;
				line-height: 100px;
				visibility: hidden;
				float:left;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			var body=document.getElementsByTagName("body")[0];			
			var colors=["red","blue","yellow","purple","LightPink","Crimson","DoderBlue","ForestGreen","DarkKhaki","BlanchedAlmond","DimGray"];
			var num=colors.length;
			for(var i=0;i<num;i++){
				var cBtn=document.createElement("button");
				cBtn.innerHTML=i+1;
				body.appendChild(cBtn);					
			}
			var fatherDiv=document.createElement("div");
			fatherDiv.setAttribute("id","father");
			body.appendChild(fatherDiv);			
			for(var i=0;i<num;i++){
				var cDiv=document.createElement("div");
				cDiv.innerHTML=i+1;
				fatherDiv.appendChild(cDiv);					
			}
			var btns=document.getElementsByTagName("button");
			var fatherDiv=document.getElementById("father");
			var dvs=fatherDiv.getElementsByTagName("div");
			for(var i=0;i<btns.length;i++){
				btns[i].index=i;
				btns[i].function(){					
					for(var j=0;j<btns.length;j++){
						btns[j].style.backgroundColor="";
						dvs[j].style.visibility="hidden";
						dvs[j].style.backgroundColor="";
					}
					this.style.backgroundColor=colors[this.index];
					dvs[this.index].style.visibility="visible";
					dvs[this.index].style.backgroundColor=colors[this.index];
				}
			}
		</script>
	</body>
</html>

JS學習第十二天總結

1.昨天内容回顧

2.短信驗證案例

3.5s後關閉廣告

4.另一個定時器

5.arguments

6.長圖滾動

7.運算符

繼續閱讀

流程圖的渲染實作

組合模式（二）

document.execCommand()接口文檔

數組push、pop、shift、unshift的模拟實作

JavaScript--Global對象

JS練習 - 切換圖檔

JavaScript學習——正規表達式

Node.js學習筆記：如何編寫一個HTTP伺服器？connect子產品源碼學習

js學習筆記13-自增和自減

id錨點定位并加上偏移量的

【JS學習筆記 08】對象的原型與繼承原型對象

Vue--前端互動 fetchAPI

【JS學習筆記 01】JS中的資料類型JavaScript 資料類型

JS-RegExp 正規表達式課前補充RegExp 正規表達式

從一個url位址到最終頁面渲染完成，發生了什麼？