利用二维数组创建动态下拉菜单&购物简易计算器

ゝ一纸荒年。 2022-04-16 00:41 218阅读 0赞

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>

运行结果图：  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70]  
2.购物简易计算器  
**实现效果如下：**  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 1]

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70]: /images/20220416/6bdcd2630e604f62bd12f8e1e2e624d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 1]: /images/20220416/a6f564705b6d40d6978849e5be3e4ffb.png