小飞老师

JavaScript项目－猜数字游戏

作者: liufeisheng

创建时间: 2024-03-28 00:31:22

根据JavaScript课堂所学知识，设计一款猜数字游戏

项目描述：

首先电脑随机生成一个1~1000以内的数字，然后玩家给出一个数

电脑根据玩家给出的数字进行判断，给出太大了、太小了、猜对了的提示

玩家根据给出的提示继续猜数，直至猜对，或者次数用完为止

html代码设计

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <script src=""></script>
        <title> 猜数字游戏</title>
    </head>
    <body>
        <h1>猜数字游戏</h1>
        <p> 首先电脑随机生成一个1~1000以内的数字，然后玩家给出一个数</p>
        <p>电脑根据玩家给出的数字进行判断，给出太大了、太小了、猜对了的 提示</p>
        <p>玩家根据给出的提示继续猜数，直至猜对，或者次数用完为止</p>
        <p>请输入一个数字：<input type="number" name="" id="inputNum">
            <input type="button" value=" 提交" >
        </p>
        <p id="mes1" style="color: red;"></p>
    </body>
</html>

效果图

js 代码

这里注意要在html文件中引用 js 代码，按钮点击后能执行函数

// 第1步，电脑随机生成一个1~1000以内的整数
var randNum = parseInt(Math.random()*1000)+1;
var mes1 = "";
// 第2步，键盘输入数字
function guess(){
    var inputNum = parseInt(document.getElementById("inputNum").value)
    // console.log(randNum);
    // console.log(inputNum);

    // 第3步，比较2个数字的大小 ，并进行提示
    if(inputNum>randNum)
        mes1 = "太大了！";
    else if(inputNum<randNum)
        mes1 = "太小了！";
    else
        mes1 = "恭喜你！猜对了！";
    document.getElementById("mes1").innerHTML = mes1;
}