學完了JavaScript基礎部分，總結出一些基本案例，以備日後查看！ 1、九九乘法口訣表：在控制臺中輸出九九乘法口訣表！代碼如下： 2、水仙花數：所謂“水仙花數”是指一個三位數，其各位數字立方和等於該數本身！代碼如下： 3、輪播圖片：利用數組知識，實現簡單的輪播效果！代碼如下： 4、字元串拼接：給 ...
學完了JavaScript基礎部分，總結出一些基本案例，以備日後查看！
1、九九乘法口訣表：在控制臺中輸出九九乘法口訣表！代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>乘法口訣表</title> </head> <body> <script> for (var i =1; i<=9; i++) { //i控制行 for (var j =1,str="";j<=i; j++) { //j控制列 str +=j+"x"+i+"="+i*j+" "; } console.log(str); } </script> </body> </html>
2、水仙花數：所謂“水仙花數”是指一個三位數，其各位數字立方和等於該數本身！代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>水仙花數</title> </head> <body> <script> for(var i=100; i<1000; i++) { var hundreds = parseInt(i/100); //定義百位數變數，並賦值 var decade = parseInt(i/10%10); //定義十位數變數，並賦值 var unit = (i%10); //定義個位數變數，並賦值 var sum = Math.pow(hundreds,3)+Math.pow(decade,3)+Math.pow(unit,3); //定義三位數各個數位的立方和賦值給一個新變數 if (sum==i) { //如果i的值等於變數sum的值，那麼這個數就是水仙花數 console.log(i); //在控制臺中列印該數 } } </script> </body> </html>
3、輪播圖片：利用數組知識，實現簡單的輪播效果！代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>輪播圖片</title> </head> <body> <div style="margin-top:200px;margin-left:350px"> <button id="pre" style="position:relative;top:-135px;">上一張</button> <div id="picture" style="width:400px;height:267px;display:inline-block;"> </div> <button id="next" style="position:relative;top:-135px;">下一張</button> </div> <script> var imgs=['11.jpg','22.jpg','33.jpg','44.jpg','55.jpg']; //創建數組存放五張圖片 str="<img src="+imgs[4]+">"; picture.innerHTML=str; //將數組中的五張圖片獲取到頁面中 pre.onclick=function() { //單擊上一張按鈕時觸發的事件 console.log(imgs); var img=imgs.splice(4,1); //刪除 imgs.splice(0,0,String(img)); //添加 console.log(imgs); //列印 str="<img src="+imgs[0]+">"; picture.innerHTML=str; //獲取 } next.onclick=function() { //單擊下一張按鈕時觸發的事件 var img=imgs.splice(0,1); imgs.splice(4,0,String(img)); str="<img src="+imgs[4]+">"; picture.innerHTML=str; } </script> </body> </html>
4、字元串拼接：給周一到周五每個字元串前拼接 "星期"，周六周末替換：“今天休息”！代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>遍歷</title> </head> <body> <script> var week=['日','一','二','三','四','五','六']; //給周一到周五每個字元串前拼接 "星期"，周六周末替換：“今天休息” for(var i=0;i<week.length;i++) { // 通過遍歷查找數組中i if (week[i]=='六'||week[i]=='日') { //如果數組中i取值為六或日 week[i]='今天休息'; //那麼今天時休息日 }else { week[i]="星期"+week[i]; //否則顯示日期星期幾 } } </script> </body> </html> //
5、遍歷：輸出數組中最大和最小的數，並將原數組從小到大排序！代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var nums=[16,6,45,71,92,25,89,57,23]; //創建一個數組 //遍歷，輸出數組中最大和最小的數！ for (var i=1,min=max=nums[0];i<nums.length;i++) { //遍曆數，創建臨時變數max保存最大的值和最小的值並初始化為0號元素 if (nums[i]>max) { //如果遍歷到的當前元素大於max,就將當前元素的值賦值給max max=nums[i]; }else if (nums[i]<min) { //否則如果當前元素小於min，就將當前元素賦值給min min=nums[i] } } console.log("nums中最大的數是"+max+"\n最小的數是"+min); //將原數組排序：從小到大 for (var j=nums.length-1;j>0;j--) { //迴圈遍曆數組 for (var i=0;i<j;i++) { if (nums[i]>nums[i+1]) { //如果前一個數大於後面的數，按位取反 var temp=nums[i]; nums[i]=nums[i+1]; nums[i+1]=temp; } } } console.log(nums); //列印出排序後的數組 </script> </body> </html>
6、字元串與Unicode編碼互轉：將以代碼中的字元串信息中的每個字元轉為對應的unicode編碼，再拼接為一個codes！並將獲取到的codes編碼解碼為原信息！代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>trans</title> </head> <body> <script> var msg="3306，不見不散！"; //將以上信息，每個字元轉為對應的unicode碼，再拼接為一個codes //遍歷字元串，將每次遍歷到的字元msg[i]， for(var i=0,codes="";i<msg.length;i++){ //將當前msg[i]轉為unicode拼接到codes， codes+=msg.charCodeAt(i)+100000;//將每個字元的unicode編碼轉為6位數 } //輸出拼接的codes console.log(codes); //發送 //將獲取到的codes編碼解碼為原信息 //迴圈遍歷codes，每6位選取一次 for (var i=0,nmsg="";i<codes.length; i+=6) { nmsg+=String.fromCharCode(codes.substr(i,6).slice(1)); } console.log(nmsg); </script> </body> </html>
7、sort排序：手寫sort方法，並定義其比較器函數(作為參數傳遞給sort使用)！代碼如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <script> // 將數組[3, 3, 5, 6, "A", "a"] 從小到大排序 function sort(arr,comp){ for(var j=arr.length-1;j>0;j--){ for(var i=0;i<j;i++){ if(comp){ if(comp(arr[i],arr[i+1])>0){ var temp=arr[i]; arr[i]=arr[i+1]; arr[i+1]=temp; }else if(isNaN(arr[i])&&String(arr[i])>String(arr[i+1])){ var temp=arr[i]; arr[i]=arr[i+1]; arr[i+1]=temp; } } else{ if(String(arr[i])>String(arr[i+1])){ var temp=arr[i]; arr[i]=arr[i+1]; arr[i+1]=temp; } } } } } var arr = [6,3,"a",3,5,"A"]; function c1(a,b){return b-a}; sort(arr); console.log(arr);// 正確排序結果[3, 3, 5, 6, "A", "a"] </script> </body> </html>
8、驗證正則：驗證是否符合正則：6-12位 的字母數字下劃線組合！代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>login</title> </head> <body> <script> //請用戶輸入一個用戶名 var uname=prompt("用戶名"); //驗證是否符合正則：6-12位 的字母數字下劃線組合 var reg=/^\w{6,12}$/; //如果驗證通過，提示ok if (reg.test(uname)) { alert("ok"); }else { alert("error:格式錯誤"); } //否則：error，格式不正確 </script> </body> </html>
9、分支結構：利用if elseif語句判斷不同的結果執行對於的操作！代碼如下：
<!DOCTYPE html>
