【Vue.js】實現隨機抽獎
阿新 • • 發佈:2021-02-02
技術標籤:程式碼例項Vue.jsvue.jsjavascript
【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>
OR
<!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>