How to realize the simple raffle system by JavaScript
This article mainly explains "JavaScript how to achieve a simple lottery system", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "JavaScript how to achieve a simple lucky draw system" bar!
Simulation realization of lottery system
The front end uses JavaScript code to implement the lottery system. The code is as follows:
Style Code:
Body {background: url ("bg.jpg") no-repeat; background-size: 100%;} # box {position: absolute; left: 50%; top: 50%; margin:-250px 00-250px; text-align: center; line-height: 100px; font-size: 40px Width: 500px; height: 300px; background: rgba; border-radius: 10px; box-shadow: 8px 8px 15px rgba;} # start {margin: 0; height: 50px; width: 120px; font-size: 30px Color: darkred; opacity: 0.6; box-shadow: 3px 3px 3px # f00;} # winner {border-radius: 5px; background: pink; margin-left: 100px; margin-right: 100px; opacity: 0.5;}
Body code
Lucky draw var names = ["Jack horse", "sesame vine", "brother giao", "medicine sauce", "pot", "quail", "big Sima"]; function extrust () {var index = parseInt (Math.random () * names.length); names.splice (index,1) / / remove the winner document.getElementById ('winner'). InnerText = names [index];} let start = false; var flag;// scheduled task tag document.getElementById ("start"). AddEventListener (' click',function () {if (names.length = = 0) {document.getElementById ('winner'). InnerText = "draw over" Return;} if (start) {/ / clear the scheduled task clearInterval (flag) for the specified tag; extrust () } else {flag = setInterval (function () {document.getElementById ('winner'). InnerText = names [parseInt (Math.random () * names.length)];}, 20)} / / status reverse start =! start;})
The page shows:
Thank you for your reading, the above is the content of "how to achieve a simple lucky draw system in JavaScript". After the study of this article, I believe you have a deeper understanding of how to achieve a simple lucky draw system in JavaScript, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
