JS九宫格抽奖

注：此篇文章的图片及样式参考https://www.cnblogs.com/starof/p/4933907.html网站，js内容主要是根据自己所学去写的
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		ul{ 
			margin: 0 auto;
			padding: 0;
			width: 576px;
			height: 513px;
			border:4px solid red;
			font-size: 0;
		}
		li,a{
			display: inline-block;
			width: 190px;
			height: 170px;
			border:0.5px solid red;
			font-size: 14px;
		}
		ul li .mask{
            width: 190px;
			height: 170px;
            position: relative;
            left:0;
            top:-172px;
            display: none;
            box-shadow:0px -5px 10px 0px white inset,/* 添加转动时图片的阴影 */
                -5px 0px 10px 0px white inset,
                5px 0px 10px 0px white inset,
                0px 5px 10px 0px white inset; 
            }
        ul .active .mask{
            display: block;
            }
        #page {
            line-height: 32px;
            color: #9a9a9a;
            text-align: center;
            position:absolute;
            left: 50%;
            top: 50px;
            width: 300px;
            height: 50px;
            margin-left: -150px;
            display: none;
            background: #000;
            color: #fff;
        }
		
		
		.act .mask{
			display: block;
		}
	</style>
</head>
<body>
<ul>
	<li><img class="active" src="images/1.jpg" alt=""><div class="mask"></div></li>
	<li><img src="images/2.jpg" alt=""><div class="mask"></div></li>
	<li><img src="images/3.jpg" alt=""><div class="mask"></div></li>
	<li><img src="images/4.jpg" alt=""><div class="mask"></div></li>
	<a><img src="images/9.jpg" alt=""></a>
	<li><img src="images/5.jpg" alt=""><div class="mask"></div></li>
	<li><img src="images/6.jpg" alt=""><div class="mask"></div></li>
	<li><img src="images/7.jpg" alt=""><div class="mask"></div></li>
	<li><img src="images/8.jpg" alt=""><div class="mask"></div></li>
</ul>
<div id="page"></div>
</body>
<script type="text/javascript">
    
	var arr=[0,1,2,4,7,6,5,3]  //给图片设置一个转动的方向
	var arrLi=document.getElementsByTagName("li");
	var oBtn=document.getElementsByTagName("a")[0];
	
	var tim; //时间
	var index=0  
	var swh=true
	oBtn.onclick=function(){
		
		if(swh){
			swh=false;
			time=setInterval(function(){
				arrLi[arr[index]].className="";
			index++;  //将物品连续在一起转动
			if(index>=8){
				index=0;
			}
			arrLi[arr[index]].className="active"
		},50);  //转动的速度
		setTimeout(function(){
			clearInterval(time);
			if(index==0){   //抽奖时阻止抽到最好的物品
				arrLi[arr[index]].className="";
				arrLi[arr[index+1]].className="active";
			}
			
			swh=true;
		},Math.random()*500+1000)  //转动的时间
	}	
	}	
		
		
	
	
</script>
</html>
在这里插入图片描述
猜你喜欢
