5.3.2 js函数小练习 Math.random()生成一个1-100的随机数，让用户、定义函数，圆的半径得到圆的面积、计算最大最小平均以及和、整体地址文本框：拼接显示在整体地址、三个下拉框

文章目录

1 使用Math.random()生成一个1-100的随机数，让用户在文本框中，猜这个值。如果大了就提示猜大了，小了则提示猜小了。直到猜中为止。

在这里插入图片描述
js:

var radnum = Math.round(Math.random() * 100);
			function cai() {
				// var text = document.getElementById("text");
				var lab = document.getElementById("lab");
				// console.log(text.value);
				if (typeof(text.value) != Number) {
					document.getElementById("lab").innerHTML = "输入不正确"
				}
				if (text.value > radnum) {
					document.getElementById("lab").innerHTML = "猜大了";
				}
				if (text.value < radnum) {
					document.getElementById("lab").innerHTML = "猜小了"
				}
				if (text.value == radnum) {
					document.getElementById("lab").innerHTML = "猜对了"
				}

			}

body:


<form action="" method="">
		<fieldset id="" style="width: 500px;height: 200px;">

			<legend>猜数字</legend>
			<input type="text" name="" id="text" value="" />
			<input type="button" name="" id="" value="猜" onclick="cai()" />
			<label id="lab"></label>
		</fieldset>
	</form>

2 定义函数，实现传入圆的半径得到圆的面积。

body

<form action="" method="">
		<input type="text" name="" id="ban" value="" placeholder="请输入半径" />
		<input type="button" name="" id="" value="点击计算" onclick="area()" />
		<div id="area">

		</div>
	</form>

<form action="" method="">
		<input type="text" name="" id="ban" value="" placeholder="请输入半径" />
		<input type="button" name="" id="" value="点击计算" onclick="area()" />
		<div id="area">

		</div>
	</form>

3 整5个文本框，计算最大最小平均以及和，并显示到一个标签中。注意：录入的值必须是数字点击按钮时判断不能为空必须是数字

<form action="" method="">
		请输入数字：<input type="text" name="" id="t1" value="" /><br>
		请输入数字：<input type="text" name="" id="t2" value="" /><br>
		请输入数字：<input type="text" name="" id="t3" value="" /><br>
		请输入数字：<input type="text" name="" id="t4" value="" /><br>
		请输入数字：<input type="text" name="" id="t5" value="" /><br>
		<input type="button" name="" id="" value="点击计算" onclick="five()" /><br>
		<label id="five"></label>
	</form>

function five() {
				var n1 = document.getElementById("t1");
				var n2 = document.getElementById("t2");
				var n3 = document.getElementById("t3");
				var n4 = document.getElementById("t4");
				var n5 = document.getElementById("t5");
				// console.log(n1.value);
				if (n1.value == "" || n2.value == "" || n3.value == "" || n4.value == "" || n5.value == "") {
					document.getElementById("five").innerHTML = "有数字没有输入";
					
				} else if (typeof(Number(n1.value)) != "number" || typeof(Number(n2.value)) != "number" || typeof(Number(n3.value)) != "number" || typeof(Number(n4.value)) !=
					"number" || typeof(Number(n5.value)) != "number") {
						// console.log(typeof(Number(n1.value)));
					document.getElementById("five").innerHTML = "输入格式不正确 请全部输入数字";
				} else {
					var sum = Number(n1.value) + Number(n2.value) + Number(n3.value) + Number(n4.value) + Number(n5.value);
					var max = Math.max(Number(n1.value), Number(n2.value),Number(n3.value),Number(n4.value),
						Number(n5.value));
					var min = Math.min(Number(n1.value), Number(n2.value), Number(n3.value), Number(n4.value),
						Number(n5.value));
					var avg = sum / 5;
					document.getElementById("five").innerHTML = "和：" + sum + ",最大值" + max + "，最小值" + min + "，平均数：" + avg;
				}

			}

4 整:4个文本框：省市县详细地址按钮触发：整体地址文本框：拼接显示在整体地址中

body:

<form action="" method="">
		<input type="text" name="" id="s" value="" placeholder="省" /><br>
		<input type="text" name="" id="i" value="" placeholder="市" /><br>
		<input type="text" name="" id="x" value="" placeholder="县" /><br>
		<input type="text" name="" id="c" value="" placeholder="详细地址" /><br>
		<input type="text" name="" id="z" value="" placeholder="整体地址" readonly="readonly" /><br>
		<input type="button" name="" id="" value="点击显示整体地址" onclick="xiang()" />
	</form>

function xiang() {
				document.getElementById("z").value = document.getElementById("s").value + document.getElementById("i").value +
					document.getElementById("x").value +
					document.getElementById("c").value;
			}

5 整三个下拉框一个文本框 onchange：内容改变事件整体地址文本框：拼接显示在整体地址中

body:

<select onchange="he()" id="se">
		<option value="">请选择</option>
		<option value="河南省" >河南省</option>
		<option value="浙江省" >浙江省</option>
		<option value="上海市" >上海市</option>
	</select>
	<select onchange="shi()" id="shi">
		<option value="">请选择</option>
	</select>
	<select onchange="qu()" id="qu">
		<option value="">请选择</option>
	</select>
	<input type="text" name="" id="xiang" value="" placeholder="详细地址" onblur="wan()" /><br>
	<input type="text" name="" id="wan" value="" placeholder="完整地址" />

js:

function he() {
				var sheng = document.getElementById("se");
				// console.log(sheng.value);
				if (sheng.value == "河南省")
					document.getElementById("shi").innerHTML =
					"<option>请选择</option><option value ='郑州市' >郑州市</option><option value ='新乡' >新乡市</option><option value ='南阳' >南阳市</option>"

				if (sheng.value == "浙江省")
					document.getElementById("shi").innerHTML =
					"<option>请选择</option><option value ='杭州' >杭州</option><option value ='嘉兴'>嘉兴</option>"
				document.getElementById("wan").value="";
				document.getElementById("wan").value+=sheng.value;
			}

			function shi() {
				var sheng = document.getElementById("se");
				var shi = document.getElementById("shi");
				
				// console.log(shi.value);
				if (shi.value == "郑州市")
					document.getElementById("qu").innerHTML =
					"<option>请选择</option><option value ='金水区' id='qu'>金水区</option><option value ='中原区'>中原区</option><option value ='高新区'>高新区</option>"
				if (shi.value == "杭州")
					document.getElementById("qu").innerHTML =
					"<option>请选择</option><option value ='上城区' id='qu'>上城区</option><option value ='西湖区'>西湖区</option>"
					document.getElementById("wan").value=sheng.value+shi.value;
			}
			
			function qu(){
				var sheng = document.getElementById("se");
				var shi = document.getElementById("shi");
				var qu1 = document.getElementById("qu").value;
				console.log(qu1)
				document.getElementById("wan").value=sheng.value+shi.value+qu1;
			}
			function wan(){
				var add = document.getElementById("xiang").value;
				document.getElementById("wan").value+=add;
			}