老虎机 - 爱码网

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>老虎机</title>
<style>
*{
  margin: 0 auto;
  padding: 0;
}
body{
  background-color: black;
}
  #da{
   width:909px;
   height: 450px;
   /*margin-top: 50px;*/
  }
  #zuo{
   width: 300px;
   height: 300px;
   float: left;
   border: 1px solid #444;
  }
  #zhong{
   width: 300px;
   height: 300px;
   float: left;
   border: 1px solid #444;
  }
  #you{
   width: 300px;
   height: 300px;
   float: left;
   border: 1px solid #444;
  }
</style>
</head>
<body>
<div id="da">
  <div id="zuo"><img src="imges/1.png" alt="" id="img1" style="width:300px; height: 300px;"></div>
  <div id="zhong"><img src="imges/3.jpg" alt="" id="img2" style="width:300px; height: 300px;"></div>
  <div id="you"><img src="imges/4.jpg" alt="" id="img3" style="width:300px; height:300px;"></div>
  <input type="button" value="开始" id="btn" style="width: 150px; height: 50px; margin-left:380px; margin-top:20px;">
</div>
</body>
<ml>
<script>
var arr=["imges/1.png","imges/3.jpg","imges/4.jpg","imges/5.jpg","imges/6.jpg"];
var sum=parseInt(Math.random()*arr.length);
var w=300;
var h=300;

var t1=null;
var t2=null;
var t3=null;
var t4=null;

var a=0;
var b=0;
var c=0;
var d=0;
btn.onclick=function(){

var t1=setInterval(function(){
  var sum=parseInt(Math.random()*arr.length);
   img1.src=arr[sum];
   img1.style.width=w+"px";
   img1.style.height=h+"px";
   a++;
   if(a==300){
    clearInterval(t1);
    a=0;
   }

},10);
var t2=setInterval(function(){
  var sum=parseInt(Math.random()*arr.length);
   img2.src=arr[sum];
   img2.style.width=w+"px";
   img2.style.height=h+"px";
   b++
   if(b==400){
    clearInterval(t2);
    b=0;
   }

},10);
var t3=setInterval(function(){
  var sum=parseInt(Math.random()*arr.length);
   img3.src=arr[sum];
   img3.style.width=w+"px";
   img3.style.height=h+"px";
   c++;
   if(c==500){
    clearInterval(t3);
     c=0;
   }
},10);
var t4=setInterval(function(){
  d++;
  if (d==503) {
   clearInterval(t4);
   if(img1.src==img2.src&&img1.src==img3.src){
    alert("恭喜中奖了");
   }else if(img1.src==img2.src || img1.src==img3.src || img2.src==img3.src){
    alert("很遗憾，请再接再厉！！");
   }
   d=0;
  }
},10);

}
</script>

最后结果显示如下：