Web开发基础-JavaScript-04

JavaScript语法应用-猜数字案例

案例思路与技巧:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>猜数字</title>
		<script type="text/javascript">
			//在页面内容加载前生成随机数
			var ranNum = parseInt(Math.random()*100);
			alert(ranNum);
			function guess(){
				//获取文本框中的值
				var num = document.getElementById("num").value;
				//判断该值是否为数字
				var span = document.getElementById("result");
				if(isNaN(num)){
					span.innerHTML="请输入数字";
				}else{
					//是数字,与随机数比较
					if(num>ranNum){
						span.innerHTML="大了";
					}else if(num<ranNum){
						span.innerHTML="小了"
					}else{
						span.innerHTML="对了";
					}
					
				}
			}
		
		</script>
	</head>
	<body>
		<input type="text" id="num">
		<input type ="button" value="猜"
			onclick="guess();">
		<span id="result"></span>
	
	</body>

</html>

最终页面显示效果:

A:


B:


C:


猜你喜欢

转载自blog.csdn.net/coder_boy_/article/details/80960826