现在的位置: 首页 > 综合 > 正文

JAVA WEB_javascript的初步(4)

2018年04月18日 ⁄ 综合 ⁄ 共 2780字 ⁄ 字号 评论关闭

1.编写程序完成下图功能:四个按钮分别具有加、减、乘、除的功能,三个文本框,分别用来输入数据及显示结果。

注:从文本框中输入的数据为字符串类型,需要转换成数值类型的数据才可计算。

parseInt (String) 将字符串转换为整型数字。 

parseFloat(String) 将字符串转换为浮点型数字 。



2.利用onChange事件,完成省会城市的选择,并实现鼠标指针跟随事件。



<html>
	<head>
		<title>计算器</title>
		<script type="text/javascript">
			function mars(tt)
			{				
				var num1,num2;
    			num1=parseFloat(document.myform.num1.value);
				num2=parseFloat(document.myform.num2.value);
				if (tt=="+")
					document.myform.result.value=num1+num2;
				if (tt=="-")
					document.myform.result.value=num1-num2;	
				if (tt=="*")
					document.myform.result.value=num1*num2;
				if (tt=="/")
					document.myform.result.value=num1/num2;
			}
		</script>
	</head>
	
<body>
		<form action="" method="post" name="myform" >
		  	<p>
				第一个数<input type="text" name="num1" ><br>
				第二个数<input type="text" name="num2" > 
			</p>
			
			<p>
				<input name="+" type="button" value="+" onClick="mars('+')">
				<input name="-" type="button" value="-" onClick="mars('-')">
				<input name="*" type="button" value="*" onClick="mars('*')">
				<input name="/" type="button" value="/" onClick="mars('/')">
			</p>
			
			<p>
				计算结果 <input name="result" type="text"> 
			</p>
		</form>
</html>

<html>
	<head>
		<title>鼠标指针跟随</title>
		<style>
			.hh
			{
				left:30;
				top:300;
				position:absolute;
			}
		</style>
		
		<script type="text/javascript">
			function mars1()
			{
				switch(shenghui.option.value)
				{
					case "13":
						shenghui.r.value="石家庄";
						break;
					case "11":
						shenghui.r.value="北京";
						break;
					case "44":
						shenghui.r.value="广州";
						break;
					case "23":
						shenghui.r.value="哈尔滨";
						break;
					case "21":
						shenghui.r.value="沈阳";
						break;
					case "45":
						shenghui.r.value="南宁";
						break;
					case "50":
						shenghui.r.value="重庆";
						break;
					case "71":
						shenghui.r.value="台湾";
						break;
					case "15":
						shenghui.r.value="呼和浩特";
						break;
				}		
			}
			
			function mars2(x,y)
			{
				mht.style.left = x;
				mht.style.top = y;	
			}
		</script>
		

	</head>
	
	<body onMousemove="mars2(event.x,event.y)">
		省会查询:
		<form name="shenghui">
		  <SELECT name="option" onChange="mars1()"> 
				<option value=0 selected="selected">请选择</option>
				<option value=34>安徽</option>
				<option value=11>北京</option>
				<option value=50>重庆</option>
				<option value=35>福建</option>
				<option value=62>甘肃</option>
				<option value=44>广东</option>
				<option value=45>广西</option>
				<option value=52>贵州</option>
				<option value=46>海南</option>
				<option value=13>河北</option>
				<option value=23>黑龙江</option>
				<option value=41>河南</option>
				<option value=42>湖北</option>
				<option value=43>湖南</option>
				<option value=32>江苏</option>
				<option value=36>江西</option>
				<option value=22>吉林</option>
				<option value=21>辽宁</option>
				<option value=64>宁夏</option>
				<option value=15>内蒙古</option>
				<option value=63>青海</option>
				<option value=31>上海</option>
				<option value=14>山西</option>
				<option value=37>山东</option>
				<option value=51>四川</option>
				<option value=61>陕西</option>
				<option value=12>天津</option>
				<option value=54>西藏</option>
				<option value=65>新疆</option>
				<option value=53>云南</option>
				<option value=33>浙江</option>
				<option value=71>台湾</option>
				<option value=81>香港</option>
				<option value=82>澳门</option>
				<option value=0>其他</option>
		  </SELECT>
		  <input type="text" name="r" value="请选择">
		</form>
		
		<div id="mht" class="hh"><img src="fish.gif"></div>
	</body>
</html>



抱歉!评论已关闭.