练习牛客网笔试题--前端js--60-双色球机选一注

本文链接：https://blog.youkuaiyun.com/Lsvmmer/article/details/118547676

该博客介绍了如何使用原生JavaScript实现双色球彩票的随机号码生成，并结合页面交互高亮显示选中的红球和蓝球。代码示例包括随机数生成、数组操作以及DOM元素的操作，确保每次生成的号码不重复并按顺序排列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 描述

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

// 请阅读给出的页面和代码，完成 randomFn 函数，实现“随机一注”功能，要求如下：

// 函数返回：

// 1.以字符串形式输出“随机一注”结果，选中的红蓝球用"|"隔开，红球在前，号码间用半角逗号隔开，如"06,10,13,18,23,27|05"

// 2.红球和蓝球号码排列顺序需与页面展示的顺序对应

// 页面交互：

// 1.将选中的红球和蓝球（页面中对应DOM元素）用class="active"高亮

// 2.将选中的球按号码从小到大排列，移至所属组的前方，结果如示意图所示

// 3.每次执行 randomFn 函数，输出符合要求且不完全重复

// 注意：

// 1、请使用原生JavaScript操作DOM元素，不要增加、删除DOM元素或修改css

// 2、请使用ES5语法

// 3、答题时不要使用第三方插件

// 4、运行浏览器为chrome浏览器

// 5、可能涉及的点

// element.className

// element.classList

// element.classList.add

// element.classList.remove

// element.getAttribute

// element.setAttribute

// element.innerHTML

// element.insertBefore

// element.parentNode

// document.querySelector

// document.querySelectorAll

// document.getElementsByTagName

// document.getElementsByClassName

// Array.sort

// Array.push

// Array.join

// Array.indexOf

// Array.forEach

// Array.map

// Math.random

// Math.floor

// Number.toString()

1.自己的练习

<style>
    .main .balls {
      width: 450px;
      padding: 30px 10px 10px;
      margin-bottom: 20px;
      position: relative;
      border-radius: 4px;
    }

    .main .balls:after {
      content: '\20';
      clear: both;
      display: block;
      height: 0;
      overflow: hidden;
    }

    .main .balls span {
      position: absolute;
      left: 12px;
      top: 5px;
      font-size: 13px;
    }

    .main b {
      float: left;
      width: 30px;
      height: 30px;
      font-size: 15px;
      background: #FFF;
      border: 1px solid;
      border-radius: 50%;
      line-height: 30px;
      text-align: center;
      margin-right: 8px;
      margin-bottom: 8px;
      cursor: pointer;
    }

    .main .red .active {
      background: #f56c6c;
      color: #FFF;
    }

    .main .blue .active {
      background: #3a8ee6;
      color: #FFF;
    }

    .main .red {
      background: #feeff0;
    }

    .main .red b {
      border-color: #f56c6c;
    }

    .main .blue {
      background: #ecf8ff;
    }

    .main .blue b {
      border-color: #3a8ee6;
    }
  </style>

  <div class="main">
    <div class="balls red">
      <span>红球</span>
      <div class="balls-wp">
        <b>01</b>
        <b>02</b>
        <b>03</b>
        <b>04</b>
        <b>05</b>
        <b>06</b>
        <b>07</b>
        <b>08</b>
        <b>09</b>
        <b>10</b>
        <b>11</b>
        <b>12</b>
        <b>13</b>
        <b>14</b>
        <b>15</b>
        <b>16</b>
        <b>17</b>
        <b>18</b>
        <b>19</b>
        <b>20</b>
        <b>21</b>
        <b>22</b>
        <b>23</b>
        <b>24</b>
        <b>25</b>
        <b>26</b>
        <b>27</b>
        <b>28</b>
        <b>29</b>
        <b>30</b>
        <b>31</b>
        <b>32</b>
        <b>33</b>
      </div>
    </div>
    <div class="balls blue">
      <span>蓝球</span>
      <div class="balls-wp">
        <b>01</b>
        <b>02</b>
        <b>03</b>
        <b>04</b>
        <b>05</b>
        <b>06</b>
        <b>07</b>
        <b>08</b>
        <b>09</b>
        <b>10</b>
        <b>11</b>
        <b>12</b>
        <b>13</b>
        <b>14</b>
        <b>15</b>
        <b>16</b>
      </div>
    </div>
  </div>

    // ES5
    function randomFn() {
      // 1. 获得双色球号码
      var red = []
      var blue = []
      blue.push(Math.floor(Math.random() * (16 - 1 + 1)) + 1)
      for (var i = 1; i <= 6; i++) {
        var redNum = Math.floor(Math.random() * (33 - 1 + 1)) + 1
        if (red.indexOf(redNum) === -1) {
          red.push(redNum)
        } else {
          i--
        }
      }
      red.sort((a, b) => b - a)
      // 2. 页面交互
      var redBall = document.querySelector('.red .balls-wp')
      var blueBall = document.querySelector('.blue .balls-wp')
      html(red, redBall)
      html(blue, blueBall)
      // 3. 返回值
      return padTwo(red[5]) + ',' + padTwo(red[4]) + ',' + padTwo(red[3]) + ',' + padTwo(red[2]) + ',' + padTwo(red[1]) + ',' + padTwo(red[0]) + '|' + padTwo(blue)
    }

    // 补零
    function padTwo(dd) {
      return dd = dd < 10 ? '0' + dd : dd
    }

    // 节点操作
    function html(arr, nodeBall) {
      // 删除节点
      arr.forEach((item, i) => {
        nodeBall.removeChild(nodeBall.children[item - 1])
      })
      arr.forEach((item, i) => {
        // 添加节点
        var newNode = document.createElement('b')
        newNode.innerHTML = padTwo(item)
        newNode.className = 'active'
        nodeBall.insertBefore(newNode,nodeBall.children[0])
      })
    }

    // 使用了ES6语法，本地可编译，牛客上发生段错误
    function randomFn1() {
      // 1. 获得双色球的随机号码
      var red = []
      var blue = Math.floor(Math.random() * (16 - 1 + 1)) + 1
      for (var i = 0; i < 6; i++) {
        var redNum = Math.floor(Math.random() * (33 - 1 + 1)) + 1
        if (red.includes(redNum)) {
          i--
        } else {
          red.push(redNum)
        }
      }
      red.sort((a, b) => a - b)
      // 2. 页面交互
      var redBalls = document.querySelector('.red').querySelector('.balls-wp').children
      var blueBalls = document.querySelector('.blue').querySelector('.balls-wp').children
      // 定义数组
      var redball = red
      var blueball = [blue]
      for (i = 1; i <= 33; i++) {
        if (!red.includes(i)) {
          redball.push(i)
        }
      }
      for (i = 1; i <= 16; i++) {
        if (blue !== i) {
          blueball.push(i)
        }
      }
      // 重渲染页面
      redball.forEach((item, i) => {
        if (i < 6) {
          redBalls[i].className = 'active'
        }
        redBalls[i].innerText = (item + '').padStart(2, '0')
      })
      blueball.forEach((item, i) => {
        blueBalls[i].innerText = (item + '').padStart(2, '0')
        blueBalls[0].className = 'active'
      })
      // 返回值
      return `${(red[0] + '').padStart(2, '0')},${(red[1] + '').padStart(2, '0')},${(red[2] + '').padStart(2, '0')},${(red[3] + '').padStart(2, '0')},${(red[4] + '').padStart(2, '0')},${(red[5] + '').padStart(2, '0')}|${(blue + '').padStart(2, '0')}`
    }

2.题解

   function randomFn() {
      let red = document.querySelector('.red .balls-wp');
      let hongqiu = red.getElementsByTagName('b');
      let blue = document.querySelector('.blue .balls-wp');
      let lanqiu = blue.getElementsByTagName('b');
      let a = selectboll(red, hongqiu, 6, 33);
      let b = selectboll(blue, lanqiu, 1, 16);
      return a + '|' + b
    }

    function selectboll(zong, qiu, sel, alllength) {
      let boll = [];
      for (let i = 0; i < sel; i++) {
        let index = Math.floor(Math.random() * (alllength - i));
        boll.push({
          node: qiu[index],
          value: qiu[index].innerHTML
        })
        zong.removeChild(qiu[index])
      }
      boll.sort((a, b) => {
        return a.value - b.value
      }).map((item) => {
        item.node.classList.add('active')
      })
      for (let i = sel - 1; i >= 0; i--) {
        zong.insertBefore(boll[i].node, zong.firstChild)
      }
      return boll.map(item => {
        return item.value
      }).join(',')
    }