小demo 1
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:0; display: block; background-color: rgba(0,0,0,.5); z-index: 999; 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: none; } #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; }
html部分:
<ul> <li>1<div class="mask"></div></li> <li>2<div class="mask"></div></li> <li>3<div class="mask"></div></li> <li>4<div class="mask"></div></li> <a>GO</a> <li>6<div class="mask"></div></li> <li>7<div class="mask"></div></li> <li>8<div class="mask"></div></li> <li>9<div class="mask"></div></li> </ul> <div id="page"></div>
Js部分:
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; speed = 50; roll() function roll(){ arrLi[arr[index]].className=""; index++; //将物品连续在一起转动 if(index>=8){ index=0; } arrLi[arr[index]].className="active"; speed += 20; time=setTimeout(roll,speed); //转动的速度 } setTimeout(function(){ clearTimeout(time); if(index==0){ //抽奖时阻止抽到最好的物品 arrLi[arr[index]].className=""; arrLi[arr[index+1]].className="active"; } swh=true; },Math.random()*3500+1000) //转动的时间 } }
小demo 2
css部分:
html,body{ width: 100%; height: 100%; max-width: 750px; margin: auto; } .outBox{ width: 100%; height: 60%; background: gray; position: relative; display: flex; flex-flow: row wrap; } .prize{ width: 33%; height: 40%; text-align: center; font-size: xx-large; color: #fff; padding-top: 15%; box-sizing: border-box; border: 6px double #AB945E; } .prize.active{ background: goldenrod; } .btn{ position: absolute; left:30%; /* bottom:-20%;*/ width: 40%; text-align: center; height: 12%; font-size: xx-large; }
HTML部分:
<div class="outBox" id="lotteryBoxs"> <div class="prize prize-0 one">一等奖</div> <div class="prize prize-1 two">二等奖</div> <div class="prize prize-3 four">谢谢参与</div> <div class="prize prize-2 three">三等奖</div> <div class="prize"> <button class="btn">开启好运</button></div> <div class="prize prize-5 two">二等奖</div> <div class="prize prize-6 four">谢谢参与</div> <div class="prize prize-7 three">三等奖</div> <div class="prize prize-8 three">三等奖</div> </div>
js部分:
$(document).ready(function() { // 转盘的初定义 var lottery = { index: 0, //当前转动到哪个位置，起点位置 count: 0, //总共有多少个位置 timer: 0, //setTimeout的ID，用clearTimeout清除 speed: 10, //初始转动速度 times: 0, //转动次数 cycle: 30, //转动基本次数：即至少需要转动多少次再进入抽奖环节 prize: 0, //中奖位置 init: function(id) { if ($("#" + id).find(".prize").length > 0) { $lottery = $("#" + id); //父盒子 $units = $lottery.find(".prize"); //子集 this.obj = $lottery; this.count = $units.length; } }, roll: function() { var index = this.index; var count = this.count; var lottery = this.obj; $(lottery).find(".prize").removeClass("active"); index += 1; if (index > count - 1) { index = 0; } $(lottery).find(".prize-" + this.index).addClass("active"); this.index = index; return false; }, stop: function(index) { this.prize = index; return false; } }; // 中奖转动事件 function roll() { lottery.times += 1; lottery.roll(); var prize_site = $("#lotteryBoxs").attr("prize_site"); if (lottery.times > lottery.cycle + 10 && lottery.index == prize_site) { var prize_id = $("#lotteryBoxs").attr("prize_id"); var prize_name = $("#lotteryBoxs").attr("prize_name"); console.log(prize_site+"结果") //中奖情况的判断--模态框 if(prize_site == 1 || prize_site == 2 || prize_site == 3){ //已中奖 setTimeout(function(){ console.log("恭喜你获得" + prize_name) },500) }else{ //未中奖 setTimeout(function(){ console.log("中奖结果：" + prize_name) },500) } clearTimeout(lottery.timer); lottery.prize = -1; lottery.times = 0; click = false; } else { if (lottery.times < lottery.cycle) { lottery.speed -= 20; } else if (lottery.times == lottery.cycle) { var index = Math.random() * (lottery.count) | 0; lottery.prize = index; } else { if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == lottery.count - 1) || lottery.prize == lottery.index + 1)) { lottery.speed += 90; } else { lottery.speed += 30; } } if (lottery.speed < 30) { lottery.speed = 30; } lottery.timer = setTimeout(roll, lottery.speed); } return false; } var click = false; // 模拟后台数据的调用 $(function() { lottery.init('lotteryBoxs'); $(".btn").click(function() { if (click) { return false; } else { lottery.speed = 100; //此处数据应该从接口获取 var prizeArr=["谢谢参与","一等奖","二等奖","三等奖"] var prizeId = Math.floor(Math.random()*(3-0+1)+0); var prize_site = prizeId; console.log("位置"+prizeId); $("#lotteryBoxs").attr("prize_site", prize_site ); $("#lotteryBoxs").attr("prize_name", prizeArr[prizeId]); roll(); click = true; return false; } }); }) });
...