js生成双色球号、大乐透号

最新推荐文章于 2023-02-08 20:02:18 发布

ghs1995

最新推荐文章于 2023-02-08 20:02:18 发布

阅读量357

点赞数

分类专栏： js 文章标签： js 随机数

本文链接：https://blog.csdn.net/qq_29352185/article/details/103080380

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .wrap {
        list-style: none;
        display: flex;
        align-items: center;
        font-size: 20px;
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .wrap li {
        margin: 0 20px;
        color: red
    }

    .wrap .next-num{
        color: blue;
    }
</style>

<body>
  <h3>双色球</h2>
  <span>前区:</span>
  <input min="1" type="number" value="6" id="s_pre">
  <span>后区:</span>
  <input min="1" type="number" value="1" id="s_next">
  <button id="s_btn">生成</button>
  <ul id="s_wrap" class="wrap">
  </ul>
  <h3>大乐透</h2>
  <span>前区:</span>
  <input min="1" type="number" value="5" id="d_pre">
  <span>后区:</span>
  <input min="1" type="number" value="2" id="d_next">
  <button id="d_btn">生成</button>
  <ul id="d_wrap" class="wrap">
  </ul>
  <script>
      window.onload = () => {
          // 双色球 前区：[1, 33]，后区：[1, 16]，一等奖： 6 + 1
          s_btn.addEventListener('click', () => {
            const preNum = Math.floor(s_pre.value || 6);
            const nextNum = Math.floor(s_next.value || 1);
            const s_preArr = getNumArr(1, 33, preNum);
            const s_nextArr = getNumArr(1, 16, nextNum);
            render(s_preArr, s_nextArr, 's_wrap');
          })
          // 大乐透 前区：[1, 35],后区：[1, 12], 一等奖： 5 + 2
          d_btn.addEventListener('click', () => {
            const preNum = Math.floor(d_pre.value || 5);
            const nextNum = Math.floor(d_next.value || 2);
            const d_preArr = getNumArr(1, 35, preNum);
            const d_nextArr = getNumArr(1, 12, nextNum);
            render(d_preArr, d_nextArr, 'd_wrap');
          })
          
          // 随机数 闭区间
          function random(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
          }
          // 不重复随机数数组
          function getNumArr(min = 1, max = 34, length = 6) {
              let arr = [];
              if ((max - min + 1) < length) {
                return arr;
              }
              while (arr.length < length) {
                  arr = Array.from({ length }, () => random(min, max))
                  arr = [...new Set(arr)]
              }
              return arr;
          }
          // 渲染
          function render(preArr, nextArr, id = 's_wrap') {
              const wrap = document.getElementById(id);
              wrap.innerHTML = preArr.map((item, dex) => {
                  return `<li>${item}</li>`
              }).join('') + 
              nextArr.map((item, dex) => {
                  return `<li class="next-num">${item}</li>`
              }).join('')
          }
      }
  </script>
</body>

</html>