【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>

【Vue.js】實現隨機抽獎

【Vue.js】實現隨機抽獎

程式碼例項

【Vue.js】實現隨機抽獎

vue.js+canvas實現隨機驗證碼

【Vue.js】---vue中單個js檔案寫法

【Vue.js】---如何根據配置檔案動態載入router

js實現隨機抽獎

【vue原始碼】js中的with語句

【Vue原始碼】簡單實現Vue的雙向資料繫結：Object.defineProperty和Proxy

【Vue-bug】vue.esm.js?a026:628 [Vue warn]: Error in render: "TypeError: Cannot read property 'avatar' of undefined"

【JS】實現倒計時

【Node.js】之第三方中介軟體實現驗證碼

【Vue-cli】元件化實現購物車，包括單選按鈕全選按鈕聯動

【vue高階】MVVM實現原理第三篇編譯模板Compile

JS實現隨機抽獎小功能

?【Go 實踐】實現一個簡單的多人聊天室

vue.js+ElementUI實現進度條提示密碼強度效果

【python + NATAPP】實現內網穿透的簡易資料傳輸

【日常摘要】- 生成隨機的姓名或手機號篇

【Vue原始碼】Object.defineProperty與Proxy

【Vue原始碼】document.querySelector()方法

【VUE +ElementUI】常見報錯

【Vue.js】實現隨機抽獎

【Vue.js】實現隨機抽獎

程式碼例項

相關推薦