WEB练习-猜价格

最新推荐文章于 2024-09-29 14:13:49 发布

LIT-涛

最新推荐文章于 2024-09-29 14:13:49 发布

阅读量192

点赞数 1

分类专栏： WEB小练习文章标签： python html js web 游戏

本文链接：https://blog.csdn.net/weixin_52793965/article/details/119240271

版权

WEB小练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

WEB练习-猜价格

- 猜价格

猜价格

此案例只是WEB学习过程中使用，并没有连接数据库，页面刷新后就回到初始界面，并不会保留操作数据。
只为实现功能，所以比较丑，但是可以根据自己的喜好对 style 标签的内容进行修改。

实现功能

随机生成一个1-100的数，用户可以输入自己要猜的数字点击猜，查看到猜的结果是猜对了还是高了或低了，猜对之后不允许继续猜，可以进行重置，重新开始游戏

页面截图

在这里插入图片描述

代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>猜价格</title>

    <style>
        body{
            text-align: center;
            background-color: #ababab;
        }
        .content{
            margin: 200px auto 20px auto;
            text-align: center;
        }
        .title{
            font-size: 50px;
        }
        .num{
            width: 200px;
            height: 50px;
        }
        .cai{
            width: 55px;
            height: 55px;
        }

        .qqq{
            width: 200px;
            margin: 0 auto;
        }
        .time{
            width: 100px;
            font-size: 20px;
            margin: 0px;
        }
        .times{
            width: 30px;
            padding: 0px 20px;
            font-size: 20px;
        }
        #t1{
            padding: 0px 35px;
        }
        .but{
            width: 200px;
            height: 40px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="title">猜价格</div>
        <br>
        <input class="num" type="number">
        <button class="cai" onclick="getTips()">猜</button>
        <br>
        <br>
        <div class="qqq">
            <span class="time">次数：</span>
            <span class="times" id="t1"> 0 </span>
        </div>
        <div class="qqq">
            <span class="time">提示：</span>
            <span class="times" id="t2">开始</span>
        </div>
    </div>
    <button class="but" onclick="reload()">重置</button>
    <script>
        let num = Math.floor(Math.random()*100)+1;
        num = parseInt(num);
        console.log(num);
        function getTips() {
            let rets = document.querySelector('input');
            let ret = parseInt(rets.value);
            console.log(ret);
            let times = document.querySelector('#t1');
            let tips = document.querySelector('#t2');
            let time = parseInt(times.innerHTML);
            time = time+1;
            times.innerHTML=time;
            if (ret<num){
                //低了
                tips.innerHTML = '低了';
            }else if (ret>num){
                //高了
                tips.innerHTML = '高了';
            }else {
                //对了
                tips.innerHTML = '对了';
                //关闭输入框与猜
                rets.disabled = true;
                let cai = document.querySelector('button');
                cai.disabled = true;
            }
        }
        function reload() {
            location.reload();
        }
    </script>
</body>
</html>