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>