Vue 十秒挑战

小小鹏鹏鹏啊

于 2024-07-17 10:02:18 发布

阅读量122

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/sjdjbfne/article/details/140486452

版权

十秒挑战

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <div v-html="sum"></div>
        <button @click="kaishi">开始</button>
        <button @click="zanting">暂停</button>
        <button @click="chongzhi">重置</button>

    </div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            sum: 0,
            num: 0,
            timer: null
        },
        methods: {
            kaishi() {
                clearInterval(this.timer)
                this.timer = setInterval(() => {
                    this.num++
                    this.sum = this.num / 500
                }, 1)
            },
            zanting() {
                clearInterval(this.timer)
                if (this.num == 10) {
                    alert('挑战成功')
                } else {
                    alert('挑战失败')
                }
            },
            chongzhi() {
                clearInterval(this.timer)
                console.log(11);
                this.sum = 0
                this.num=0
            }
        }
    })
</script>

</html>