Shulou(Shulou.com)06/01 Report--

This article mainly shows you "vue how to achieve the turntable raffle function", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "vue how to achieve the turntable raffle function" this article.

The effect picture is as follows

Lottery winning tips

The code is as follows

The number of lucky draw {{LuckyClick}}

Var light_timer / / Lighting timer export default {name: "dial", data () {return {LuckyClick: 3, circleList: [], / / Origin setting colorCircleFirst: "# FE4D32", / / Dot Color colorCircleSecond: "# fff", / / Dot Color cat: 45, / / A total of 8 sectors Each area is about 45 degrees isAllowClick: true, / / can you click rotate_deg: 0, / / the angle of rotation of the pointer rotate_transition: "transform 3s ease-in-out" / / initialize the selected excessive attribute control} }, components: {/ / Calendar: Calendar}, created () {this.showcircleList ();}, watch: {}, mounted () {}, methods: {/ / draw dots set showcircleList () {let circleList = []; for (var I = 0; I < 16; iTunes +) {circleList.push (I);} this.circleList = circleList; this.light () }, / / flashing effect light: function () {var that = this; clearInterval (light_timer); light_timer = setInterval (function () {if (that.colorCircleFirst = "# FE4D32") {that.colorCircleFirst = "# fff"; that.colorCircleSecond = "# FE4D32";} else {that.colorCircleFirst = "# FE4D32" That.colorCircleSecond = "# fff";}}, 300); / / set the effect of dot flicker}, start () {if (this.LuckyClick = = 0) {alert ("opportunity has run out"); return;} this.rotating ();}, rotating () {if (! this.isAllowClick) return; this.isAllowClick = false This.rotate_transition = "transform 3s ease-in-out"; this.LuckyClick--; var rand_circle = 5; / / default rotation 5 times / / var winningIndex = Math.floor (Math.random () * 8); / / the winning subscript 0-7 has no probability per average var winningIndex = this.set (); / / console.log (winningIndex) with probability set Var randomDeg = 360360-winningIndex * 45; / / the angle corresponding to the current subscript 45 is a total of 8 sector regions, each of which is about 45 degrees var deg = rand_circle * 360 + randomDeg; / / the degree to be rotated due to the clockwise direction of rotation this.rotate_deg = "rotate (" + deg + "deg)"; var that = this SetTimeout (function () {that.isAllowClick = true; that.rotate_deg = "rotate (" + 0 + "deg)"; / / reset angle when timer is off that.rotate_transition = ""; if (winningIndex = = 0) {alert ("Congratulations, IphoneX") } else if (winningIndex = = 1) {alert ("Congratulations, getting 10 yuan in cash");} else if (winningIndex = = 2) {alert ("Sorry to participate");} else if (winningIndex = = 3) {alert ("Congratulations, get 30 yuan in cash") } else if (winningIndex = = 4) {alert ("congratulations, 20 yuan cash");} else if (winningIndex = = 5) {alert ("congratulations, 50 yuan cash");} else if (winningIndex = = 6) {alert ("congratulations, 5 yuan cash") } else if (winningIndex = = 7) {alert ("Congratulations, getting 100RMB in cash");}}, 3500);}, / / set probability set () {var winIndex; / / method 1 / / if (Math.floor (Math.random () * 100) < 30) {/ / console.log ("30% probability, focus on participation") / / winIndex = 2; / /} else if (Math.floor (Math.random () * 100) < 55) {/ / console.log ("25% probability, 5 yuan"); / / winIndex = 6; / /} else if (Math.floor (Math.random () * 100) < 75) {/ / console.log ("20% probability, 10 yuan"); / / winIndex = 1 / /} else if (Math.floor (Math.random () * 100) < 85) {/ / console.log ("10% probability, 20 yuan"); / / winIndex = 4; / /} else if (Math.floor (Math.random () * 100) < 92) {/ / console.log ("7% probability, 30 yuan"); / / winIndex = 3 / /} else if (Math.floor (Math.random () * 100) < 97) {/ / console.log ("5% probability, 50 yuan"); / / winIndex = 5; / /} else if (Math.floor (Math.random () * 100) < 99) {/ / console.log ("2% probability, 100 yuan"); / / winIndex = 7 / /} else if (Math.floor (Math.random () * 100) = 99) {/ / console.log ("1% probability, IphoneX"); / / winIndex = 0; / /} / / method 2 var _ _ rand__ = Math.random (); if (_ _ rand__ < 0.3) winIndex = 2; else if (_ _ rand__ < 0.55) winIndex = 6 Else if (_ _ rand__ < 0.75) winIndex = 1; else if (_ _ rand__ < 0.85) winIndex = 4; else if (_ _ rand__ < 0.92) winIndex = 3; else if (_ _ rand__ < 0.97) winIndex = 5; else if (_ _ rand__ < 0.99) winIndex = 7; else if (_ rand__ = 0.99) winIndex = 0; return winIndex }, computed: {}}; @ import ".. / common/common"; .times {text-align: center; line-height: 0.8remr; background: # fff;}. Rotate {width: 6.1remt; height: 6.1remr; background: # ffbe04; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 48%; left: 50% Transform: translate (- 50%,-50%);} .round.dish {width: 5.5remt; height: 5.5remr;} .rem.dish {width: 1.39remr; height: 2.03remr; position: absolute; top: 46%; left: 50%; transform: translate (- 50%,-50%);} / * Dot * / .rotate. Position: absolute; display: block; border-radius: 50%; height 0.16rem: Width: 0.16remr; background: black;} .room.rem0 {top: 0.08remr; left: 2.92remt;} .room.rem1 {top: 0.28rem; left: 4.05remt;} .room.rem2 {top: 0.86 remr; left: 4.95remr;} .room.rem3 {top: 1.85rem.left: 5.65remt;} .room.rem4 {top: 2.85remr; right: 0.1rem {bottom: 1.89remr; right: 0.29remr;} .room.rem6 {bottom: 0.96; right: 0.88rem7 {bottom: 0.34remr; right: 1.76rem8 {bottom: 0.06remr; right: 3.06remr;} .room.rem9 {bottom: 0.28remr; left: 1.9remr;} .room.rem8 {bottom: 0.96rem Left: 0.88rem11 {bottom: 1.82remt; left: 0.28remr;} .room.rem12 {top: 2.9remr; left: 0.1rem.} .room.room.13 {top: 1.9remt; left: 0.28remr;} .room.rem14 {top: 1remr; left: 0.86 remt;} .room.rem15 {top: 0.32remr; left: 1.76remt;}

The pictures used in this article

The picture of the big turntable is as follows

The picture of the pointer is as follows:

The above is all the contents of the article "how to realize the big turntable lottery function in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.