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
Native JS realizes compound motion of various motions
This article shares with you a compound motion im...
Detailed explanation of the role of the new operator in Js
Preface Js is the most commonly used code manipul...
React+Antd implements an example of adding, deleting and modifying tables
Table of contents Table/index.js Table/model/inde...
MySQL multi-table join query example explanation
In actual projects, there are relationships betwe...
How to use display:olck/none to create a menu bar
The effect of completing a menu bar through displ...
JavaScript canvas text clock
This article example shares the specific code of ...
Introduction to html form control disabled attributes readonly VS disabled
There are two ways to disable form submission in ...
MySQL recursion problem
MySQL itself does not support recursive syntax, b...
A brief discussion on an efficient algorithm for constructing tree structures in JavaScript
Table of contents introduction Ideas Establish ID...
Detailed explanation of InnoDB storage files in MySQL
Physically speaking, an InnoDB table consists of ...
jQuery achieves seamless scrolling of tables
This article example shares the specific code of ...
Installation of mysql-community-server. 5.7.18-1.el6 under centos 6.5
Use the following command to check whether MySQL ...
Nginx's practical method for solving cross-domain problems
Separate the front and back ends and use nginx to...
How to implement the @person function through Vue
This article uses vue, and adds mouse click event...
The most comprehensive explanation of the locking mechanism in MySQL
Table of contents Preface Global Lock Full databa...