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
Vue implements Tab tab switching
This article example shares the specific code of ...
CSS realizes the scene analysis of semi-transparent border and multiple border
Scenario 1: To achieve a semi-transparent border:...
Getting Started Tutorial for Beginners: Domain Name Resolution and Binding
So after registering a domain name and purchasing...
Solution to incomplete text display in el-tree
Table of contents Method 1: The simplest way to s...
Docker uses CMD or ENTRYPOINT commands to start multiple services at the same time
Requirement: Celery is introduced in Django. When...
Ubuntu Server 18.04.5 LTS Server Edition Installation and Configuration Graphic Tutorial
1. Ubuntu Server 18.04.5 LTS system installation ...
Summary of MySQL InnoDB locks
Table of contents 1. Shared and Exclusive Locks 2...
Using trap to perform environment cleanup before graceful shutdown of docker container
When a running container is terminated, how can w...
Tutorial on disabling and enabling triggers in MySQL [Recommended]
When using MYSQL, triggers are often used, but so...
A simple and in-depth study of async and await in JavaScript
Table of contents 1. Introduction 2. Detailed exp...
Mysql 5.6 adds a method to modify username and password
Log in to MySQL first shell> mysql --user=root...
Vue implements adding, displaying and deleting multiple images
This article shares the specific code for Vue to ...
Vuex modularization and namespaced example demonstration
1. Purpose: Make the code easier to maintain and ...
Ten important questions for learning the basics of Javascript
Table of contents 1. What is Javascript? 2. What ...
A simple way to change the password in MySQL 5.7
This is an official screenshot. After MySQL 5.7 i...