javascript基础案例解析
Posted woheni
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript基础案例解析相关的知识，希望对你有一定的参考价值。
学完了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=/^\w6,12$/; //如果验证通过，提示ok if (reg.test(uname)) alert("ok"); else alert("error:格式错误"); //否则：error，格式不正确 </script> </body> </html>
9、分支结构：利用if elseif语句判断不同的结果执行对于的操作！代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>if</title> </head> <body> //根据考试成绩获得相应的奖惩 <script> var score=prompt("请输入您的成绩"); score=parseInt(score); //方法1：标准格式 if(70>score&&score>=60) alert("自行车"); else if(80>score&&score>=70) alert("小刀电动车"); else if(90>score&&score>=80) alert("BYD"); else if(100>score&&score>=90) alert("BWM"); else if(score==100) alert("=B="); else if(score>100) alert("出国"); else alert("跪键盘"); //方法2：三目运算法则 alert((70>score&&score>=60)?"自行车":(80>score&&score>=70)?"小刀电动车":(90>score&&score>=80)?"BYD":(100>score&&score>=90)?"BWM":(score==100)?"=B=":(score>100)?"出国":"跪键盘"); </script> </body> </html>
10、验证码：从大写字母，小写字母，数字中随机选取4个字符，拼接为一个验证码！让用户输入一个验证码并验证！
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>验证码</title> </head> <body> <script> //封装函数getcode; function getCode() //从大写字母，小写字母，数字中随机选取4个字符，拼接为一个验证码 //生成一个0-n的随机数var r=parseInt(Math.random()*(n+1)) //将所有备选字符压入一个数组 //创建一个空数组chars,用于保存备选的字符 var chars=[]; //循环0-9数字的Unicode编码转换为对于字符，并压入chars for (var i=48;i<=57;i++) chars.push(String.fromCharCode(i)) //循环将A-Z字母的Unicode编码转换为对应字符，并压入chars for (var i=65;i<=90;i++) chars.push(String.fromCharCode(i)) //循环将a-z字母的Unicode编码转换为对应字符，并压入chars for (var i=97;i<=122;i++) chars.push(String.fromCharCode(i)) //循环从chars中取出4个随机字符，将其拼接在字符串code中 for (var i=0,code="";i<4;i++) //生成随机数r var r=parseInt(Math.random()*62) //从chars中取出r的字符，拼接到code code+=chars[r]; return code; //循环 do var code=getCode(); var n=prompt("请输入验证码"+code+"输入exit退出"); //如果输入正确（注意大小写） if (n.toLowerCase()==code.toLowerCase()) //提示验证通过，并退出循环 alert("验证通过"); break; //否则,如果用户输入exit，也可以退出 else if (n.toLowerCase()=="exit") //提示放弃登录 alert("放弃登录"); break; //否则，提示验证失败，重新输入 else //重新输入时需要更换新的验证码 alert("验证失败，请重新输入"); //否则循环一直执行 while(1) </script> </body> </html>
以上就是JavaScript最基础的案例，花费了不少的时间整理的，正所谓时间就是金钱，满满的都是财富！不能是金钱所能衡量的！！！
完结！
以上是关于javascript基础案例解析的主要内容，如果未能解决你的问题，请参考以下文章