利用二維陣列建立動態下拉選單&購物簡易計算器
阿新 • • 發佈：2018-12-21
1.利用二維陣列建立動態下拉選單
<!doctype html> <html> <head> <meta charset="utf-8"> <title>實戰</title> <script type="text/javascript"> //建立一個二維陣列 var acity=new Array(); acity[0]=new Array(); acity[1]=new Array(); acity[2]=new Array(); acity[3]=new Array(); //給二維陣列賦值 acity[0][0]="---請選擇---"; acity[1][0]="---請選擇---"; acity[1][1]="廣州市"; acity[1][2]="深圳市"; acity[1][3]="佛山市"; acity[1][4]="珠海市"; acity[1][5]="汕頭市"; acity[2][0]="---請選擇---"; acity[2][1]="長沙市"; acity[2][2]="湘潭市"; acity[2][3]="株洲市"; acity[3][0]="---請選擇---"; acity[3][1]="合肥市"; acity[3][2]="蕪湖市"; acity[3][3]="安慶市"; function changecity() { var provinceIndex;//省份下標 provinceIndex=document.frm.optprovince.selectedIndex; icitycount=0;//城市下標 while(acity[provinceIndex][icitycount]!=null) icitycount++;//計算選定省份的城市個數 document.frm.optcity.length=icitycount;//改變下拉選單的選項數 for(var i=0;i<icitycount;i++)//改變下拉選單的內容 document.frm.optcity[i]=new Option(acity[provinceIndex][i]); document.frm.optcity.focus(); } </script> </head> <body> <h3>請選擇省份及城市</h3> <form name="frm"> <p>省份: <select name="optprovince" onChange="changecity()"> <option>--請選擇--</option> <option>廣東</option> <option>湖南</option> <option>安徽</option> </select> </p> <p>城市: <select name="optcity"> <option>--請選擇--</option> </select> </p> </form> </body> </html>
執行結果圖：
2.購物簡易計算器
實現效果如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>簡易購物計算器</title> <style type="text/css"> *{ margin:0px; padding:0px; }//清除預設樣式 div { width:800px;//設定寬 margin:50px auto;//使其居中 } p{ padding:20px 0px;//內邊距上下距離為20，左右距離為0 } h1,h3{ padding:20px 0px;//內邊距上下距離為20，左右距離為0 } span{ margin-right:20px;//右外邊距為20 } } #addbutton2{ width:40px;//+按鈕的寬為40 } #subbutton2{ width:40px;//-按鈕的寬為40 } #mulbutton2{ width:40px;//*按鈕的寬為40 } #divbutton2{ width:40px;//除法按鈕的寬為40 } </style> <script type="text/javascript"> function computer(op)//op為形參 { var num1,num2; num1=parseFloat(document.myform.txtnum1.value); num2=parseFloat(document.myform.txtnum2.value); if(op=="+") document.myform.txtresult.value=num1+num2; if(op=="-") document.myform.txtresult.value=num1-num2; if(op=="*") document.myform.txtresult.value=num1*num2; if(op=="/" && num2!=0) document.myform.txtresult.value=num1/num2; } </script> </head> <body> <div> <h1><img src="img/1.png" width="100" height="100">歡迎來到黑桃科技</h1> <form name="myform" id="myform" method="post"> <h3><img src="img/2.png" width="50" height="50">購物簡易計算器</h3> <p>第一個數<input type="text" name="txtnum1" class="textbaroder" id="txtnum1" size="25"></p> <p>第二個數<input type="text" name="txtnum2" class="textbaroder" id="txtnum2" size="25"></p> <span class="sp1"><input type="button" value="+" name="addbutton2" id="addbutton2" onClick="computer('+')"></span> <span><input type="button" value="-" name="subbutton2" id="subbutton2" onClick="computer('-')"></span> <span><input type="button" value="*" name="mulbutton2" id="mulbutton2" onClick="computer('*')"></span> <span><input type="button" value="/" name="divbutton2" id="divbutton2" onClick="computer('/')"></span> <p>計算結果<input type="text" name="txtresult" class="textbaroder" id="txtresult" size="25"></p> </form> </div> </body> </html>