猜数字游戏

一、使用‘random’函数获取随机数

本题的关键在于利用‘random’函数获取随机数，但是‘random’方法获取的是[0，1）范围的随机数，这显然不太适合用来猜，所以我们一般把它乘以100，转换为整型，这样它的范围就是[0,100)，这样就比较符合题意了，代码如下：

parseInt(Math.random(0,1)*100)

二、分情况讨论输入值大小情况

这个题目的另一个关键点在于怎么才能使用户猜对数字，如果猜不对，那么这个游戏将没有意义，所以，对于用户的输入值，我们必须帮助用户进行判断大小，并进行提示，这样才是一个标准的写法，那判断的话，我们首先想到的就是if语句了，这题只需要考虑4种情况就行，代码示例如下：

if (isNaN(num) || num < 1 || num > 100) {

this.result = "输入有误，请重新输入";

this.guess = "";

} else {

if (num === this.codekey) {

this.result = "恭喜你猜对了!!!";

}

。。。。。

}

三、HTML代码

<body>
    <div id="root">
        <h1>猜数字游戏</h1>
        <div id="div_1">
            <input v-model="guess" type="text" @keyup.enter="doGuess"/>
        </div>
        <div id="div_2">
            <button @click="doGuess">提交</button>
        </div>
        <div id="div_3">
            <h1>{{result}}</h1>
        </div>

    </div>
    <script>
        Vue.config.productionTip=false;
        const vm = new Vue({
            el: '#root',
            data: {
                guess: "",
                result: "请输入一个1-100的整数",
                codekey: parseInt(Math.random(0,1)*100)
            },
            methods: {
                doGuess() {
                    var num = parseInt(this.guess);
                    if (isNaN(num) || num < 1 || num > 100) {
                        this.result = "输入有误，请重新输入";
                        this.guess = "";
                    } else {
                        if (num === this.codekey) {
                            this.result = "恭喜你猜对了!!!";
                        }
                        if(num > this.codekey){
                            this.result = "猜大了,请猜小一点！！！"
                            this.guess = "";
                        }
                        if(num < this.codekey){
                            this.result = "猜小了，请猜大一点！！！"
                            this.guess = "";
                        }
                    }
                }
            }
        })
    </script>
</body>

四、CSS样式及运行效果

下面我只是写了CSS样式简单示例，实际效果可以自行修改，不用拘于我所写的，写法有些重复，还有很大的优化空间，自行修改

<style>
        * {
            margin: 0;
            padding: 0;
        }

        #root {
            background-color: black;
            width: 600px;
            height: 400px;
            margin: 50px auto;
            color: white;
        }

        #div_1,
        #div_2,
        #div_3 {
            text-align: center;
            margin-top: 30px;
        }

        #div_3 {
            border: 2px solid white;
            width: 90%;
            height: 100px;
            margin: 30px auto;
            line-height: 90px;
        }

        input {
            width: 300px;
            height: 50px;
            font-size: 30px;
        }

        button {
            width: 100px;
            height: 50px;
            font-size: 30px;
        }
    </style>

简单计数器（计时器）

一、使用‘setInterval’函数实现计数效果

要实现计数器，我们很容易联想到‘++’自增和for循环，如果在Java中我们能很简单的实现功能，但是VSCode中for的用法和Java中不一样，因此我们应该使用VSCode中的函数来 ‘setInterval’来实现功能。‘setInterval’函数可按照指定的周期（以毫秒计）来调用函数或计算表达式，意识就是你在‘setInterval’函数里面放个自增，设置时间为一秒，计数功能不就实现了嘛，示例代码如下：

time = setInterval(function () {

vm.counter++;

}, 100);

二、使用’clearInterval‘函数实现暂停计数和重新计数效果

clearInterval () 方法将停止周期性执行的指定代码，对这些代码的操作是调用 setInterval () 方法启动的。

三、HTML/CSS代码和运行效果

CSS样式可以自己修改，这个样式较为简单，我就不分开写了，如下：

<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #root {
            width: 880px;
            height: 350px;
            margin: 10px auto;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="root">
        <h1>{{counter}}</h1>
        <button v-on:click="start">开始计数</button>
        <button v-on:click="stop">停止计数</button>
        <button v-on:click="reset">重新计数</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                counter: 0,
            },
            methods: {
                start() {
                    time = setInterval(function () {
                        vm.counter++;
                    }, 100);
                },
                stop() {
                    clearInterval(time);
                },
                reset() {
                    clearInterval(time);
                    this.counter = 0;
                }
            }
        })
    </script>
</body>