十秒挑战小游戏vue

最新推荐文章于 2024-06-19 10:06:41 发布

没有bug的小史

最新推荐文章于 2024-06-19 10:06:41 发布

阅读量1.3k

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/djsknsns/article/details/127562044

版权

文本

   <div id="app">
        <button @click="btn1" :disabled="disabl">开始挑战</button>
        <button @click="btn2" :disabled="!disabl">暂停</button>
        <button @click="btn3">重新开始</button>
        <button @click="btn4">直接胜利</button>
        <div>
            {{jg}}
        </div>
    </div>

脚本内容

    let num = 0.00
    let vm = new Vue({
        el: '#app',
        data: {
            jg: '0.00',
            time: ''
        },
        methods: {
            btn1() {
                this.disabl = !this.disabl
                this.time = setInterval(() => {
                    num += 0.01
                    this.jg = num.toFixed(2)
                }, 10)
            },
            btn2() {
                clearInterval(this.time)
                if (this.jg == 10) {
                    alert('你赢了')
                } else {
                    alert('你输了')
                }
            },
            btn3() {
                this.disabl = !this.disabl
                num = 0
                this.jg = '0.00'
            },
            btn4() {
                clearInterval(this.time)
                this.jg = 10
                setTimeout(() => {
                    alert('你赢了')
                }, 200)


            }
        }
    })