简易抽签程序(数字滚动 HTML + JavaScript)

最新推荐文章于 2025-07-19 15:44:44 发布

田益铭

最新推荐文章于 2025-07-19 15:44:44 发布

阅读量3.1w

点赞数 8

CC 4.0 BY-SA版权

分类专栏：程序设计文章标签： javascript html 抽签 js定时器

本文链接：https://blog.youkuaiyun.com/u012860063/article/details/48602039

程序设计专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了两种简易抽签系统的实现过程，包括代码解析、功能解释以及实际效果展示。通过实例展示了如何利用JavaScript创建动态、交互式的抽签功能，适用于各种场合如活动抽奖、小组分组等。

效果一截图

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312"    />
  <title>抽签系统</title>
  <style>
    .container {
      background-color: #ffff99;
      margin-top: 10px;
      margin-left: 300px;
      margin-right: 300px;
      width: auto;
      height: auto;
    }
  </style>
</head>
<body>
  <div class = "container">
    <input
      type="text"
      style="border:0px;text-align:center;font-size:60px;background-color:#ffff99;"
      id="txt">
    <br>
    <br>
    <font size="20">
      目前已经抽出<span id = "count"> 0 </span>个!
    </font>
    <br>
    <input
      type="button"
      style='font-size:30px'
      value="开始"
      onClick="timedCount();">  
    <input
      type="button"
      style='font-size:30px'
      value="停止"
      onClick="stopCount();Random();">  
    <input
      type="button"
      style='font-size:30px'
      value="清空"
      onclick="Clear();"/>
    <br>
    <br>
    <span id="display"></span>
    <br>
  </div>
  <script>
    var num = 0;
    var arr = [];
    var vis = [];
    var mark = [];
    var c = 0;
    var k = 0;
    var t;
    var tt;
    var cont = 0;

    while(true) {
      var tt = parseInt(Math.random() * 19 + 1);

      if(!mark[tt]) {
        mark[tt] = 1;
        vis[cont++] = tt;
      }

      if(cont === 19) {
        break;
      }
    }

    function timedCount() {
      document.getElementById('txt').value = c;
      k = k + 1;
      k = k % (vis.length);
      c = vis[k];
      t = setTimeout('timedCount()', 100);
    }

    function stopCount() {
      clearTimeout(t);
      tt = document.getElementById('txt').value;
    }

    function Random() {
      var draw = document.getElementById('display');

      num += 1;
      arr.push(tt);
      draw.innerHTML = draw.innerHTML + '<h1>第' + num + '组抽中：' + tt + '<br/></h1>';
      var tmp = [];
      var cnt = 0;

      tmp.length = 0;
      for (var i = 0, len = vis.length; i < len; i += 1) {
        if (vis[i] != tt) {
          tmp[cnt] = vis[i];
          cnt = cnt + 1;
        }
      }

      vis.length = 0;
      for(var i = 0; i < tmp.length; i += 1) {
        vis[i] = tmp[i];
      }

      document.getElementById('count').innerHTML = arr.length;
      if (arr.length === 19) {
        alert('已经抽完!');
      }
    }

    function Clear() {
      arr = null;
      arr = [];
      mark = [];
      var cont = 0;

      while(true) {
        var tt = parseInt(Math.random() * 19 + 1);

        if (!mark[tt]) {
          mark[tt] = 1;
          vis[cont++] = tt;
        }

        if(cont === 19) {
          break;
        }
      }
      k = 0;
      num = 0;
      c = 0;
      clearTimeout(t);
      document.getElementById('txt').value=  "0";
      document.getElementById("count").innerHTML = "0";
      document.getElementById("display").innerHTML = "";
    }
  </script>
</body>
</html>

效果二截图

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
  <title>简易抽签系统</title>
  <style>
    .container {
      background-color: #ffff99;
      margin-top: 10px;
      margin-left: 300px;
      margin-right: 300px;
      width: auto;
      height: auto;
    }
  </style>
</head>

<body>
  <div class="container">
    <input
      type="text"
      style="border:0px;text-align:center;font-size:60px;background-color:#ffff99;"
      id="txt">
    <br>
    <br>
    <font size="20">
      目前已经抽出<span id="count"> 0 </span>个!
    </font>
    <br>
    <input
      type="button"
      style="font-size:30px"
      value="开始"
      onClick="solve1();">  
    <input
      type="button"
      style='font-size:30px'
      value="停止"
      onClick="solve2()">  
    <input
      type="button"
      style='font-size:30px'
      value="清空"
      onClick="Clear();">
    <br>
    <br>
    <span id="display"></span>
    <br>
  </div>
  <script>
    var num = 0;
    var arr = [];
    var vis = [];
    var mark = [];
    var stringpro = "送元二使安西,江雪,过故人庄,石壕吏,三吏三别,逢雪宿芙蓉山主人"
    var pro = stringpro.split(',');
    var c = 0;
    var k = 0;
    var t;
    var tt;
    var flag = true;
    //for(var i = 0; i < 19; i++)
    //  vis[i] = i+1;

    var cont = 0;

    while(true) {
      var tt = parseInt(Math.random() * 6 + 1);

      if(!mark[tt]) {
        mark[tt] = 1;
        vis[cont++] = tt;
      }

      if(cont === 6) {
        break;
      }
    }

    function timedCount() {
      document.getElementById('txt').value = c;
      k = k + 1;
      k = k % (vis.length);
      c = vis[k];
      t = setTimeout("timedCount()",50)
    }

    function solve1() {
      if(flag) {
        timedCount();
        flag = false;
      }
    }

    function stopCount() {
      clearTimeout(t);
      tt = document.getElementById('txt').value;
    }

    function Random() {
      var draw = document.getElementById('display');

      num += 1;
      arr.push(tt);
      var tmp = tt;

      tmp -= 1;
      draw.innerHTML = draw.innerHTML + '<h1>第' + num + '组抽中：' + pro[tmp] + '<br/></h1>';
      var tmp = [];

      tmp.length = 0;
      var cnt = 0;

      for(var i = 0, len = vis.length; i < len; i += 1) {
        if(vis[i] != tt) {
          tmp[cnt] = vis[i];
          cnt = cnt+1;
        }
      }

      vis.length = 0;
      for(var i = 0, len = tmp.length; i < len; i += 1) {
        vis[i] = tmp[i];
      }

      document.getElementById("count").innerHTML = arr.length;
      if(arr.length === 6){
        alert('已经抽完!');
      }
    }

    function solve2() {
      if(!flag) {
        stopCount();
        Random();
        flag = true;
      }
    }

    function Clear() {
      arr = null;
      arr = [];

      mark = [];
      var cont = 0;

      while(true) {
        var tt = parseInt(Math.random() * 6 + 1);

        if(!mark[tt]) {
          mark[tt] = 1;
          vis[cont++] = tt;
        }

        if(cont === 6) {
          break;
        }
      }

      k = 0;
      num = 0;
      c = 0;
      clearTimeout(t);
      document.getElementById('txt').value = '0';
      document.getElementById('count').innerHTML = '0';
      document.getElementById('display').innerHTML = '';
    }
  </script>
</body>
</html>