功能描述
开始随机、标签收取、重置布局、标签收取后添加标记、删除标记、复原标记、重置布局
可以通过此功能实现随机点名、抽奖功能
效果截图
实现所用技术
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 timer
var num = 0
var 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 = true
timer = 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 = false
stor = []
$('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 = false
clearInterval(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.offsetX
var 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>
