Illustration of javascript running Lantern Lucky draw

2020-11-25 07:09:51
OfStack

This article explains javascript's special effect of lantern drawing, which is especially suitable for lucky drawing activities. It will be Shared for your reference. The specific content is as follows


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Lottery games </title>
<style>
#box{
 width:720px;
 margin:0 auto;
 margin-top:20px;
 box-shadow:0px 0px 2px #333;
}
.pic{
 width:200px;
 height:200px;
 float:left;
 line-height:200px;
 margin:10px;
 border:5px #fff solid;
 color:blue;
 font-size: 35px;
 text-align: center;
}
.anniu{
 width:200px;
 height:200px;
 float:left;
 margin:10px;
}
#drawBtn{
 color:red;
 font-size:30px;
 width:200px;
 height:200px;
 box-shadow:0px 0px 2px #333;
 font-weight: bold;
}
 </style>
 <script>
 window.onload=init;
 var setting={
 count:0,
 total:24,
 delay:20,
 picIndex:[0,1,2,4,7,6,5,3]
 }
 function init(){
 document.getElementById("drawBtn").onclick=function(){
  setting.count=0;
  setting.delay=20;
  this.disable=true;// Disable the button 
  var drawBtn=this;
  // Get all the pictures div
  var allDivs=document.getElementsByClassName("pic");
  // To obtain 1 A random integer representing the position that won the lottery, 3*8+(0-7)
  setting.total+=Math.floor(Math.random()*allDivs.length);
  // Set the timer and change each one in turn div Color of the border .
  setTimeout(function show(){
  // The reset 1 The color of the border 
  for (var i=0;i<allDivs.length;i++){
   allDivs[i].style.borderColor="#fff";
   allDivs[i].style.opacity=0.7;
  }
  // Find the color Settings for the border that you want to change 
   var currentPic=allDivs[setting.picIndex[setting.count%8]];
   currentPic.style.borderColor="red";
   currentPic.style.opacity=1.0;
  setting.count++;
  setting.delay+=2*setting.count;
   if(setting.count>setting.total){
   alert(" You've won the lottery, ha ha ");
   drawBtn.disable=false;
   return;
   }
   setTimeout(show,setting.delay);
  },setting.delay);
 }
 }
 </script>
</head>
<body>
<div id="box">
 <div class="pic">1</div>
 <div class="pic">2</div>
 <div class="pic">3</div>
 <div class="pic">4</div>
 <div class="anniu"><input type="button" value=" I want to draw " id="drawBtn"/></div>
 <div class="pic">5</div>
 <div class="pic">6</div>
 <div class="pic">7</div>
 <div class="pic">8</div>
</div>
</body>
</html>

To learn more about the implementation of the lucky draw function, please refer to this topic: lucky draw function

Above is the detailed content of this article, hope to be helpful to your study.