猜数字游戏（vue,jquery）

最新推荐文章于 2024-05-17 15:10:15 发布

柠稔875

最新推荐文章于 2024-05-17 15:10:15 发布

阅读量301

点赞数 1

文章标签： vue.js 游戏 jquery

本文链接：https://blog.csdn.net/qq_74315371/article/details/128981777

版权

<!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>猜数游戏</title>
    <style>
        div{
            width: 400px;
            height: 300px;
            /* border: 1px solid red;    */
            margin: auto;
        }
        div *{
            text-align: center;
       
        }
        input{
            margin-left: 80px;
           
        }
        span{
            display: inline-block;
            width: 200px;
            height: 20px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>猜数游戏</h1>
        <h3>请输入一个0-99之间的随机整数：</h3>
        <input type="text"> <button @click="commit">提交</button>  <br>
        <p>结果: <span> {{message}} </span></p>
        <p>您当前还可以猜的次数: <span> {{count}} </span></p>
    </div>
    
    <script src="../vue/vue.js"></script>
    <script src="../iQuery/js/1.js"></script>
    <script>
        var randomNum = parseInt( Math.random() * 100 );
        console.log(randomNum);
        var vm = new Vue({
            el : "#app" ,
            data : {
                message : "",
                count : 10 ,
            } ,
            methods :{
                commit : function(){
                    var inputNum = $("input").val() ;
                    if(inputNum == randomNum){
                        this.message = "恭喜您，猜对了~";
                    }else if (inputNum < randomNum){
                        this.message = "猜小了~";
                    }else{
                        this.message = "猜大了~";
                    }
                    if(this.count <= 0){
                        alert("您的次数已用完..")
                    }else{
                        this.count--;
                    }
                }
            }
        });
    </script>

</body>
</html>