Pure JS Coding Challenge01 — 双色球彩票

功能说明：

双色球由33个红球和16个蓝球组成，一记双色球包括6个不重复的红球和1个蓝球。

请阅读给定的页面和代码，完成randomFn函数，实现3秒后随机抽奖的功能。要求如下：

函数返回：
1、以字符串的形式输出“随机一注”的开奖结果，选中的红蓝球用“|”隔开，红球在前，数字用逗号隔开，如为“06,10,13,18,23,27|05”。
2、红蓝球的输出编号不能重复，按升序排列。

页面交互：
1. 用 'class=”active” 高亮选中的红蓝球（页面上对应的 DOM 元素）。
2. 将选中的球从小到大排列，并移动到所属组的最前面。页面上球的顺序应该与函数返回结果的顺序相对应，如图所示。

结果显示：

原始代码：

您可以切换以下选项卡以查看相应的页面结构。

功能分析：

(1) 功能一：随机数

我们可以使用 Math.random() 函数。该函数返回一个大于或等于 0 且小于 1 的浮点伪随机数，在该范围内近似均匀分布，即 [0,1)。题中红球的范围是1-33的整数，蓝球的范围是1-16的整数，所以需要扩大范围。我们可以封装一个函数，传入范围的最小值和最大值，得到扩展值。

 函数 getRandom(min, max) { 常量值 = Math.random() * (max - min) + min 返回 Math.ceil(值) }

(2) 功能二：选中的球高亮显示，不能重复。

蓝球：只抽取一个，不存在重复问题。

红球：需要随机生成6个数字。由于选中的球不能重复，我们可以使用“set”来保存选中的球。

 让 redBalls = document.querySelectorAll('.red .balls-wp b') 让设置 = 新设置（） for (让 i = 1; set.size < 6; i++) { const num = getRandom(1, 33) redBalls[num - 1].classList.add('active') set.add(redBalls[num - 1])  
 }

(3) 功能三：将选中的球移动到当前组的前面，并按升序排列。

我们可以使用 insertBefore() 方法来实现 move 和 sort() 方法来对球进行排序。

由于 6 个红球不仅要从小到大排序，还要将选中的 6 个球放在其他球的前面，并且 '' parentNode.insertBefore(newNode, referenceNode) ''一次只能插入一个子节点，所以我们需要把6个球按降序排列（得到redRandomBalls数组），然后每次以第一个元素redBalls[0]为参考点，元素从 redRandomBalls 中取出并插入到组中。

 让 redRandomBalls = [...set].sort((x, y) => y.innerHTML - x.innerHTML) for (让 i = 0; i < 6; i++) { redParent.insertBefore(redRandomBalls[i], redBalls[0]) }

由于我们通过 document.querySelectorAll() 一开始，此方法收集一组静态节点。但是，每次我们在循环中插入元素时，红球组中的节点顺序都会发生变化。在节点之前，我们都必须获取集合中最新的第一个元素。

 让 redRandomBalls = [...set].sort((x, y) => y.innerHTML - x.innerHTML) for (让 i = 0; i < 6; i++) {  **redBalls = document.querySelectorAll('.red .balls-wp b')**  redParent.insertBefore(redRandomBalls[i], redBalls[0]) }

(4)函数4：函数返回结果

我们在红球中得到的redRandomBalls是一个降序排列的节点列表，但是我们的函数想要返回的只是球上的数字，所以我们需要通过“ 地图 ”，然后通过sort对数字进行升序排序，最后将得到的数组转换为“,”形式的字符串。

 const redRandom = redRandomBalls.map(item => item.innerHTML).sort((x, y) => x - y).join(',')

对于蓝球，我们还需要对结果进行处理，保证最终结果是两位数。

 蓝色随机 < 10 ? '0' + blueRandom : blueRandom

最终代码如下：

这是 链接 在 GitHub 上。希望这篇文章对你练习js有所帮助。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38918/24052410