<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.outBox {
width: 300px;
height: 100px;
display: flex;
/*border: 1px solid red;*/
}
.chooseBlock {
flex: 1;
background-color: #00a0e8;
box-sizing: border-box;
border: 1px solid red;
}
.startBtn {
line-height: 100px;
background-color: #b2b315;
text-align: center;
cursor: pointer;
}
.shadow {
background-color: #ff7f90;
}
.againBox {
cursor: pointer;
margin-left: 125px;
width: 50px;
}
</style>
<div class="outBox">
<div class="block-0 rollBlock chooseBlock">1</div>
<div class="block-1 rollBlock chooseBlock">2</div>
<div class="block-2 rollBlock chooseBlock">3</div>
</div>
<div class="outBox">
<div class="block-7 rollBlock chooseBlock">8</div>
<div class="block chooseBlock startBtn" onselectstart="return false">start</div>
<div class="block-3 rollBlock chooseBlock">4</div>
</div>
<div class="outBox">
<div class="block-6 rollBlock chooseBlock">7</div>
<div class="block-5 rollBlock chooseBlock">6</div>
<div class="block-4 rollBlock chooseBlock">5</div>
</div>
<button class="againBox">reset</button>
<script src="./库/jquery-3.5.1.js"></script>
<script>
$(function () {
//转动动画
var rollFn = function () {
$(".rollBlock").each(function () {
$(".rollBlock").removeClass("shadow")
})
$(".startBtn").off("click")//开始后解绑click事件
var i = Math.floor(8 * Math.random());//在随机块开始转动
let j = 0;
var roll = function () {
const block = document.getElementsByClassName("block" + "-" + i)
const beforeBlock = document.getElementsByClassName("block" + "-" + (i - 1))
if (i < 8) {
i = i + 1;
$(beforeBlock).removeClass("shadow")
$(block).addClass("shadow")
// $(".rollBlock").each(function () {
// $(".rollBlock").removeClass("shadow")
// })
} else if (i = 8) {
$(".block-0").addClass("shadow")
$(".block-7").removeClass("shadow")
i = 0
} else {
i = 0;
}
j = j + 1; //记录转动多少格
var ranNum = 80 + 8 * Math.random() //转动随机格数后停止
if (j > ranNum) {
clearInterval(timer)//停止转动
// $(".rollBlock").each(function () {
// $(".rollBlock").removeClass("shadow")
// })
// var num = 8 * Math.random();
// var randomNum = Math.floor(num)
// var chooseBlock = $(".rollBlock").toArray();
// var randomBlock = chooseBlock[randomNum];
// $(randomBlock).addClass("shadow")
$(".startBtn").on("click", rollFn)//结束后绑定click事件+功能函数
}
}
var timer = setInterval(roll, 10)//转动速度
}
$(".startBtn").click(rollFn)
$(".againBox").click(function () {
$(".rollBlock").each(function () {
$(".rollBlock").removeClass("shadow")
})
})
})
</script>
</body>
</html>
2021-03-11 jQuery实现九宫格抽奖
最新推荐文章于 2022-06-06 19:40:54 发布