当前位置：网站首页>JS function exercises

JS function exercises

2022-06-25 12:41:00 【Fall in love with*】

1. Use Math.random() Generate a 1-100 The random number , Let the user in the text box , Guess the value . If the number is larger than the random number, it means that the guess is larger , If the number is smaller than the random number, the guess is smaller , Until the numbers are right .

2. Calculator （ Add, subtract, multiply and divide ）

3. Set up 5 Textboxes , Calculate the biggest Minimum Average and sum , And display it in a label 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			fieldset {
				width: 600px;
				margin: auto;
			}

			div {				
				width: 500px;
				height: 100px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<fieldset id="">
			<legend> Guess number games </legend>
			 Please enter a number ：<input type="number" name="" id="number" value="" />
			<button type="button" onclick="guess()"> Click to guess the number </button><br><br>
			<div id="spanvalue"></span>
		</fieldset>

		<script type="text/javascript">
			var random = (Math.round(Math.random() * 100) + 0);
			console.log(random);

			function guess() {
				var num = number.value;
				if (num > random) {
					document.getElementById("spanvalue").innerHTML = " You guessed big ";
				} else if (num < random) {
					document.getElementById("spanvalue").innerHTML = " You guess it's small ";
				} else if (num == random) {
					document.getElementById("spanvalue").innerHTML = " You guessed it ";
				}
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			fieldset {
				width: 600px;
				margin: auto;
			}

			input {
				margin-top: 15px;
			}

			button {
				margin-top: 15px;
			}

		</style>
	</head>
	<body>

		<fieldset id="">
			<legend> Calculator </legend>
			 First number ：<input type="number" name="" id="first" value="" /><br>
			 The second number ：<input type="number" name="" id="second" value="" /><br>

			<button onclick="jisuan(this)">+</button>
			<button onclick="jisuan(this)">-</button>
			<button onclick="jisuan(this)">*</button>
			<button onclick="jisuan(this)">/</button><br>
			 result ：<input type="text" name="" id="result" value="" />

		</fieldset>
		<script type="text/javascript">
			function jisuan(design) {
				var a = document.getElementById("first").value;
				var b = document.getElementById("second").value;
				document.getElementById("result").value = eval(a + design.innerHTML + b);
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<fieldset id="">
			<form action="" method="post">
				 Please enter the first number ：<input type="number" id="num1" value="" /><br>
				 Please enter the second number ：<input type="number" id="num2" value="" /><br>
				 Please enter the third number ：<input type="number" id="num3" value="" /><br>
				 Please enter the fourth number ：<input type="number" id="num4" value="" /><br>
				 Please enter the fifth number ：<input type="number" id="num5" value="" /><br>
				<button type="button" onclick="cal()"> Show results </button>
			</form>
		</fieldset>
		<script type="text/javascript">
			function cal() {
				var a = document.getElementById("num1");
				var b = document.getElementById("num2");
				var c = document.getElementById("num3");
				var d = document.getElementById("num4");
				var e = document.getElementById("num5");
				var a1 = a.value;
				var a2 = b.value;
				var a3 = c.value;
				var a4 = d.value;
				var a5 = e.value;
				var sum = Number(a1) + Number(a2) + Number(a3) + Number(a4) + Number(a5);
				var avg = Number(sum / 5);
				var max = Math.max(a1, a2, a3, a4, a5);
				var min = Math.min(a1, a2, a3, a4, a5);
				document.write(" And for " + sum + "<br/>" + " The average is " + avg + "<br/>" + " The maximum value is " + max + "<br/>" + " The minimum value is " + min);
			}
		</script>
	</body>
</html>

原网站

版权声明
本文为[Fall in love with*]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202200528160979.html

边栏推荐

猜你喜欢

随机推荐