前端随机抽奖效果

功能描述

开始随机、标签收取、重置布局、标签收取后添加标记、删除标记、复原标记、重置布局
可以通过此功能实现随机点名、抽奖功能

效果截图

在这里插入图片描述

实现所用技术

vscode编写工具，html、css、jquery

以下为效果代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><style type="">*{margin:0;padding:0;}#btn-group{text-align: center;width: 1000px;padding: 20px;}#btn-group p{padding: 4px 20px;font-size: 16px;display: inline-block;margin-right: 20px;color: #fff;border: 1px solid #7190c7;background: #7190c7;transition: 0.3s;cursor: pointer;}#btn-group p:hover{color: #fff;background: #eaa6a3;border-color: transparent;}ul{width:1000px;margin:0 0 0 20px;padding: 10px 20px 30px;border: 2px solid #f1ccb8;display: flex;flex-wrap: wrap;justify-content: space-between;background: #ffd;}ul li{list-style: none;width: 100px;height: 40px;font-size: 23px;text-align: center;line-height: 40px;color: #f1f1f1;background: #3499ad;margin: 10px;box-sizing: border-box;position: relative;transition: 0.3s;}li:hover{border-radius: 0;/* background: #8094ff; */box-shadow: 0 0 13px 2px white inset;}.span1,.span2{display:inline-block;width:30px;height:20px;margin:0 3px;background:#2BF371;border-radius:20px 0 20px 0;box-shadow: 0 0 8px 1px #04ff00;transform: rotate(-20deg);}u.mark{color: red;border: 1px solid red;transform: rotate(-36deg);font-size: 12px;position: absolute;padding: 4px 6px;line-height: 12px;text-shadow: 0 0 0 transparent;}u.mark.new{color:#fff;border-color:#fff;left:-3px;background:#000;}/* 收取标签后-标签放大效果 */.active-max{width:980px;height:400px;font-size:100px;line-height:200px;transition:0.4s;text-shadow: 0 0 18px #f6ff67;cursor: pointer;}</style>
</head>
<body><div id="btn-group"><p id="startBtn">开始抽取标签</p><p id="getNumBtn">收取标签</p><p id="removeMark">删除标记</p><p id="goMark">还原标记</p><p id="resetBtn">重置布局</p></div><!-- 点名列表 --><ul></ul>
</body>
<script>// 标签选中色const activeColor = '#ff4040'// 移除收取标签后的叶子图案function removeLeaf(){$('.span1,.span2').remove()/*删除小叶子*/}// 生成点名列表var liList = Array(40).fill(null)liList.map((item, index)=>{$(`<li>${index+1}</li>`).appendTo('ul')})var arr = $('li')var timervar num = 0var isStart = false//防止开始、结束按钮连点var stor = []//存放标记的存储器$('#startBtn').on('click',function(){$('li').off('click')$('u').css({top:5,left:0})removeLeaf()arr.eq(num).removeClass('active-max').siblings().css({display:'block'})/*被收取的标签恢复原样*/if(!isStart){isStart = truetimer = setInterval(function(){num = parseInt(Math.random()*arr.length)arr.eq(num).css('background', activeColor).siblings('li').css('background','#3499ad')},100)}})$('#resetBtn').on('click',function(){isStart = falsestor = []$('u').remove()$('li').off('click')$('u').css({top:5,left:0})clearInterval(timer)removeLeaf()arr.eq(num).removeClass('active-max').siblings().css({display:'block'})/*抽取的元素恢复原样*/arr.eq(num).css('background','#3499ad')})$('#getNumBtn').on('click',function(){if(isStart){isStart = falseclearInterval(timer)// 给抽取的标签插入小样式arr.eq(num).addClass('active-max').css('background','#c28164').prepend('<span class="span1"></span>').append('<span class="span2"></span>').siblings().css({display:'none'})// 收取的数字点击可以添加标记效果arr.eq(num).click(function(e){var x=e.offsetXvar y=e.offsetY$(this).children('u').remove()$(this).append('<u class="mark">标记</u>').children('u').css({top:y,left:x})stor.push($(this).index())})}})$('#removeMark').click(function(){$('u').remove()})$('#goMark').click(function(){$.each(stor,function(index,item){$('li').eq(item).children('u').remove().end().append('<u class="mark new">标记</u>')})})
</script>
</html>