JSdemo：点击抽奖，然后展示所有奖品，最后复原抽奖界面（简化版）

最新推荐文章于 2023-12-14 16:22:33 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2023-12-14 16:22:33 发布

阅读量299

点赞数

分类专栏：案例测试文章标签：事件委托数组管理颜色切换定时器 JavaScript

本文链接：https://blog.csdn.net/tuzi007a/article/details/116459869

版权

案例测试专栏收录该内容

12 篇文章 3 订阅

订阅专栏

做一个简单的demo，需求如下：

一个ul里有6个小li
点击其中任意一个li，让这个li变红色。
紧接着如果点击了其他小li中的任意一个，点击事件失效，即小li不变红色
1秒后，让所有的li都变红色
再过2秒后，让所有的li都复原成黑色

现在用的电脑上没有装插件，不能快速生成gif图。这次就不传了。

单纯看这个demo，其实没啥技术含量。

这里要介绍的，是一种学习方法和思路。

就是当我遇到一个问题时，不知道如何下笔敲代码，我会把具体的需求进行抽象和简化，然后单独写一个简单的demo进行测试。按照自己的思路把代码写下来，看自己的思路和方法是否符合项目的预期。如果符合，那么这个demo的代码进行优化，然后誊写到项目中。就形成了一个完成的思路。

就比如说这个项目，其实还是有点复杂的，只不过通过抽象和简化，把一个抽奖方案，简化成了一个小的demo。把项目写完后，再根据用户心理，进行反复测试，达到一种预期效果。

下面就简单说说思路和代码。

核心思路：

准备一个空数组arr，把所有li的类名放进去。如果这个数组里有变色的类名了，就不让其他li的点击事件生效了。
做完整个事情后，要清空arr里面的类名。方便下次操作
用递归，可以一直重复流程。

直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Demo</title>
	<style>
		#box {
			width: 200px;
			height: 200px;
			/* background: url('./images/demo.jpg') no-repeat 0 0; */
		}
		.changeColor {
			color: red;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>
	<script>
		(function handleChangeColor() {
			window.addEventListener('load', function() {
			let ul = document.getElementById('box').getElementsByTagName('ul')[0]
			let arr = []
			ul.addEventListener('mouseenter', function(e) {
				e.target.style.cursor = 'pointer'
			})
			// 事件委托
			ul.addEventListener('click', function(e) {
				console.log(arr);
				// 这里用了一个arr数组，
				// 目的是让当前的类名加入数组，
				// 再点击其他li的时候，进行判断，如果这个数组里有这个类名了
				// 就说明已经有个li变红色了，其他li点击就不去变色了。
				if(!arr.includes('changeColor')) {
					e.target.className = 'changeColor'
					arr.push(e.target.className);
					setTimeout(() => {
						for(let k of ul.children) {
							k.className = 'changeColor'
						}
					}, 1000)
					setTimeout(() => {
						for(let k of ul.children) {
							k.className = ''
						}
						// 完成任务后，要清空arr里的类名
						// 方便下次继续操作
						arr = []
					}, 3000)
					// 用了递归，可以无限重复操作
					handleChangeColor()
				}
			})
		})
		})()
		
	</script>
</body>
</html>