<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.con{
width: 200px;
margin: 100px auto;
padding: 10px 0;
color: white;
font-weight: bold;
font-family: "楷体";
text-align: center;
border: groove 4px gray;
background-color: red;
}
img{
height: 30px;
vertical-align: middle;
border-radius: 50%;
}
/*设置两个相邻元素,垂直居中对齐的方式由哪些??*/
.btns button{
margin-top: 12px;
padding: 4px;
font-size: 12px;
border: none;
outline: none;
background: palegreen;
cursor: pointer;
}
.hid{
display: none;
}
</style>
</head>
<body>
<div class="con">
<img src="./images/9.ico" alt="" class="pic">
<span class="name">王雷</span>
<div class="btns"><button id="start">开始抽奖</button><button id="stop" class="hid">结束抽奖</button></div>
</div>
<script src="./js/jquery-3.5.0.js"></script>
<script>
var arr = ["小名","小亮","小红","老王","老孙","老李"];
var picArr = ["./images/9.ico","./images/10.ico","./images/11.ico","./images/12.ico","./images/13.ico","./images/14.ico"];
//定义一个变量,用来接收计时器
var timer = null;
//点击开始抽奖 随机切换头像和姓名
$("#start").click(function(){
//出现结束抽奖按钮
$("#stop").removeClass("hid").siblings().addClass("hid");
timer = setInterval(function () {
//获取随机索引
var ranIdx = parseInt(Math.random() * arr.length);
//通过随机索引 获取这个随机索引对应的姓名 和 头像 并将其回显到页面对应的位置
$(".pic").prop("src",picArr[ranIdx]);
$(".name").html(arr[ranIdx]);
},100)
})
//点击结束抽奖 显示中奖人员
$("#stop").click(function () {
//出现开始抽奖按钮
$("#start").removeClass("hid").siblings().addClass("hid");
//清除计时器
clearInterval(timer);
})
</script>
</body>
</html>
jquery 实现抽奖小程序
最新推荐文章于 2022-10-28 13:23:24 发布