10個js小案例
知識梳理：javascript
1.DOM(document object model)文檔對象模型：html(標籤對象集合)html
標籤名獲取對象：document.getElementsByTagName('標籤名');//返回的是一個數組前端
類名獲取對象：document.getElementsClassName('類名’);//返回的是一個數組java
id獲取(id惟一):document.getElementById();
jquery
獲取內容標籤：innerText,innerHTMLes6
區別：innerHTML能夠把標籤寫進htmlweb
基本操做：ajax
建立標籤：var h1=document.createElement('h1');正則表達式
給標籤追加標籤:var div=document.getElementsByTagName('div')[0] //獲取第一個div後端
div.appendChild(h1); //這樣就把h1標籤添加到了div中
類名操做：
對象.className='類名';
標籤已經有類名的狀況下：
標籤對象.classList.remove('移除的類名');
標籤對象.classList.add('追加的類名');
標籤對象.classList.contains('是否包含的類名'); //判斷：返回true或者false
標籤對象屬性操做：
標籤對象.setAttribute('屬性名','屬性值'); //設置屬性
標籤對象.setAttribute('屬性名'); //獲取屬性
查找子節點：
firstElementChild; //第一個子節點
lastElementChild; //最後一個子節點
children; //返回的是數組
查找父節點：parentNode; //父節點
查找兄弟節點：
previousElementSibling //查找上一個兄弟
nextElementSibling //查找下一個兄弟
2.BOM(Browser objece model)
window(打印，打開窗口，關閉窗口等)
location(跳轉頁面和截取瀏覽器地址信息等)
history（歷史，回退和前進等）
如：go(n)和back()
n表示前進到第幾張網頁，設爲-1表示back()
navigator（能夠看瀏覽器的信息）
如:navigator.userAgent（能夠獲取到瀏覽器的一些基本信息）
screen（屏幕）
screen.height、screen.width（屏幕寬高 能夠單電腦的分辨率）
clientWidth(標籤對象的寬度：width+padding)
offsetWidth(標籤對象的寬度：width+padding+border)
scorllWidth(標籤對象的寬度,內容若是超出了盒子也算：width+padding)
document.documentElement.clientHeight;(可視區域的高)
document.documentElement.clientWidth;(可視區域的寬)
3.JOM（javascript object model）
內置對象
Math:sqrt()-->(開平方)、abs()-->(絕對值)、random()-->(隨機數)、PI-->(π)、floor(n)-->（向下取整）、ceil(n)-->（向上取整）
Array（數組）
String（字符串）
1) length
2) substr(下標，下標)-->(截取字符：包左不包右)
3) charAt(n)-->(提取：第n個）
4）indexOf('值')-->(查找值的下標)
4.Date(日期)
建立對象 new Date();
獲取：
1) getYear() -->es3之前的單位，1999以後返回四位數字，可加上1900,數值能夠準確
2) getFullYear() -->獲取的是當前的年份
3) getMonth() -->月（0-11）
4) getDay() -->星期（1-7）
5) getDate() -->天數（1-31）
6) getHours() -->時（0-23）
7) getMinutes() -->分（0-59）
8) getseconds() -->秒（0-59）
9) getTime() -->（1970到如今的毫秒值）
注意：獲取時分秒後面都有一個s
5.定時器
定時器：setTimeout(操做,毫秒數);-->只執行一次
間隔定時器：setInterval(操做,毫秒數);-->間隔執行
6.事件（event）
鼠標：
onmousedown(鼠標按鈕被按下) onmousemove(鼠標被移動) onmouseout(鼠標從某元素移開) onmouseover(鼠標移到某元素上)
鍵盤：
onkeydown(某個鍵盤按鍵被按下) onkeypress(某個鍵盤按鍵被按下並鬆開) onkeyup(某個鍵盤按鍵被鬆開)
其餘事件：
onclick(單擊) ondelclick(雙擊)
注意：事件的全部單詞被當作一個單詞處理，因此不遵循駝峯規範
7.閉包：
由於var的變量提高特性，在for循環中獲取到的值永遠是最大值。在es6中，let解決了這個問題
8:ajax:
js的基本寫法，5個基本步驟
9.變量的7種基本類型
number（數字）、string（字符串）、boolean（布爾）、undefined（未定義）、null（空）、array（數組）、object（對象）
其中對象是一種特殊的類型
1.換圖片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>電燈開關</title> </head> <body> <img id="light" src="img/off.gif"> <script> i=0; imgid = document.getElementById("light"); imgid.onclick=function(){ if(i%2==0){ imgid.src="img/on.gif"; //換圖 }else{ imgid.src="img/off.gif"; //點擊換回來 } i++; } </script> </body> </html>
2.觸碰行變色
<!DOCTYPE html> <html lang="zn"> <head> <meta charset="UTF-8"> <title>demo</title> <style> *{ font-family: 微軟雅黑； } .h{ background-color: #ccc; } .h:hover,h2:hover{ background-color: #999; } </style> </head> <body> <script type="text/javascript"> for(i=1;i<8;i++){ if(i%2==0){ document.write("<h2 class='h'>"+i+"</h2><br>"); } else{ document.write('<h2>'+i+'</h2><br>'); } } </script> </body> </html>
3.多選，反選，全選
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <!-- <style> *{ font-family: 微軟雅黑; margin: 0px; padding: 0px; } </style> --> </head> <body> <form action="javascript:"> <p>選擇愛好:</p> <p><label><input type="checkbox" name="">登山</label></p> <p><label><input type="checkbox" name="">登山</label></p> <p><label><input type="checkbox" name="">登山</label></p> <p><label><input type="checkbox" name="">登山</label></p> <p><label><input type="checkbox" name="">登山</label></p> <p><label><input type="checkbox" name="">登山</label></p> <p><label><input type="checkbox" name="">登山</label></p> <p><label><input type="checkbox" name="">登山</label></p> <p> <button id='all'>全選</button> <button id='noall'>全不選</button> <button id='unall'>反選</button> </p> </form> </body> <script> all=document.getElementById('all'); noall=document.getElementById('noall'); unall=document.getElementById('unall'); objs=document.getElementsByTagName('input'); //全選 all.onclick=function(){ for(i=0;i<objs.length;i++){ objs[i].checked=true; } } //全不選 noall.onclick=function(){ for(i=0;i<objs.length;i++){ objs[i].checked=false; } } //反選 unall.onclick=function(){ for(i=0;i<objs.length;i++){ // if(objs[i].checked){ // objs[i].checked=false; // }else{ // objs[i].checked=true; // } //三元運算符改進 //objs[i].checked=objs[i].checked?false:true; //一元運算符 objs[i].checked=!objs[i].checked; } } </script> </html>
4.秒錶
<!DOCTYPE html> <html lang="zn"> <head> <meta charset="UTF-8"> <title>秒錶</title> <style> .contain{ width: 200px; height: 50px; background: #000; border-radius: 20px; font-weight: bold; color: #0f0; text-align: center; font-size: 30px; line-height: 50px; } </style> </head> <body> <div class="contain"> <span id="Interval">10:38:00</span> </div> <button id='pause'>暫停</button> <button id='action'>開始</button> <script> //獲取日期對象 function getDate(){ dobj=new Date(); hour = dobj.getHours(); //時 minute=dobj.getMinutes(); //分 second = dobj.getSeconds();//秒 str=hour+":"+minute+":"+second; dsq=document.getElementById("Interval");//獲取id Interval dsq.innerHTML=str; } //未點擊按鈕前，先執行一次 getDate(); start(); //開始函數 function start(){ sobj=setInterval(getDate,1000); //設置定時器，一秒鐘執行一次getDate() } //中止函數 function stop(){ clearInterval(sobj); //清除定時器 } //關閉按鈕 c = document.getElementById("pause"); c.onclick=function(){ stop(); } //開始按鈕 action = document.getElementById("action"); action.onclick=function(){ start(); } </script> </body> </html>
5.表單事件和鼠標事件
<!DOCTYPE html> <html lang="zn"> <head> <meta charset="UTF-8"> <title>表單事件和鼠標、鍵盤事件</title> <style> .txt{ border-style: 2px solid; } </style> </head> <body> <form action="http://www.baidu.com" method="get" id='fid'> <p>用戶名</p> <input class="txt" type="text" name="name" placeholder="請輸入用戶名" id="input" value="java"> <input class="txt" type="text" name="name" value="javascript" id="input2"> <input class="txt" type="text" id='input3'> <input class="txt" type="text" id='input4'> <!-- 下拉菜單 --> <select id='s1'> <option placeholder="選擇城市">選擇城市</option> <option value="北京">北京</option> <option value="太原">太原</option> <option value="南京">南京</option> <option value="南寧">南寧</option> <option value="天津">天津</option> </select><br> <h3>請確認你選擇的城市：<span id="s2"> </span></h3> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> <script type="text/javascript"> inobj=document.getElementById('input'); inobj.onfocus=function(){ this.style.outlineColor="#f00"; } /*inobj.onblur=function(){ val=this.value; if(val.length<6){ alert("用戶名至少6位"); } }*/ //當值改變的時候 inobj.onchange=function(){ alert("不要改變個人元素"); } //當表單元素被選中的時候 inobj.onselect=function(){ alert('我已被選中'); } //當表單提交的時候 fidobj=document.getElementById('fid'); fidobj.onsubmit=function(){ r = confirm('您要提交表單嗎？'); if(!r){ return false; } } //當表單重置的時候 fidobj.onreset=function(){ r = confirm('你要重置嗎？'); if(!r){ return false; } } //onchange應用下拉菜單 s1obj=document.getElementById('s1'); s2obj=document.getElementById('s2'); s1obj.onchange=function(){ s1val=this.value; s2obj.innerHTML=s1val; } //得到表單焦點，全選中表單元素 inobj2=document.getElementById('input2'); inobj2.onfocus=function(){ this.select();//全選 } //鼠標事件 //鼠標移入 inobj.onmouseenter=function(){ this.value="I love javascript"; } //鼠標移出 inobj.onmouseleave=function(){ this.value="I love java"; } inobj3=document.getElementById('input3'); //鼠標一移動 inobj3.onmousemove=function(){ this.style.outlineColor="#f00"; this.value="javascript"; } //鍵盤事件 inobj4=document.getElementById('input4'); //鍵盤按下時 /*inobj4.onkeydown=function(){ alert('你按下就會觸發我'); }*/ //鍵盤彈起時 /*inobj4.onkeyup=function(){ //alert('你彈起鍵盤就會觸發我'); val = this.value.toUpperCase();//轉成大寫 this.value=val; }*/ //鍵盤按下並釋放一個鍵 inobj4.onkeypress=function(){ alert('按住我不放，我會一直彈出的喔'); } </script> </body> </html>
6.回到頂部案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回到頂部案例</title> <style> .fooer{ position: fixed; bottom: 0px; right:0px; margin-bottom: 15px; margin-right: 15px; } img{ width: 120px; height: 130px; cursor: pointer; } </style> </head> <body> <div class="fooer"> <!-- <a href="#abc"> --> <img src="img/arrive.png" alt="回到頂部" id="ar" /> </a> </div> <!-- 用錨點方法 --> <!-- <a name="abc"></a> --> <!-- sublime快速生成 h1{$$$$$$$$$}*100 再按tab鍵--> <h1>0000000000000001</h1> <h1>0000000000000002</h1> <h1>0000000000000003</h1> <h1>0000000000000004</h1> <h1>0000000000000005</h1> <h1>0000000000000006</h1> <h1>0000000000000007</h1> <h1>0000000000000008</h1> <h1>0000000000000009</h1> <h1>0000000000000010</h1> <h1>0000000000000011</h1> <h1>0000000000000012</h1> <h1>0000000000000013</h1> <h1>0000000000000014</h1> <h1>0000000000000015</h1> <h1>0000000000000016</h1> <h1>0000000000000017</h1> <h1>0000000000000018</h1> <h1>0000000000000019</h1> <h1>0000000000000020</h1> <h1>0000000000000021</h1> <h1>0000000000000022</h1> <h1>0000000000000023</h1> <h1>0000000000000024</h1> <h1>0000000000000025</h1> <h1>0000000000000026</h1> <h1>0000000000000027</h1> <h1>0000000000000028</h1> <h1>0000000000000029</h1> <h1>0000000000000030</h1> <h1>0000000000000031</h1> <h1>0000000000000032</h1> <h1>0000000000000033</h1> <h1>0000000000000034</h1> <h1>0000000000000035</h1> <h1>0000000000000036</h1> <h1>0000000000000037</h1> <h1>0000000000000038</h1> <h1>0000000000000039</h1> <h1>0000000000000040</h1> <h1>0000000000000041</h1> <h1>0000000000000042</h1> <h1>0000000000000043</h1> <h1>0000000000000044</h1> <h1>0000000000000045</h1> <h1>0000000000000046</h1> <h1>0000000000000047</h1> <h1>0000000000000048</h1> <h1>0000000000000049</h1> <h1>0000000000000050</h1> <h1>0000000000000051</h1> <h1>0000000000000052</h1> <h1>0000000000000053</h1> <h1>0000000000000054</h1> <h1>0000000000000055</h1> <h1>0000000000000056</h1> <h1>0000000000000057</h1> <h1>0000000000000058</h1> <h1>0000000000000059</h1> <h1>0000000000000060</h1> <h1>0000000000000061</h1> <h1>0000000000000062</h1> <h1>0000000000000063</h1> <h1>0000000000000064</h1> <h1>0000000000000065</h1> <h1>0000000000000066</h1> <h1>0000000000000067</h1> <h1>0000000000000068</h1> <h1>0000000000000069</h1> <h1>0000000000000070</h1> <h1>0000000000000071</h1> <h1>0000000000000072</h1> <h1>0000000000000073</h1> <h1>0000000000000074</h1> <h1>0000000000000075</h1> <h1>0000000000000076</h1> <h1>0000000000000077</h1> <h1>0000000000000078</h1> <h1>0000000000000079</h1> <h1>0000000000000080</h1> <h1>0000000000000081</h1> <h1>0000000000000082</h1> <h1>0000000000000083</h1> <h1>0000000000000084</h1> <h1>0000000000000085</h1> <h1>0000000000000086</h1> <h1>0000000000000087</h1> <h1>0000000000000088</h1> <h1>0000000000000089</h1> <h1>0000000000000090</h1> <h1>0000000000000091</h1> <h1>0000000000000092</h1> <h1>0000000000000093</h1> <h1>0000000000000094</h1> <h1>0000000000000095</h1> <h1>0000000000000096</h1> <h1>0000000000000097</h1> <h1>0000000000000098</h1> <h1>0000000000000099</h1> <h1>0000000000000100</h1> </body> <script> //用js方法 window.onscroll=function(){ st=document.documentElement.scrollTop;//獲取滾動的高 document.title=st; arobj=document.getElementById('ar'); arobj.onclick=function(){ document.documentElement.scrollTop=0;//設置爲0，回到頂部 } } </script> </html>
7.正則表達式
1）匹配電話號碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正則匹配電話號碼</title> </head> <body> <h1>正則匹配電話號碼</h1> </body> <script> phone='13876457345'; if(phone.match(/^138+(\d{8})+$/g)){ alert('電話匹配成功'); }else{ alert('匹配失敗'); } </script> </html>
2）匹配郵箱
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正則郵箱格式</title> </head> <body> <h1>正則匹配郵箱</h1> </body> <script type="text/javascript"> email='1363f@qq.com' if(email.match(/^\w+@\w+\.\w+$/i)){ alert('郵箱格式正確'); }else{ alert('郵箱格式有誤'); } </script> </html>
3）替換
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>替換</title> </head> <body> <h1>替換</h1> <script> //有'2019/7/15'換成2019-7-15 date='2019/7/15'; time=date.replace(/(\d+)\/+(\d+)\/+(\d)/g,"$1-$2-$3"); alert(time); </script> </body> </html>
8.閉包
閉包的定義：在一個函數的內部有一個返回的函數，內部的函數使用外部函數的變量，經過returnf返回，內部函數被拋到外部，致使這個變量沒有被釋放回收。（至關於全局變量）。
首先函數有三種基本調用的方式：
第一種：基本調用（函數名加括號調用）
第二種：變量調用
如：var fun=function methedName(){};
fun();
第三種：強制調用
把一個函數用括號包裹起來，再寫一對括號強制調用一次
如：(function fun(){
alert(1);
})();
匿名函數調用也是這用調法
如(
function(){
alert(1);
}
)();
特殊：有時能夠省略這種包裹的括號，好比在定時器內，點擊事件內，就不用包裹的括號，
注意：一個函數return（返回）什麼，該函數就表明什麼
如：function fun(){
return {};
}
var funobj=fun();
實際上變量funobj={};
那麼，返回的既然是一個對象，就能夠按照對象的使用方法，用變量funobj去操做對象。
再好比：function fun(){
return function(){
alert(1);
}
}
var funMe=fun();
分析：fun()返回的是一個函數，funMe();就這樣調用便可
若是沒有變量funMe;要想使用內部的匿名函數，fun()();這樣調用便可
閉包切換圖片的簡單應用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box>span{ display: inline-block; width: 100px; background: #faa; height: 50px; color:#fff; font-size:24px; text-align: center; line-height: 50px; } #box>span:hover{ background: orange; } img{ display: none; } </style> </head> <body> <div id="box"> <span>圖1</span> <span>圖2</span> <span>圖3</span> </div> <img src="路徑" alt="圖1" > <img src="路徑" alt="圖2" > <img src="路徑" alt="圖3" > <script type="text/javascript"> window.onload=function(){ //獲取box的子 var boxs=document.getElementById('box').children; for(var i=0;i<boxs.length;i++){ boxs[i].onclick=function(){ var k=i; return function(){ var imgobj=document.getElementsByTagName('img'); //把全部的圖片隱藏 for(var j=0;j<imgobj.length;j++){ imgobj[j].style.display='none'; } //顯示當前點擊的圖片 imgobj[k].style.display='block'; }; }(); } } </script> </body> </html>
9.控制圖片走動
經過event.clientX和event.clientY來獲取鼠標移動的座標
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移動圖片</title> <style> img{ position: absolute; top:0px; left: 0px; } </style> </head> <body> <img id="light" src="img/69.png"> <script> imgobj=document.getElementById('light'); //鼠標移動改變標題 //document.onmousemove=function(){ // document.title='你還好嗎'; //} //移動鼠標顯示像素 //document.onmousemove=function(event){ // x=event.clientX; // y=event.clientY; // document.title=x+"-"+y; //} //移動圖片 document.onmousemove=function(event){ x=event.clientX; y=event.clientY; imgobj.style.top=x+"px"; imgobj.style.left=y+"px"; } </script> </body> </html>
10.ajax
ajax是處理前端和後端數據的通信，是一種無須加載完整個頁面實現網頁部分刷新的技術，同時和定時器、框架、同樣也是實現異步的一種方式。在客戶端請求ajax時，ajax處理數據有可能會失敗，因此有一種失敗的狀態，在jquery框架中ajax更加的清晰。
js中寫ajax的步驟
1.聲明一個xhr對象
2.打開發射器open
3.聲明請求頭
4.發射（發射器發射）
5.處理狀態（等待ajax處理）
模擬請求百度的ajax,具體代碼實現
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box"> </div> <script type="text/javascript"> var box = document.getElementById('box'); // 1.聲明 var xhr=new XMLHttpRequest(); // 2.發射器(參數1：發送數據的方式，參數2：接口地址，參數3：false(同步),true(異步)) xhr.open('get','http://wwww.baidu.com',true); // 3.設置請求頭類型 //xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // 4.發送數據 xhr.send(); // 5.狀態 box.innerHTML='加載中...' xhr.onreadystatechange=function(){ setInterval(function(){ if(xhr.status==200&&xhr.readyState==4){ //(readyState)五種準備狀態 0:未發送 1:已發送 2:已收到 3:正在處理 4:處理完畢 //(status)三種結果狀態 200:成功 0:失敗 404:服務器未找到 box.innerHTML='加載完畢' } },1000); } </script> </body> </html>
經過請求百度的接口，模擬請求的時間，若是瀏覽器（谷歌）出現了：No 'Access-Control-Allow-Origin'這種錯誤，說明瀏覽器須要降級
點擊瀏覽器鼠標右鍵屬性：在地址的最後面空格再添加--disable-web-security --user-data-dir=c:\
c表示瀏覽器所在的盤符
2019-08-24 21:52:37
- 1. js小案例
- 2. JS小案例: 貪吃蛇
- 3. JS基礎小案例
- 4. JS小案例分析
- 5. 一個JSONP的小案例
- 6. 一個shell小案例
- 7. 幾個繪圖小案例
- 8. js的案例
- 9. js案例
- 10. js 案例
- 更多相關文章...
- • MySQL FLOAT、DOUBLE、DECIMAL（小數類型） - MySQL教程
- • 第一個MyBatis程序 - MyBatis教程
- • PHP Ajax 跨域問題最佳解決方案
- • 常用的分佈式事務解決方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. js小案例
- 2. JS小案例: 貪吃蛇
- 3. JS基礎小案例
- 4. JS小案例分析
- 5. 一個JSONP的小案例
- 6. 一個shell小案例
- 7. 幾個繪圖小案例
- 8. js的案例
- 9. js案例
- 10. js 案例