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
How to export CSV file with header in mysql
Refer to the official document http://dev.mysql.c...
Detailed explanation of the case of dynamically generating tables using JavaScript
Table of contents Preface Implementation ideas Im...
How to use anti-shake and throttling in Vue
Table of contents Preface concept Stabilization d...
Web componentd component internal event callback and pain point analysis
Table of contents Written in front What exactly i...
Analysis of two usages of the a tag in HTML post request
Two examples of the use of the a tag in HTML post...
Three JavaScript methods to solve the Joseph ring problem
Table of contents Overview Problem Description Ci...
Solution to nginx not jumping to the upstream address
Preface Today I encountered a very strange proble...
Methods and steps to access Baidu Maps API with JavaScript
Table of contents 1. Baidu Map API Access 2. Usin...
Summary of using MySQL online DDL gh-ost
background: As a DBA, most of the DDL changes of ...
uniapp project optimization methods and suggestions
Table of contents 1. Encapsulate complex page dat...
VMware pro15 installation macOS10.13 detailed installation diagram (picture and text)
The editor recently wanted to get started with th...
MySQL full-text search usage examples
Table of contents 1. Environmental Preparation 2....
HTML implements Double 11 coupon grabbing (set time to open the coupon grabbing page)
Without further ado, I will post the code for you...
JavaScript implements checkbox selection function
This article example shares the specific code of ...
CSS syntax for table borders
<br /> CSS syntax for table borders The spec...