实验五 猜数游戏 1、 实验目的 了解和掌握JavaScript的语法规则，熟练掌握JavaScript语言的流程控制语句、过程控制和函数的语法及具体的使用方法。 2、 实验内容 实现猜数游戏 3、 实验要求 随机给出一个0至99（包括0和99）之间的数字，然后让用户在规定的次数内猜出是什么数字。当用户随便猜一个数字后，游戏会提示太大还是太小，然后缩小结果范围，最终得出正确结果。 1. 当猜测次数到时，提示用户“猜测次数到，游戏结束” 2. 按钮和文本框的可用属性是disable，如果属性值为true，该按钮或文本框不可使用；当其值为false时，可以使用。 3. 访问文本框的方法是：表单名.文本框名 例如：表单名为guess，文本框名为num，HTML代码如下：
读取文本框的方法是： guess.num 赋值给文本框的值是9的方法是: guess.num=9<!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>
<div>
<input type="text" placeholder="请输入数字" disabled>
<div class="desc"></div>
<button class="okbtn" disabled>确认</button>
<button class="reset">开始</button>
</div>
<script>
let start = document.querySelector('.reset'),
okbtn = document.querySelector('.okbtn'),
input = document.querySelector('input'),
desc = document.querySelector('.desc'),
count,
roundNum;
start.onclick = function () {
input.value = ''
count = 0
roundNum = ~~(Math.random() * 99)
this.setAttribute('disabled', true)
input.removeAttribute('disabled');
okbtn.removeAttribute('disabled')
}
okbtn.onclick = function () {
let num = input.value
if (/[^\d]/.test(num)) return desc.innerHTML = '只能输入数字'
count++
if (num > roundNum) {
desc.innerHTML = `猜大了`;
} else if (num < roundNum) {
desc.innerHTML = `猜小了`;
} else {
desc.innerHTML = `猜测次数到${count}次,游戏结束！`;
input.setAttribute('disabled', true);
okbtn.setAttribute('disabled', true);
start.removeAttribute('disabled')
}
}
</script>
</body>
</html>
<!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>
<div>
<form action="" id="form">
<button type="button" id="start">开始</button>
<input type="number" disabled id='txt' autocomplete="off">
<button type="button" id="check" disabled>校对</button>
<p id="label"></p>
</form>
</div>
<script>
var amount=0;
var min=0;
var max=99;
var oform=document.getElementById('form');
var obtn=document.getElementById('start');
var ocheck=document.getElementById('check');
var op=document.getElementById('label');
function init(){
min=0;
max=99;
amount=0;
obtn.disabled=false;
ocheck.disabled=true;
oform.txt.disabled=true;
op.innerHTML='';
oform.txt.value='';
}
obtn.onclick=function(){
obtn.disabled=true;
ocheck.disabled=false;
oform.txt.disabled=false;
var num=Math.floor(Math.random()*100);
ocheck.onclick=function(){
amount++;
var val=oform.txt.value*1;
if(oform.txt.value===''){
alert('不能为空');
return
}
if(val>num){
alert('太大了');
op.innerHTML=min+'~'+val;
max=val;
}else if(val<num){
alert('太小了');
op.innerHTML=val+'~'+max;
min=val;
}else if(val===num){
alert('恭喜你，猜对了');
init()
}
// 设定猜测10次
if(amount==10){
alert('猜测次数到，游戏结束');
init()
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>猜数游戏</title>
<style>
.r{color:#f00}
.g{color:green}</style>
</head>
<body>
<form name="guess">
猜测次数：<input type="text" name="count" /><input type="button" name="btn" value="开始游戏" onclick="startGame()" /><br />
我的数字：<input type="text" name="num" disabled /><input type="button" disabled name="btnG" value="猜" onclick="Guess()" />
<div id="dvState"></div>
</form>
<script>
function rnd(min, max) {
var tmp = min;
if (max < min) { min = max; max = tmp; }
return Math.floor(Math.random() * (max - min + 1) + min);
}
guess.num.onkeyup = guess.count.onkeyup = function () { this.value = this.value.replace(/([^\d]|^0+)/g, '') };
var re = /^[1-9]\d*$/, rndNum = 0, dvState = document.getElementById('dvState'),count;
function startGame(btn) {
count = guess.count.value;
if (!re.test(count)) { alert('猜测次数为数字！'); guess.count.select(); return false }
count = parseInt(count);
rndNum = rnd(0, 99);
setDisabled(false);
guess.num.value = '';
}
function setDisabled(d) {
guess.num.disabled = guess.btnG.disabled = d;
guess.count.disabled = guess.btn.disabled = !d;
}
function setState(cls, s) {
dvState.className = cls;
dvState.innerHTML = s;
}
function Guess() {
count--;
guess.count.value = count;
var num = guess.num.value;
if (!re.test(num)) { alert('猜测次数为数字！'); guess.num.select(); return false }
num = parseInt(num);
if (num == rndNum) {
setState('g', '恭喜您猜对了~~');
setDisabled(true);
}
else {
if (count == 0) setDisabled(true);
setState('r', '数字' + (num > rndNum ? '大' : '小') + '了~~' + (count == 0 ?'<br>猜测次数到，游戏结束~~':''));
}
}
</script>
</body>
</html>