This article explains a small JavaScript case, the Jiugongge lottery. Click the button to start the lottery, and click the end button to confirm the prize drawn. Of course, it can also be used for daily class roll call and other purposes.
For the convenience of everyone, I put all the code at the end.
Table of contents
background color change function
The effect is as follows
code part
DOM structure
It is relatively simple to write, just a large div with nine divs inside, and two buttons underneath. You can expand it according to your specific needs.
<h1>抽奖</h1>
<div id="big">
<div class="box">一等奖</div>
<div class="box">二等奖</div>
<div class="box">三等奖</div>
<div class="box">参与奖</div>
<div class="box">特等奖</div>
<div class="box">参与奖</div>
<div class="box">四等奖</div>
<div class="box">谢谢惠顾</div>
<div class="box">五等奖</div>
</div>
<button id="kai">开始</button>
<button id="jie">结束</button>style
The style part is also very simple, just write the size and border. Everyone can write the style according to their own needs.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#big {
width: 300px;
height: 300px;
box-shadow: 0px 0px 1px 1px gray;
display: flex;
flex-wrap: wrap;
}
.box {
width: 100px;
height: 100px;
border: 1px black solid;
}
h1 {
color: red;
}
button{
height: 30px;
width: 60px;
}JavaScript code
Get dom element
Get elements based on id and class name in html code.
getElementsByClassName("box") will obtain all elements with the class name box to form a pseudo array. Because of its uniqueness, only one ID will be obtained.
var kai = document.getElementById("kai");
var jie = document.getElementById("jie");
var box = document.getElementsByClassName("box");random number function
We first write a random number function with the parameters being the minimum value and the maximum value. This function will randomly generate a random number between the maximum value and the minimum value.
Make a judgment first. If the maximum value and minimum value are written reversely, swap their positions.
Then with the help of Math.random(), Math.random() allows the system to randomly select a pseudo-random double value greater than or equal to 0.0 and less than 1.0. The formula Math.random() * (max - min + 1) + min can obtain min to a random value of max, and then use Math.floor(). The Math.floor() function always returns the largest integer less than or equal to a given number, so the returned random number is an integer.
Code:
function random1(min, max) {//随机数函数
if (min >= max) {//如果最大值和最小值写反了，就倒换它们俩
var a;
a = max;
max = min;
min = a;
}
return Math.floor(Math.random() * (max - min + 1) + min);//根据最大值和最小值区间，生成一个此区间的随机数
}background color change function
box.length is the number of boxes. The class name of the grid div is box. We use var box = document.getElementsByClassName("box"); to obtain a pseudo array of divs with the class name "box", so box.length is the box. quantity.
We use two nested for loops to set the background color of all boxes to null.
Then call the previous random number function, and set the color of box [random number] to red when the background color of all boxes is set to null.
Code:
function yanse() {
// console.log(random1(0,8));
for (var j = 0; j < box.length; j++) {
for (var z = 0; z < box.length; z++) {
box[z].style.cssText = "background-color:null";
}
var a = random1(0, 8);
box[a].style.background = "red";
}
}click event
We add a click event to the start button. After clicking, an interval timer is generated and the color change function is executed every 200 milliseconds. After clicking Start, change the Start button to an unclickable state. Every 200 milliseconds, one of the 9 divs' background color randomly turns red.
Clicking the end button will clear the timer, the start button will change to a clickable state, and the background color of a div will change to red, completing the effect we want.
Code:
kai.onclick = function () {
var ding = setInterval(yanse, 200);//间隔定时器，每200毫秒执行一次颜色变化函数
kai.disabled = "true"; //按钮无法点击
jie.onclick = function () {//结束按钮点击事件
clearInterval(ding);//清空定时器
kai.disabled = ""; //按钮无法点击
};
};code collection
JavaScript：
var kai = document.getElementById("kai");
var jie = document.getElementById("jie");
var box = document.getElementsByClassName("box");
// var str = [0, 1, 2, 3, 4, 5, 6, 7, 8];
kai.onclick = function () {
var ding = setInterval(yanse, 200);
kai.disabled = "true"; //按钮无法点击
jie.onclick = function () {
clearInterval(ding);
kai.disabled = ""; //按钮无法点击
};
};
function random1(min, max) {
if (min >= max) {
var a;
a = max;
max = min;
min = a;
}
return Math.floor(Math.random() * (max - min + 1) + min);
}
function yanse() {
// console.log(random1(0,8));
// var i = 0;
for (var j = 0; j < box.length; j++) {
for (var z = 0; z < box.length; z++) {
box[z].style.cssText = "background-color:null";
}
var a = random1(0, 8);
box[a].style.background = "red";
}
}html：
<h1>抽奖</h1>
<div id="big">
<div class="box">一等奖</div>
<div class="box">二等奖</div>
<div class="box">三等奖</div>
<div class="box">参与奖</div>
<div class="box">特等奖</div>
<div class="box">参与奖</div>
<div class="box">四等奖</div>
<div class="box">谢谢惠顾</div>
<div class="box">五等奖</div>
</div>
<button id="kai">开始</button>
<button id="jie">结束</button>css style:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#big {
width: 300px;
height: 300px;
box-shadow: 0px 0px 1px 1px gray;
display: flex;
flex-wrap: wrap;
}
.box {
width: 100px;
height: 100px;
border: 1px black solid;
}
h1 {
color: red;
}
button{
height: 30px;
width: 60px;
}Thanks for reading.