<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="tip"></p>
<input type="text" id="user">
<button id="btn">猜一猜</button>
</body>
<script>
function get(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = get(1, 21); //随机范围
var otext = document.getElementById("user");//输入框
var obut = document.getElementById("btn");//按钮
var otitle = document.getElementById("tip");//提示文字
obut.onclick = function () {
var val = otext.value;//获取用户名输入框中的值
if (val > random) {
otitle.innerHTML = "你猜大了!";
otitle.style.color = "red";
} else if (val < random) {
otitle.innerHTML = "你猜小了!";
otitle.style.color = "red";
} else {
otitle.innerHTML = "恭喜你,你猜对了!";
otitle.style.color = "pink";
}
}
</script>
</html>