jQuery隐藏中间4位随机手机号码抽奖代码

 2023-11-27    72  

     效果图:
1.gif

可以看见我们进行号码的随机筛选 并且将中间四位数进行了遮挡 一共设置了三个等级奖项 并且给每一个奖项设置了 固定的人数 当人数已经足够的时候 

在此点击按钮机会进行提示 人数已满 切换下一个奖项

html:

  <div class="box">
        <div class="center">
            150****0000
        </div>
        <button class="btn" onclick="start()">开始抽奖</button>
    </div>
    <select>
        <option value="3">三等奖</option>
        <option value="2">二等奖</option>
        <option value="1">一等奖</option>
    </select>

现在js中 将筛选的号码 写到数组里 以及每一个奖项对应的数字 和容纳抽选奖项的空数组 按钮切换开关 下标等参数

  // 抽选号码
  var data = [
    13020266595, 13062886092, 13120856800, 13166203899, 13222286768, 13260155466, 13311859605, 13321953155, 13386035991, 13386279355, 13391041349, 13402005209,
    13501955354, 13524377621, 13566884393, 13585583394, 13601652353, 13601750621, 13601957822, 13611717363, 13611808088, 13621842513, 13636608228, 13651744987,
    13671548893, 13671715448, 13671743121, 13671938567, 13701612351, 13770050005, 13774415457, 13774468122, 13795220723, 13816648396, 13817074750, 13817603172,
    13817864803, 13818156777, 13818478999, 13818608945, 13818676915, 13818708665, 13870620815, 13901647848, 13901757122, 13901765884, 13916054638, 13916130704,
    13916230340, 13916320794, 13917046040, 13917082161, 13917376187, 13917519790, 13917822024, 13918015694, 15000239160, 15000858139, 15000863267, 15001966112,
    15021654427, 15026688058, 15162775605, 15201931885, 15262790618, 15366970333, 15692116261, 15800762285, 15801777839, 15836932000, 15900711818, 15901868745,
    15921081152, 15921913369, 17721460897, 18017628227, 18202119713, 18502746988, 18516214869, 18521502523, 18521531099, 18606387979, 18616988816, 18621373309,
    18621607551, 18621768758, 18621831973, 18621939488, 18817373997, 18817619376, 18818010115, 18857881532, 18901731168, 18910877917, 18916172890, 18918588802,
    18930362020, 18939786089, 15001963100, 15001963101, 15001963102, 15001963103, 15001963104, 15001963105, 15001963106, 15001963107, 15001963108, 15001963109,
    15001963110, 15001963111, 15001963112, 15001963113, 15001963114, 15001963115, 15001963116, 15001963117, 15001963118, 15001963119, 15001963120, 15001963121,
    15001963122, 15001963123, 15001963124, 15001963125, 15001963126, 15001963127, 15001963128, 15001963129, 15001963130, 15001963131, 15001963132, 15001963133,
    15001963134, 15001963135, 15001963136, 15001963137, 15001963138, 15001963139, 15001963140, 15001963141, 15001963142, 15001963143, 15001963144, 15001963145,
    15001963146, 15001963147, 15001963148, 15001963149, 15001963150, 15001963151, 15001963152, 15001963153, 15001963154, 15001963155, 15001963156, 15001963157,
    15001963158, 15001963159, 15001963160, 15001963161, 15001963162, 15001963163, 15001963164, 15001963165, 15001963166, 15001963167, 15001963168, 15001963169,
    15001963170, 15001963171, 15001963172, 15001963173, 15001963174, 15001963175, 15001963176, 15001963177, 15001963178, 15001963179, 15001963180, 15001963181,
    15001963182, 15001963183, 15001963184, 15001963185, 15001963186, 15001963187, 15001963188, 15001963189, 15001963190, 15001963191, 15001963192, 15001963193,
    15001963194, 15001963195, 15001963196, 15001963197, 15001963198, 15001963199, 15001963200, 15001963201, 15001963202, 15001963203, 15001963204, 15001963205,
    15001963206, 15001963207, 15001963208, 15001963209, 15001963210, 15001963211, 15001963212, 15001963213, 15001963214, 15001963215, 15001963216, 15001963217,
    15001963218, 15001963219, 15001963220, 15001963221, 15001963222, 15001963223, 15001963224, 15001963225, 15001963226, 15001963227, 15001963228, 15001963229,
    15001963230, 15001963231, 15001963232, 15001963233, 15001963234, 15001963235, 15001963236, 15001963237, 15001963238, 15001963239, 15001963240, 15001963241,
    15001963242, 15001963243, 15001963244, 15001963245, 15001963246, 15001963247, 15001963248, 15001963249, 15001963250, 15001963251, 15001963252, 15001963253,
    15001963254, 15001963255, 15001963256, 15001963257, 15001963258, 15001963259, 15001963260, 15001963261, 15001963262, 15001963263, 15001963264, 15001963265,
    15001963266, 15001963267, 15001963268, 15001963269, 15001963270, 15001963271, 15001963272, 15001963273, 15001963274, 15001963275, 15001963276, 15001963277,
    15001963278, 15001963279, 15001963280, 15001963281, 15001963282, 15001963283, 15001963284, 15001963285, 15001963286, 15001963287, 15001963288, 15001963289,
    15001963290, 15001963291, 15001963292, 15001963293,
  ];
  // 对应抽奖次数
  var p1Num = 3;
  var p2Num = 5;
  var p3Num = 10;
  // 对应中奖名单
  var p1Winner = new Array();
  var p2Winner = new Array();
  var p3Winner = new Array();
  var btn = true; //按钮状态未开始还是结束
  var key = 0; //中奖下标
  var time; //定时器

先封装一个函数 runTime 每次点击进行筛选的时候 先清除掉对应的定时器 然后再设置一个定时器对trunNum函数进行间隔10ms调动一次

image.png

trunNum函数内部 每次调动时 先将key进行一次随机筛选  然后将对应筛选的key以下标的形式 将data对应的数据拿出来 将电话号码中间四位进行更改 并返回到视图层中

image.png

每次点击按钮的时候 先判断btn是否为true 当为true 的的时候 进入内部进行判断 三个奖项设置的抽奖次数 是否以及用完  如果都以及消耗完 则按钮进行隐藏 并进行提示

如果未用完则会一次进行对比查看 当前select的val值对应的奖项是否以及用完 用完则提示 当前奖项抽取完毕

image.png

如果以上条件都不符合则将变量btn设置为false 并且进行样式和文本的改变 调动startTrun函数

image.png

该函数会将定时器进行调动 重新筛选

image.png

当btn为false时 则将btn重新设置为true 并且会将类end移除 start添加 和文本设置为开始抽奖 调动endTun函数

image.png

endTrun函数会先将定时器清除 然后进行if判断 当前select的val值 给对应抽取到的号码先添加到用于记录中奖号码的数组中 然后从筛选号码数组中删除

image.png

完整代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery隐藏中间4位随机手机号码抽奖代码</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      body {
        background: rgb(166, 34, 34);
      }

      .box {
        width: 400px;
        height: 200px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      .center {
        width: 400px;
        height: 60px;
        background: #fff;
        color: #000;
        font-size: 35px;
        line-height: 60px;
        margin-bottom: 30px;
      }

      .btn {
        width: 120px;
        height: 40px;
        cursor: pointer;
        background: #0099cc;
        color: #fff;
        font-size: 16px;
        border: none;
      }

      select {
        outline: none;
      }

      .start {
        background-color: #428bca;
      }

      .end {
        background-color: #d9534f;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="center">150****0000</div>
      <button class="btn" onclick="start()">开始抽奖</button>
    </div>
    <select>
      <option value="3">三等奖</option>
      <option value="2">二等奖</option>
      <option value="1">一等奖</option>
    </select>
  </body>
</html>
<script src="./js/jquery.js"></script>
<script>
  // 抽选号码
  var data = [
    13020266595, 13062886092, 13120856800, 13166203899, 13222286768, 13260155466, 13311859605, 13321953155, 13386035991, 13386279355, 13391041349, 13402005209,
    13501955354, 13524377621, 13566884393, 13585583394, 13601652353, 13601750621, 13601957822, 13611717363, 13611808088, 13621842513, 13636608228, 13651744987,
    13671548893, 13671715448, 13671743121, 13671938567, 13701612351, 13770050005, 13774415457, 13774468122, 13795220723, 13816648396, 13817074750, 13817603172,
    13817864803, 13818156777, 13818478999, 13818608945, 13818676915, 13818708665, 13870620815, 13901647848, 13901757122, 13901765884, 13916054638, 13916130704,
    13916230340, 13916320794, 13917046040, 13917082161, 13917376187, 13917519790, 13917822024, 13918015694, 15000239160, 15000858139, 15000863267, 15001966112,
    15021654427, 15026688058, 15162775605, 15201931885, 15262790618, 15366970333, 15692116261, 15800762285, 15801777839, 15836932000, 15900711818, 15901868745,
    15921081152, 15921913369, 17721460897, 18017628227, 18202119713, 18502746988, 18516214869, 18521502523, 18521531099, 18606387979, 18616988816, 18621373309,
    18621607551, 18621768758, 18621831973, 18621939488, 18817373997, 18817619376, 18818010115, 18857881532, 18901731168, 18910877917, 18916172890, 18918588802,
    18930362020, 18939786089, 15001963100, 15001963101, 15001963102, 15001963103, 15001963104, 15001963105, 15001963106, 15001963107, 15001963108, 15001963109,
    15001963110, 15001963111, 15001963112, 15001963113, 15001963114, 15001963115, 15001963116, 15001963117, 15001963118, 15001963119, 15001963120, 15001963121,
    15001963122, 15001963123, 15001963124, 15001963125, 15001963126, 15001963127, 15001963128, 15001963129, 15001963130, 15001963131, 15001963132, 15001963133,
    15001963134, 15001963135, 15001963136, 15001963137, 15001963138, 15001963139, 15001963140, 15001963141, 15001963142, 15001963143, 15001963144, 15001963145,
    15001963146, 15001963147, 15001963148, 15001963149, 15001963150, 15001963151, 15001963152, 15001963153, 15001963154, 15001963155, 15001963156, 15001963157,
    15001963158, 15001963159, 15001963160, 15001963161, 15001963162, 15001963163, 15001963164, 15001963165, 15001963166, 15001963167, 15001963168, 15001963169,
    15001963170, 15001963171, 15001963172, 15001963173, 15001963174, 15001963175, 15001963176, 15001963177, 15001963178, 15001963179, 15001963180, 15001963181,
    15001963182, 15001963183, 15001963184, 15001963185, 15001963186, 15001963187, 15001963188, 15001963189, 15001963190, 15001963191, 15001963192, 15001963193,
    15001963194, 15001963195, 15001963196, 15001963197, 15001963198, 15001963199, 15001963200, 15001963201, 15001963202, 15001963203, 15001963204, 15001963205,
    15001963206, 15001963207, 15001963208, 15001963209, 15001963210, 15001963211, 15001963212, 15001963213, 15001963214, 15001963215, 15001963216, 15001963217,
    15001963218, 15001963219, 15001963220, 15001963221, 15001963222, 15001963223, 15001963224, 15001963225, 15001963226, 15001963227, 15001963228, 15001963229,
    15001963230, 15001963231, 15001963232, 15001963233, 15001963234, 15001963235, 15001963236, 15001963237, 15001963238, 15001963239, 15001963240, 15001963241,
    15001963242, 15001963243, 15001963244, 15001963245, 15001963246, 15001963247, 15001963248, 15001963249, 15001963250, 15001963251, 15001963252, 15001963253,
    15001963254, 15001963255, 15001963256, 15001963257, 15001963258, 15001963259, 15001963260, 15001963261, 15001963262, 15001963263, 15001963264, 15001963265,
    15001963266, 15001963267, 15001963268, 15001963269, 15001963270, 15001963271, 15001963272, 15001963273, 15001963274, 15001963275, 15001963276, 15001963277,
    15001963278, 15001963279, 15001963280, 15001963281, 15001963282, 15001963283, 15001963284, 15001963285, 15001963286, 15001963287, 15001963288, 15001963289,
    15001963290, 15001963291, 15001963292, 15001963293,
  ];
  // 对应抽奖次数
  var p1Num = 3;
  var p2Num = 5;
  var p3Num = 10;
  // 对应中奖名单
  var p1Winner = new Array();
  var p2Winner = new Array();
  var p3Winner = new Array();
  var btn = true; //按钮状态未开始还是结束
  var key = 0; //中奖下标
  var time; //定时器
  // 随机筛选定时器
  function runTime() {
    clearInterval(time);
    time = setInterval("trunNum()", 10);
  }
  function start() {
    if (btn) {
      if (p1Winner.length >= p1Num && p2Winner.length >= p2Num && p3Winner.length >= p3Num) {
        $(".btn").hide();
        alert("所有抽奖已结束!!!");
      } else if ($("select").val() == 3 && p3Winner.length >= p3Num) {
        alert("三等奖已抽取完毕,请选择其他奖项……");
      } else if ($("select").val() == 2 && p2Winner.length >= p2Num) {
        alert("二等奖已抽取完毕,请选择其他奖项……");
      } else if ($("select").val() == 1 && p1Winner.length >= p1Num) {
        alert("一等奖已抽取完毕,请选择其他奖项……");
      } else {
        btn = false;
        $(".btn").removeClass("start").addClass("end").text("结束抽奖");
        startTrun();
      }
    } else {
      btn = true;
      $(".btn").removeClass("end").addClass("start").text("开始抽奖");
      endTrun();
    }
  }
  // 定时器内执行函数
  function trunNum() {
    key = Math.floor(Math.random() * (data.length - 1));
    var tel = data[key].toString().substr(0, 3) + "****" + data[key].toString().substr(7);
    $(".center").text(tel);
  }
  // 调动定时器
  function startTrun() {
    runTime();
  }

  // 停止定时器处理数据
  function endTrun() {
    clearInterval(time);
    if ($("select").val() == 3) {
      p3Winner.push(data[key]);
      data.splice(key, 1);
    } else if ($("select").val() == 2) {
      p2Winner.push(data[key]);
      data.splice(key, 1);
    } else {
      p1Winner.push(data[key]);
      data.splice(key, 1);
    }
  }
</script>


  •  标签:  

原文链接:http://1.15.94.33/?id=230

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台,请勿相信其他任何渠道。