js to achieve a simple lottery function
|
This article shares the specific code of js to implement a simple lottery function for your reference. The specific content is as follows 1. Scenario:Click the button to start the random prize drawing. When it stops, the prize that remains on the big screen is the prize drawn (“Thank you” means no prize). 2. Ideas:As we all know, the main thing about lotteries is randomness, and the prizes are drawn from a bunch of prizes. Then you can lock the direction: use an array to store the award names, and use Math.random() to return a random number between 0 (inclusive) and 1 (exclusive). As long as you can randomly select the index of the array, you can randomly select the prize. Without further ado, here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="start">Start</button>
<button id="end">Stop</button>
<h1 id="txt">Please start</h1>
<script>
var ostart=document.getElementById('start');
var oend=document.getElementById('end');
var otxt = document.getElementById('txt');
var timer;
var m;
var list=['mobile phone','pad','pad','shopping card','shopping card','shopping card','speaker','thank you','thank you','thank you','thank you','thank you','thank you','thank you','thank you','thank you','thank you']
// Start ostart.onclick=function(){
timer = setInterval(function(){
// Generate random number m=parseInt(Math.random()*list.length);
// Modify the html
otxt.innerHTML=list[m]
// Modify the image.setAttribute('src',list[m])
},1000)
}
//Stop oend.onclick=function(){
clearInterval(timer);
alert('Congratulations on winning'+list[m]);
list.splice(m,1,'Thank you');
}
</script>
</body>
</html>Click the "Start" button:
Draw Results:
You can adjust the timer as you like, so try it now! The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to quickly paginate MySQL data volumes of tens of millions
>>: Detailed explanation of Docker's most commonly used image commands and container commands
Recommend
Native JS to implement click number game
Native JS implements the click number game for yo...
Let's talk about the difference between MyISAM and InnoDB
The main differences are as follows: 1. MySQL use...
Solution to the problem of Failed when configuring IDEA to connect to MYSQL database
This article mainly introduces the solution to th...
Instructions for nested use of MySQL ifnull
Nested use of MySQL ifnull I searched online to s...
Summary of special processing statements of MySQL SQL statements (must read)
1. Update the entire table. If the value of a col...
Use of Linux usermod command
1. Command Introduction The usermod (user modify)...
Example code for implementing multiple line omissions using three methods of advanced CSS
Preface This is an old demand, but there are stil...
Summary of the minesweeping project implemented in JS
This article shares the summary of the JS mineswe...
How to use Nginx to solve front-end cross-domain problems
Preface When developing static pages, such as Vue...
Implementing license plate input function in WeChat applet
Table of contents Preface background Big guess Fi...
Details of MutationObServer monitoring DOM elements in JavaScript
1. Basic Use It can be instantiated through the M...
Detailed explanation of Linux system input and output management and common functions of vim
####Management of input and output in the system#...
61 Things Every Web Developer Should Know
Normally, you'll need to read everyone's s...
A brief understanding of the differences between MySQL InnoDB and MyISAM
Preface MySQL supports many types of tables (i.e....
Tomcat multi-instance deployment and configuration principles
1. Turn off the firewall and transfer the softwar...