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
Implementation of building Kubernetes cluster with VirtualBox+Ubuntu16
Table of contents About Kubernetes Basic environm...
Vue.js implements simple folding panel
This article example shares the specific code of ...
How to clean up Alibaba Cloud MySQL space
Today I received a disk warning notification from...
Detailed explanation of the problem of matching even when there is a space at the end of the string in the Mysql query condition
1. Table structure TABLE person id name 1 you 2 Y...
Detailed explanation of Vue filter implementation and application scenarios
1. Brief Introduction Vue.js allows you to define...
How to implement logic reuse with Vue3 composition API
Composition API implements logic reuse steps: Ext...
Use of MySQL triggers
Triggers can cause other SQL code to run before o...
Detailed explanation of CSS3 to achieve responsive accordion effect
I recently watched a video of a foreign guy using...
Detailed explanation of 5 solutions for CSS intermediate adaptive layout
Preface When making a page, we often encounter co...
Detailed explanation of how to efficiently import multiple .sql files into MySQL
MySQL has multiple ways to import multiple .sql f...
Specific use of GNU Parallel
what is it? GNU Parallel is a shell tool for exec...
In-depth understanding of the use of Vue
Table of contents Understand the core concept of ...
JavaScript object-oriented implementation of magnifying glass case
This article shares the specific code of JavaScri...
Implementation of HTML to PDF screenshot saving function
Using Technology itext.jar: Convert byte file inp...
JavaScript imitates Jingdong magnifying glass effect
This article shares the specific code for JavaScr...