jQUery实现简单的抽奖小游戏

最新推荐文章于 2022-05-04 00:00:00 发布

海棠依旧_NZ18

最新推荐文章于 2022-05-04 00:00:00 发布

阅读量190

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/karrymylove/article/details/109546385

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			ul{
				width: 640px;
				margin: 40px auto;
			}
			li{
				width: 200px;
				height: 200px;
				text-align: center;
				line-height: 200px;
				border: 1px dotted #000000;
				float: left;
				margin: 3px;
				list-style: none;
				font-size: 30px;
				color: transparent;
			}
			li:nth-of-type(5){
				background-color:darkseagreen;
				color: #808080;
				font-family: "叶根友毛笔行书2.0版";

			}
			h1{
				font-family: "叶根友毛笔行书2.0版";
			}
			.active{
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
	
		<ul>
			<li>条纹</li>
			<li>柠檬黄</li>
			<li>银灰</li>
			<li>灰色</li>
			<li>挑选大褂</li>
			<li>粉色</li>
			<li>橘色</li>
			<li>烫金</li>
			<li>绿色</li>
			<h1 id=""></h1>
		</ul>
	</body>
</html>
<script src="0jQuery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let timer=0;
	let index=0;
	//这里是保证在计时器循环的时候，让选中框顺时针旋转
	let arr=[0,1,2,5,8,7,6,3]
	$("li").eq(4).click(function(){
		clearInterval(timer);
		let step=25+(Math.floor(Math.random()*20))
		timer=setInterval(function(){
			$("li").addClass("active").eq(arr[index]).siblings().removeClass("active");
			$("li").eq(arr[index]).css({
				background: "url(img/"+arr[index]+".jpg)",
				backgroundSize:200,
			}).siblings().css({
				background: "none"
			})
			index++;
			step--;
			if(step==3){
				clearInterval(timer);
				let text=$(".active").text();
				$("h1").text("二奶奶，今天你给二爷挑的是"+text+"大褂");
			}
			if(index==arr.length){
				index=0;
			}
		},200)
	})
</script>
![这是界面开始运行](https://img-blog.csdnimg.cn/20201107141845961.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thcnJ5bXlsb3Zl,size_16,color_FFFFFF,t_70#pic_center)
![运行结束抽中这个](https://img-blog.csdnimg.cn/20201107141955929.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thcnJ5bXlsb3Zl,size_16,color_FFFFFF,t_70#pic_center)

海棠依旧_NZ18

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQUery实现简单的抽奖小游戏

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } ul{ width: 640px; margin: 40px au
复制链接

扫一扫