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

本文主要是介绍JSdemo：点击抽奖，然后展示所有奖品，最后复原抽奖界面（简化版），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

做一个简单的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>