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
A brief discussion on JS regular RegExp object
Table of contents 1. RegExp object 2. Grammar 2.1...
Simple web design concept color matching
(I) Basic concepts of web page color matching (1) ...
MySQL 5.7.21 winx64 green version installation and configuration method graphic tutorial
This article records the installation and configu...
How to start and stop SpringBoot jar program deployment shell script in Linux
Without further ado, let me give you the code. Th...
CSS3 implements missing corner rectangle, folded corner rectangle and missing corner border
Preface A few days ago, I came across the feature...
Summary of Mathematical Symbols in Unicode
There are many special symbols used in mathematic...
How to use CocosCreator for sound processing in game development
Table of contents 1. Basics of audio playback in ...
Detailed explanation of gcc command usage under Linux system
Table of contents 1. Preprocessing 2. Compilation...
Specific use of the wx.getUserProfile interface in the applet
Recently, WeChat Mini Program has proposed adjust...
Summary of Mysql exists usage
Introduction EXISTS is used to check whether a su...
In-depth analysis of JDBC and MySQL temporary tablespace
background Temporary tablespaces are used to mana...
WeChat applet implements login interface
The login interface of WeChat applet is implement...
React antd tabs switching causes repeated refresh of subcomponents
describe: When the Tabs component switches back a...
Implementation code of the floating layer fixed on the right side of the web page
Copy code The code is as follows: <!DOCTYPE ht...
The latest MySQL 5.7.23 installation and configuration graphic tutorial
The detailed installation and configuration of th...