How to realize the simple lottery system with native js

This article mainly explains "how to realize the simple raffle system with native js". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to realize the simple raffle system with native js".

Effect picture

Principle:

In fact, the principle here is whether to start the lottery or stop by the state of the button. If i=ture, then trigger the timer to change the winning content every 50 milliseconds. If i=false, clear the timer to display the final lottery result

HTML structure and style

Document * {margin: 0; padding: 0;} h3 {font-weight: normal;} .box {width: 450px; height: auto; background: # fff; border-radius: 3px; margin: 50px auto; padding-bottom: 1em Box-shadow: 0 10px 10px 0 rgba (0,0,0,0.2), 0 5px 15px 0 rgba (0,0,0,0.19);} .header {width: 100%; height: auto; padding: 0.5em 0.8mm; border-bottom: 1px solid # ccc; box-sizing: border-box } .body {width: 100%; height: auto; text-align: center;} .body: after {content: "; display: block; clear: both;} .body > div {width: 180px; margin: 0 auto } .body > div > span {padding-top: 1em; float: left;} # tip {display: none;} .footer {width: 180px; height: 30px; background: # 2ab8ff; line-height: 30px; text-align: center Margin: 1em auto; color: # ccc; border: 1px solid # 2193cc; border-radius: 3px; cursor: pointer;} .footer: hover {background: # 4ec1fb } simple lucky draw system Congratulations! Win: click lucky draw

Js code

/ * get button * / var btn = document.querySelector ('.footer'); / * get the prompt tag * / var tip = document.querySelector ('# tip'); / * get the label to be exported * / var put = document.querySelector ('# put') / * define the winning project * / var gift = ['QQ VIP', 'yellow diamond', 'green diamond', 'black diamond', 'purple diamond', 'red diamond', 'blue diamond', 'diamond king']; / * define i==true to judge * / var I = true; / * define timer * / var Timer; var n = 0 Btn.onclick=function () {if (I = = true) {btn.style.background ='# f1516cm2; btn.style.borderColor ='# db2745'; tip.style.display = 'block'; Timer = setInterval (function () {nasty +) If (n = = gift.length) {n = 0;} put [XSS _ clean] = gift [n];}, 50) btn [XSS _ clean] = 'stop'; I = false } else {btn.style.background ='# 2ab8ffffly; btn.style.borderColor ='# 2193ccm2; clearInterval (Timer); btn [XSS _ clean] = 'start the lottery'; I = true }} Thank you for your reading. the above is the content of "how to realize the simple raffle system with native js". After the study of this article, I believe you have a deeper understanding of how to implement the simple raffle system with native js, 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!