<!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>
