JavaScript to achieve lottery effect
|
This article shares the specific code of JavaScript to achieve the effect of the lottery machine for your reference. The specific content is as follows The effect of this implementation is as follows:
The function implemented is: each time the lottery button in the middle is clicked, a box will be randomly selected as the result of the lottery. So how do we implement the lottery function? It’s actually very simple. First, use HTML and CSS to make the overall framework, and then use JS to set a timer in the 1. When designing the overall framework, we need to set borders for each box. At this time, we will find that the borders will overlap , causing the borders to become thicker. The solution is to set 2. When setting the lottery function in js, we can set a timer A to randomly change 3. How is random change achieved? First, call Obviously timer A is Moreover, when changing the background color of a box in A, in order to restore the last box whose color was changed to its original color, we need to record the box whose background color was changed last time. See the following code for details:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
.container{
width: 400px;
height: 400px;
margin:50px auto;
}
span,#main{
display: block;
width: 100px;
height: 100px;
border:2px pink solid;
float:left;
margin-left:-2px;
margin-bottom:-2px;
text-align: center;
line-height: 100px;
border-radius: 16px;
box-shadow: 2px 2px 3px rgba(226, 86, 109, 0.459);
}
#main{
background-color: rgba(243, 97, 126, 0.651);
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div>
Visualization
<span>Graphics</span>
<span>Operating System</span>
</div>
<div>
<span>Leshi</span>
<div id="main">Lucky draw</div>
<span>White Rabbit</span>
</div>
<div>
<span>Lemonade</span>
<span>Black coffee</span>
<span>Taro milk tea</span>
</div>
</div>
<script>
let main = document.getElementById("main");
let box = document.getElementsByTagName("span");
var num=null;
main.onclick=function(){
let time = setInterval(() => {
if(num!==null){
box[num].style.backgroundColor="white";
}
num = parseInt (Math.random() * 8);
box[num].style.backgroundColor="rgba(243, 97, 126, 0.651)";
console.log(num);
}, 120);
setTimeout(() => {
clearInterval(tem)
}, 3000);
}
</script>
</body>
</html>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:
|
<<: SVG button example code based on CSS animation
>>: Implementation of mounting NFS shared directory in Docker container
Recommend
MySQL 8.0 user and role management principles and usage details
This article describes MySQL 8.0 user and role ma...
CnBlogs custom blog style sharing
After spending half the night on it, I finally ma...
js implements the pop-up login box by clicking the pop-up window
This article shares the specific code of js to re...
ES6 loop and iterable object examples
This article will examine the ES6 for ... of loop...
Analysis of the Docker deployment Consul configuration process
Execute Command docker run -d --name consul -p 85...
Automatically install the Linux system based on cobbler
1. Install components yum install epel-rpm-macros...
Mini Program to Implement Sieve Lottery
This article example shares the specific code of ...
Two ways to introduce svg icons in Vue
How to introduce svg icons in Vue Method 1 of int...
Detailed explanation of the practical record of solving network isolation through Nginx
need Recently, we need to migrate Node online ser...
A brief discussion on Flex layout and scaling calculation
1. Introduction to Flex Layout Flex is the abbrev...
Installing Alibaba Cloud Server with Docker and the pitfalls encountered in installing it in a virtual machine (summary of problems)
Docker installation (Alibaba Cloud Server) Docker...
Navicat connects to MySQL8.0.11 and an error 2059 occurs
mistake The following error occurs when connectin...
How to solve the high concurrency problem in MySQL database
Preface We all know that startups initially use m...
MySQL trigger syntax and application examples
This article uses examples to illustrate the synt...
Should I use Bootstrap or jQuery Mobile for mobile web wap
Solving the problem Bootstrap is a CSS framework ...