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
Detailed explanation of Linux text processing tools
1. Count the number of users whose default shell ...
CSS3 achieves conic-gradient effect
grammar: background-image: conic-gradient(from an...
How to build mysql master-slave server on centos7 (graphic tutorial)
This article mainly introduces how to build a MyS...
JavaScript implementation of drop-down list
This article example shares the specific code of ...
Use the ip netns command in Linux to isolate the network port and configure the IP address
1. Add the isolation marker: ip netns add fd 2. P...
Advanced crawler - Use of Scrapy_splash component for JS automatic rendering
Table of contents 1. What is scrapy_splash? 2. Th...
An article to understand MySQL master-slave replication and read-write separation
Table of contents introduction 1. MySQL master-sl...
MySQL Community Server 5.6 installation and configuration tutorial under Windows 8
This article records the installation and configu...
Hyperlink icon specifications: improve article readability
1. What is the hyperlink icon specification ?<...
How to use lazy loading in react to reduce the first screen loading time
Table of contents use Install How to use it in ro...
9 code optimization tips to improve website usability that webmasters should pay attention to
1. Add alternative text to your logo This has two...
Detailed introduction to deploying k8s cluster on centos7 system
Table of contents 1 Version and planning 1.1 Vers...
How to uninstall and reinstall Tomcat (with pictures and text)
Uninstall tomcat9 1. Since the installation of To...
Nginx configuration cross-domain request Access-Control-Allow-Origin * detailed explanation
Preface When a 403 cross-origin error occurs No &...
CSS sets the box container (div) height to always be 100%
Preface Sometimes you need to keep the height of ...