# Vue nine palace lottery

Time：2021-3-7

Suddenly want to write a thing about the lottery, draw lessons from the realization of other bigwigs. Make a probability type of lottery, CSS and data are fooling. I don’t want to optimize. Ha ha ha ha

``````<template>
<div class="home_page">
<content-page>
< div > lottery test
<div class="choujiang">
<ul class="ul">
<li
v-for="(item,i) in arr"
:key="i"
:class="{isActive:i === index }"
class="li"
> {{ item }} </li>
</ul>
</div>
<! -- < div show = "isshow" class = "begin" @ Click = "begin" > start lucky draw < / div > -- >
<! -- < div show =! Isshow "class =" begin "@ Click =" stop "> end the raffle < / div > -- >
< div v-show = "isshow" class = "begin" @ Click = "startlottery" > start lucky draw < / div >

</content-page>
</div>
</template>

<script>
import contentPage from '../components/content_page'
// import footerPage from '../components/footer_page'
export default {
name: 'Home',
components: {
contentPage,
// footerPage,
},
data() {
return {
arr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
isShow: true,
randomIndex: -1,
curIndex: 0,
// timer: '',
/**Revised version**/
Index: - 1, // where is the current rotation and the starting point
Count: 10, // how many positions are there in total
Timer: 0, // turn the timer every time
Speed: 200, // initial rotation speed
Times: 0, // number of turns
Cycle: 50, // basic number of rotations: that is, how many rotations are required before entering the lottery
Prize: - 1, // winning position
click: true,
Showtoast: false, // display the win pop-up window
}
},
computed: {},
create() {
},
mounted() {
},

methods: {
startLottery() {
if (!this.click) { return }
this.startRoll()
},
//Start turning
startRoll() {
this.times  +=1 // number of turns
this.oneRoll () // each rotation method called by the rotation procedure, here is the first call to initialization
//If the current rotation times meet the requirements & the current position is the winning position
if (this.times > this.cycle && this.prize === this.index) {
this.\$message({
type: 'success ',
Message: ` number:\${ this.index }`,
})
//  console.log ('won the prize ')
// console.log(this.index)
// console.log(this.prize)
// console.log(this.times)
// console.log(this.speed)
clearTimeout( this.timer ）// clear the rotation timer and stop the rotation
this.prize = -1
this.times = 0
this.speed = 200
this.click = true
var that = this
setTimeout(() => {
that.showToast = true
}, 500)
} else {
if (this.times < this.cycle) {
this.speed  -=10 // speed up the rotation
} else if (this.times === this.cycle) {
// const index = parseInt( Math.random () * 10, 0) | 0 // get a winning position randomly

this.prize  =  this.random () // the winning position can be returned from the background

if (this.prize > 9) { this.prize = 9 }
} else if (this.times > this.cycle && ((this.prize === 0 && this.index === 9) || this.prize === this.index + 1)) {
this.speed += 110
} else {
this.speed += 20
}
if (this.speed < 40) { this.speed = 40 }
this.timer = setTimeout(this.startRoll, this.speed)
}
},

//Every turn
oneRoll() {
let index =  this.index  //Where is the current rotation
const count =  this.count  //How many places are there altogether
index += 1
if (index > count - 1) { index = 0 }
this.index = index
},
/**Generating probabilistic data**/
random() {
Const Arr1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] // corresponding prize number
Const arr2 = [0.02, 0.1, 0.1, 0.1, 0.1, 0.1, 0.01, 0.07, 0.3] // probability of prize number
let sum = 0
let factor = 0
let random = Math.random()

for (let i = arr2.length - 1; i >= 0; i--) {
Sum + = arr2 [i] // sum of statistical probabilities
}
Random * = sum // generating probabilistic random numbers (just to make the defined part a let) can be omitted
for (let m = arr2.length - 1; m >= 0; m--) {
factor += arr2[m]
if (random <= factor) {
return arr1[m]
}
}
return null
},
},
}
</script>

<style scoped lang="scss">
@import "../assets/style/base.scss";
.home_page{
font-size: pxTorem(16px);
display: flex;
align-items: center;
justify-content: center;
.choujiang{
.ul{
width: pxTorem(240px);
display: flex;
flex-wrap: wrap;
.li{
margin: pxTorem(10px) pxTorem(10px);
/*background-color: salmon;*/
border: 1px solid;
}
}
}
.begin{
margin-top: pxTorem(40px);
background-color: salmon;
text-align: center;
cursor: pointer;
}

}
.isActive{
background-color: salmon;
}
</style>``````

## Use of Android WebView (super detailed usage)

1.1 overview of WebView Android WebView is a special view on the Android platform. It can be used to display web pages. This WebView class can be used to display only one online web page in the app. Of course, it can also be used to develop browsers. The internal implementation of WebView uses WebKit […]