Lottery system based on JavaScript and Lucky Draw using javascript

Lottery system based on JavaScript and Lucky Draw using javascript

Use JavaScript to implement a simple lottery system with the start and stop buttons.

Function:

-Click the start button to start the lottery. The prize name is displayed randomly;
-Click the stop button to stop the lottery;
-Press the Enter key to switch between start lottery and stop lucky draw.

Html code:

Create an html structure. The basic information is to include the displayed prize name, start, and stop buttons.

<! Doctype html> 
Main js code snippets:
First, define the data array and write the names of each prize. And initialize the timer, and the keyboard event status flag (the initial status is 0, press the keyboard to 1, and then press the keyboard to 0, so that the switch ).
Var data = ['phone7', 'ipad ', 'samsung laptop', 'canon camera ', 'hp printer', 'Thank you for participating in ', '100 RMB recharge card ', '10 million yuan supermarket coupons ']; timer = null, flag = 0;
Define the start lottery function playFun ();
Function playFun () {var title = document. getElementById ('title'); var play = document. getElementById ('play'); // The Last timer task is cleared each time, so as to avoid accumulating the lottery effect more frequently and clearInterval (timer ); // trigger the timer once in 50 milliseconds = setInterval (function () {// obtain the random number of prize subscripts var random = Math. floor (Math. random () * data. length); // display the title of a random prize. innerHTML = data [random] ;}, 50); // change the background color of the Start button to play. style. background = '#666 ';}
Define the stop lottery function stopFun ();
Function stopFun () {// clear the timer to end the lottery clearInterval (timer); var play = document. getElementById ('play'); // Changes the background color of the stop button. style. background = '#036 ';}
Press the Enter key to switch to the lucky draw status event;
Document. onkeyup = function (event) {event = event | window. event; // the keycode of the Return key is 13 if (event. keyCode = 13) {// if the flag value is 0, the lottery starts and the status value is changed to 1, otherwise, stop the lottery and change the status value to 0 if (flag = 0) {playFun (); flag = 1 ;}else {stopFun (); flag = 0 ;}}}
Complete js Code:

Var data = ['phone7', 'ipad ', 'samsung laptop', 'canon camera ', 'hp printer', 'Thank you for participating in ', '100 RMB recharge card ', 'nt $ supermarket coupon '], timer = null, // timer flag = 0; // used to mark the window for keyboard event status. onload = function () {var play = document. getElementById ('play'), stop = document. getElementById ('stop'); // start the lottery play. onclick = playFun; stop. onclick = stopFun; // keyboard event document. onkeyup = function (event) {event = event | window. event; if (event. keyCode = 13) {if (flag = 0) {playFun (); flag = 1 ;}else {stopFun (); flag = 0 ;}}}} // start the lottery function playFun () {var title = document. getElementById ('title'); var play = document. getElementById ('play'); // The Last timer task is cleared each time to avoid accumulating the lottery effect more frequently. clearInterval (timer); timer = setInterval (function () {var random = Math. floor (Math. random () * data. length); title. innerHTML = data [random] ;}, 50); play. style. background = '#999';} // stop the lottery function stopFun () {clearInterval (timer); var play = document. getElementById ('play'); play. style. background = '#036 ';}
Css style:
* {Margin: 0; padding: 0 ;}. title {font-size: 24px; font-weight: bold; width: 400px; height: 70px; margin: 0 auto; padding-top: 30px; text-align: center; color: # f00 ;}. btns {width: pixel PX; height: 30px; margin: 0 auto ;}. btns span {font-family: ' '; font-size: 14px; line-height: 27px; display: block; float: left; width: 80px; height: 27px; margin-right: 10px; cursor: pointer; text-align: center; color: # fff; border: 1px solid # eee; border-radius: 7px; background: #036 ;}
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.