vue 简单的抽奖Demo

最新推荐文章于 2024-08-16 12:40:11 发布

小印丶

最新推荐文章于 2024-08-16 12:40:11 发布

阅读量656

点赞数

文章标签： vue 抽奖Demo

本文链接：https://blog.csdn.net/qq_44111597/article/details/109114073

版权

vue 相关笔记专栏收录该内容

6 篇文章 1 订阅

订阅专栏

这是一个使用Vue.js实现的简单抽奖程序。用户可以点击开始和停止按钮进行抽奖，根据分数显示不同等级奖项。分数通过Math.random()生成并在0-100之间，根据不同分数范围判断奖项。应用了Vue的数据绑定和事件监听特性。

摘要由CSDN通过智能技术生成

简陋的抽奖Demo

vue.js文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖Demo</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="id01">
        <p>{{score}}</p>
        <p>{{level}}</p>
        <input type="button" value="开始抽奖" @click="start()">
        <input type="button" value="停止抽奖" @click="stop()">
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: "#id01",
        data: {
            score: 0,
            level: null,
            intervalIndex: null
        },
        methods: {
            start() {
                if (this.intervalIndex == null) {
                    this.intervalIndex = setInterval(() => {
                        // Math.random() 生成 0-1 之间的随机数【但是小数位有点长】
                        // parseInt() 转换成整型
                        this.score = parseInt(Math.random() * 100);
                        switch (true) {
                            case this.score <= 50:
                                this.level = "幸运奖"
                                break;
                            case this.score <= 80 && this.score > 50:
                                this.level = "三等奖"
                                break;
                            case this.score <= 90 && this.score > 80:
                                this.level = "二等奖"
                                break;
                            case this.score > 90:
                                this.level = "一等奖"
                                break;
                        }
                    }, 50);

                }

            },
            stop() {
                clearInterval(this.intervalIndex);
                this.intervalIndex = null
            }
        },
    })
</script>