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

This article introduces the relevant knowledge of "how to realize the simple turntable lottery function of vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Please ignore the style (adjust it by yourself). It mainly depends on the implementation of the JS code. Call the start method after clicking the button to determine whether it is in a rotating state. If it does not rotate, call the go method. The go method mainly encapsulates an one-time timer, which is a recursive function. After calling the go function, you can achieve the effect of the turntable in the lottery. The detailed code is as follows:

The notes are clear

Start export default {name: "Home", data () {return {/ / Mark the position of rotation bg: 1, / / cyclic prize array arr: [1, 2, 3, 4, 5], / / whether the mark isSport: false, / / the rotation speed slows down reduce: 10 / / rotation interval startTime: 30, area:''} }, methods: {start () {if (this.isSport = = false) {this.isSport = true;} else {/ / when clicking the button is invalid return;} / / simulated set rotation position this.area= parseInt (Math.random () * 4x1); this.go () }, go () {setTimeout () = > {/ / slow down the rotation speed this.startTime = this.startTime + this.reduce; this.bg = (this.bg% 5) + 1 / / if this condition is reached, stop beating if (this.startTime > = 300 & & this.bg = = this.area) {/ / whether the mark rotates or not this.isSport = false; / / reset rotation interval this.startTime = 30; return;} this.go () }, this.startTime);},},}; .grid {width: 50px; height: 50px; background: red; margin: 10px;}. Active {background: blue;} "how to realize the simple turntable lottery function" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.