【Vue.js】实现随机抽奖

最新推荐文章于 2024-05-17 16:06:33 发布

夹心776655

最新推荐文章于 2024-05-17 16:06:33 发布

阅读量2.1k

点赞数 2

分类专栏：代码实例 Vue.js 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_37086980/article/details/112928588

版权

代码实例同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

Vue.js

30 篇文章 1 订阅

订阅专栏

【Vue.js】实现随机抽奖

在这里插入图片描述

代码实例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue实现随机抽奖</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        #app {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>随机抽奖</h2>

        <!-- 开始按钮 -->
        <button v-if="!isStart" @click="startRandom">开始抽奖</button>

        <template v-if="isStart && !isEnd">
            <!-- 显示滚动的名单 -->
            <h3>
                {{selectedUser.name | replaceName}} —— {{selectedUser.phone | replacePhone}}
            </h3>
            <!-- 结束按钮 -->
            <button @click="endRandom">结束抽奖</button>
        </template>
        <!-- 显示最终点名的人 -->
        <h3 v-if="isEnd">
            抽到的是姓名是:{{winner.name}}<br>
            抽到的是电话是:{{winner.phone | replacePhone}}
        </h3>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            isStart: false,
            isEnd: false,
            timer: null,
            selectedUser: {
                name: '',
                phone: ''
            },
            winner: {
                name: '',
                phone: ''
            },
            user: [
                { name: '赵一晖', phone: '13913867443' },
                { name: '钱靖鱼', phone: '15724567898' },
                { name: '李三', phone: '13566763434' },
                { name: '王小', phone: '18344445432' },
                { name: '周二贰', phone: '13344559065' },
                { name: '吴安安', phone: '15676665454' },
                { name: '郑和', phone: '19876754345' },
                { name: '王富贵天', phone: '13678844544' },
                { name: '冯九', phone: '15299935688' },
                { name: '陈十十', phone: '18434556454' },
                { name: '卫子夫', phone: '18434556454' },
                { name: '姜太公', phone: '18434556454' },
                { name: '林冲', phone: '18434556454' },
                { name: '邓宇', phone: '18434556454' },
                { name: '姚小装', phone: '18434556454' },
                { name: '希希高', phone: '18434556454' }
            ]
        },
        watch: {

        },
        filters: {
            replaceName(str) {
                if (str === '') return ''

                return str.substr(0, 1) + '***' + str.substr(-1)


            },
            replacePhone(str) {
                if (str === '') return ''
                // 子模式 捕获 反向引用(后向引用)
                // var reg = /(\d)\1{3}/g   // 使用()就是子模式，
                // 在捕获是系统会给子模式编号(从左至右，从外到里 序号从1开始)  
                // 反向引用： 在正则内部使用  \子模式编号    在正则的外部使用  $子模式编号
                const reg = /(1[3-9]\d)(\d{4})(\d{4})/
                return str.replace(reg, '$1****$3')
            }
        },
        methods: {
            startRandom() {
                this.isStart = true
                // 清除定时器
                clearInterval(this.timer)
                // 开启定时器
                this.autoScroll()
            },
            autoScroll() {
                this.timer = setInterval(() => {
                    let length = this.user.length
                    let num = Math.floor(Math.random() * length)
                    this.selectedUser = this.user[num]
                }, 100)
            },
            endRandom() {
                this.isEnd = true
                // 清除定时器
                clearInterval(this.timer)
                // 记录下点到的名字
                this.winner = this.selectedUser
                // 清空选择的用户
                this.selectedUser = {
                    name: '',
                    phone: ''
                }
            }
        }
    })
</script>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue实现随机抽奖</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        #app{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>随机抽奖</h2>
        <!-- 显示滚动的名单 -->
        <h3 v-if = "isStart && !isEnd && selectedUser.name">
            {{selectedUser.name | replaceName}} —— {{selectedUser.phone | replacePhone}}
        </h3>
        <!-- 开始按钮 -->
        <button v-if = "!isStart" @click="startRandom">开始抽奖</button>
        <!-- 结束按钮 -->
        <button v-if = "isStart && !isEnd" @click="endRandom">结束抽奖</button>

        <!-- 显示最终点名的人 -->
        <h3 v-if = "isEnd">
            抽到的是姓名是:{{winner.name | replaceName}}<br>
            抽到的是电话是:{{winner.phone | replacePhone}}
        </h3>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            isStart: false,
            isEnd: false,
            timer: null,
            selectedUser: [],
            winner:[],
            user:[
                { name:'赵一晖', phone:'13913867443' },
                { name:'钱靖', phone:'15724567898' },
                { name:'李三金', phone:'13566763434' },
                { name:'王小叶', phone:'18344445432' },
                { name:'周二贰', phone:'13344559065' },
                { name:'吴安安', phone:'15676665454' },
                { name:'郑和', phone:'19876754345' },
                { name:'王富贵天', phone:'13678844544' },
                { name:'冯九', phone:'15299935688' },
                { name:'陈十十', phone:'18434556454' },
                { name:'卫子夫', phone:'18434556454' },
                { name:'姜太公', phone:'18434556454' },
                { name:'林冲', phone:'18434556454' },
                { name:'邓宇', phone:'18434556454' },
                { name:'姚肖娜', phone:'18434556454' },
                { name:'希高高', phone:'18434556454' }
            ]
        },
        watch:{

        },
        filters:{
            replaceName(str){
                let replaceStr;
                if (str == '') return ''
                
                if(str.length == 2){
                    replaceStr = str.substring(1)
                }else{
                    replaceStr = str.substring(1, str.length - 1)
                }
                   
                return str.replace(replaceStr, function(ev){
                    let star = ''
                    for(let i = 0; i < ev.length; i++){
                        star += '*'
                    }
                    return star
                })
                // let replaceStr = str.substring(1, 2)
                // return str.replace(replaceStr, '*')

            },
            replacePhone(str){
                if (str == '') return ''         
                let replaceStr = str.substring(3, 7)
                return str.replace(replaceStr, '****')
            }
        },
        methods:{
            startRandom(){
                this.isStart = true
                // 清除定时器
                clearInterval(this.timer)
                // 开启定时器
                this.timer = setInterval(() => {
                    let length = this.user.length
                    let num = Math.floor(Math.random() * length)
                    this.selectedUser = this.user[num]
                }, 100)
            },
            endRandom(){
                this.isEnd = true
                // 清除定时器
                clearInterval(this.timer)
                // 记录下点到的名字
                this.winner = this.selectedUser
                // 清空选择的用户
                this.selectedUser = []
            }
        }
    })
</script>
</html>

夹心776655

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
【Vue.js】实现随机抽奖

【Vue.js】实现随机抽奖![在这里插入图片描述](https://img-blog.csdnimg.cn/20210121130157383.png代码实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
复制链接

扫一扫

专栏目录