在页面实现一个简单的猜数字游戏,效果如下
源码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>guess</title>
</head>
<body>
<button type="button" id="reset">重新开始</button><br>
请输入一个不大于100的自然数:<input type="text" id="num">
<button type="button" id="guess">猜一猜</button><br>
次数:<span id="count">0</span><br>
结果:<span id="result"></span><br>
<script>
//选择对应的id
var inputNum = document.querySelector('#num');
var countNum = document.querySelector('#count');
var guessBtn = document.querySelector('#guess');
var resetBtn = document.querySelector('#reset');
var resultNum = document.querySelector('#result');
//定义一个guessNum 随机数,值为[0,100]
//Math.floor () 函数返回小于等于一个给定数字的最大整数
//Math.random() 函数返回一个浮点数,伪随机数在范围从0 到小于1
var guessNum = Math.floor(Math.random() * 100) + 1;
var count = 0;//猜测次数
//点击猜测按钮 使猜测次数+1
guessBtn.onclick = function(){
count++;
countNum.innerText = count;//将次数赋值给countNum所选择元素的文本
//element.innerText()会去除html标签,同时换行和空格也会去掉,但字符串中的标签会原样打印出来
//element.innerHTML()会包括html标签,同时保留空格和换行,打印时会按照书写格式
//定义一个你猜的数字 赋值文本框所输入的值
var userGuess = parseInt(inputNum.value);
//判断值是否猜对
if(userGuess == guessNum){
resultNum.innerText = "猜对啦!";
resultNum.style = "color : green";
}else if(userGuess < guessNum){
resultNum.innerText = "猜小了";
resultNum.style = "color : red"
}else{
resultNum.innerText = "猜大了";
resultNum.style = "color : red"
}
};
//按下按钮重置
resetBtn.onclick = function(){
guessNum = Math.floor(Math.random() * 100) + 1;
count = 0;
countNum.innerText = count;
resultNum.innerText = ''; //文本
inputNum.value = ''; //文本框里的value值
}
</script>
</body>
</html>