博客

猜数字游戏：像框内数字数字，点击猜一猜，如果与后台的数字一样，则提示“ 恭喜猜对了”，并且可以再来一次，继续游戏。猜大了提示猜大了，猜小了提示猜小了！

HTML代码如下：

		<div id="result1"></div>
		<input  id="number" type="text" placeholder="请输入你所猜到的数字">
		<button id="btn">猜一猜</button>
		<button id="btn1"></button>
	

CSS代码如下：

        <style>
			#btn1{
				display: none;
			}
		</style>

js代码：

<script>
			//获取内容
			//获取input框
			var _input = document.querySelector("#number");
			var _btn = document.querySelector("#btn");
			//结果框
			var _result1 = document.querySelector("#result1");
			var _btn1 = document.querySelector("#btn1");
			//设置随机数
			var num = parseInt(Math.random()*100)+1;
			//可以在控制台查看每次的输出值
			console.log(num);
			//给按钮1“猜一猜”添加点击事件，比较大小
			_btn.onclick = function(){
				if(_input.value > num){
					_result1.innerText = `猜大了`;
				}
				if(_input.value < num){
					_result1.innerText = `猜小了`;
				}
				if(_input.value == num){
					_result1.innerText = `恭喜你，猜对了`;
					_btn1.innerText = `再来一次?`;
					_btn1.style.display='block';
				}
			}
			//正确后给按钮2“再来一次”添加点击事件
			_btn1.onclick = function(){
				_input.value = '';
				_result1.innerHTML="";
				//！！！重点，一定要再生成一次会随机数
				num = parseInt(Math.random()*100)+1;
				//这个控制台输出便于自己看程序是否正确，可以不写
				console.log(num);
				_btn1.style.display='none';
			}
		</script>