前端随机抽奖效果

最新推荐文章于 2024-04-21 11:40:06 发布

来一颗砂糖橘

最新推荐文章于 2024-04-21 11:40:06 发布

阅读量1.7w

点赞数 2

分类专栏：前端，当然是炫酷的文章标签：前端 css javascript

本文链接：https://blog.csdn.net/weixin_42554330/article/details/130815287

版权

前端，当然是炫酷的专栏收录该内容

8 篇文章 1 订阅

订阅专栏

功能描述

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

效果截图

在这里插入图片描述

实现所用技术

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>