js 练习Day_03 点击计算三个数的最大值，省级联动

最新推荐文章于 2022-05-10 15:32:17 发布

??(Natsu)

最新推荐文章于 2022-05-10 15:32:17 发布

阅读量440

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/Natsu_xia/article/details/106295383

版权

练习1 需求：点击计算最大值时，将输入三个数中的最大值显示在最大值输入框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">		
			 window.onload = function() {			
				document.getElementById("button").onclick= function(){
				var num1=document.getElementById("num1").value;
				var num2=document.getElementById("num2").value;
				var num3=document.getElementById("num3").value;
				//判断三个值的最大值
				var max=0;
				if(num1>=max){
					max=num1;
				}
				if(num2>=max){
					max=num2;
				}
				if(num3>=max){
					max=num3;
				}
				document.getElementById("maxValue").value=max;
			}				
		}		
		</script>
		
	</head>
	<body>
		<p>数值1：<input type="text" id="num1"/></p>
		<p>数值2：<input type="text" id="num2"/></p>
		<p>数值3：<input type="text" id="num3"/></p>
		<p>最大值：<input type="text"  id="maxValue" /></p>
		<input type="button" id="button" value="计算最大值" />		
	</body>
</html>

效果图
在这里插入图片描述
练习2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#button{
				width: 120px;	
				background-color: silver;	
				font-size: 15px;	
				font-family: "仿宋";
				border: 1px cornflowerblue solid;	
			}
		</style>
		<script type = "text/javascript">
			window.onload = function getResult(){
				document.getElementById("button").onclick = function getResult(){
					var price = document.getElementById("price").value;
					var discount = document.getElementById("discount").value;
					var result = price*discount;
					alert("计算后的折扣价是："+result+"元");
				}
			}
		</script>
	</head>
	<body>
		<table>
			<tr>
				<td>书名：</td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td>作者：</td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td>价格：</td>
				<td><input type="text" id="price"/></td>
			</tr>
			<tr>
				<td>折扣：</td>
				<td><input type="text" id="discount"/></td>
			</tr>
		</table>
	    <p><input type="button" id="button" value="计算折扣价" onclick="getResult()"/></p>
	    
	</body>
</html>

效果图
在这里插入图片描述
练习3 省级联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>省级联动</title>
		
	</head>
	<body>
		 <!--this.value 表示的是value 值-->
		<select onchange="fun(this.value)">	
			<option value=" ">请选择</option>
			<option value="0">广东省</option>
			<option value="1">云南省</option>
			<option value="2">湖南省</option>
		</select>
		
		<select  id="city">
			<option value="0 ">请选择</option>	
		</select>
		
		<script >
			fun(0);
			//num表示的是上面的value值 0，1，2
			function fun(num){
				//定义一个二维数组，存储每个省份的城市
				var cityArray=[['广州市', '佛山市', '深圳市', '珠海市', '东莞市'],
                               ['昆明市', '丽江市', '普洱市', '腾冲市', '安宁市'],
                               ['长沙市', '株洲市', '湘潭市', '衡阳市', '岳阳市']];
            var citys = document.getElementById('city');   
            //将里面的内容清空
            citys.innerHTML='';
            
            //通过遍历再赋值
            //num 表示的是每一个省份
            var op='';
            for(var i = 0; i < cityArray[num].length; i++){
            op+='<option>'+cityArray[num][i]+'</option>';
           }
			citys.innerHTML = op;           
		}
		</script>
	</body>
</html>