摇号抽奖HTML demo

最新推荐文章于 2025-06-29 17:39:16 发布

weixin_33827590

最新推荐文章于 2025-06-29 17:39:16 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签： php 前端 python ViewUI

原文链接：https://my.oschina.net/h2do/blog/268097

本文介绍了一个基于JavaScript实现的随机数生成与号码选择机制。该机制能够从预设数量的号码中随机抽取指定数量的号码，并通过浏览器界面展示整个抽取过程。文中详细解释了如何初始化号码数组、设置定时器生成随机数、以及如何处理被选中的号码。

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

为什么80%的码农都做不了架构师？>>>

<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=GBK">
<title>××××××××</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
///////////////////////////////////
/**可选号码总数，即需要操作次数*/
var _MAX_NUM = 20;
/**更新号码的时间间隔，越小越快*/
var _SPEED = 10;
///////////////////////////////////
 
/**存储未被选中的号码*/
var m_oriNumArr = new Array();
for(var i=1;i<=_MAX_NUM;i++){
    m_oriNumArr[i-1] = i;
}
/**存储已经产生的号码*/
var m_selNumArr = new Array();
/**每次开始选号的定时器编号*/
var m_timmerId = 0;
/**响应开始按钮*/
function startShow(){
    //当前操作序号加1，开始按钮不可再点击，把光标(焦点)移到停止按钮
    document.getElementById("seq").innerText = parseInt(document.getElementById("seq").innerText)+1;
    document.getElementById("btnStart").disabled = true;
    document.getElementById('btnEnd').focus();
    //启动定时获取随机数
    m_timmerId = window.setInterval(genRandomNum, _SPEED);
}
/**随机产生一个数组的索引，通过索引取得数组中的值并显示到页面的DIV中*/
function genRandomNum(){
    var temp = parseInt(Math.random() * m_oriNumArr.length);
    document.getElementById("divNum").innerText = m_oriNumArr[temp];
}
/**响应停止按钮*/
function endShow(){ 
    if(m_timmerId == 0)return;//未点击开始按钮时不响应
     
    //取消定时获取随机数
    window.clearInterval(m_timmerId);
    m_timmerId = 0;
     
    //取得页面显示DIV中的值，存入已选数组
    var selValue = parseInt(document.getElementById("divNum").innerText);
    m_selNumArr.push(selValue);
 
    //从原始数据中删除被选中的号码
    remove(selValue);
 
    //所有号码选完后开始按钮不再可用
    if(m_selNumArr.length != _MAX_NUM){
        document.getElementById("btnStart").disabled = false;
        document.getElementById('btnStart').focus();
    }else{//显示当前序号对应的号码
        var vHtml = "";
        for(var i=0;i<m_selNumArr.length;i++){
            vHtml += (i+1)+" : "+m_selNumArr[i]+"<br>";
        }
        document.getElementById('divData').innerHTML = vHtml;
    }
} 
/**删除被选中的号码*/
function remove(vData){
    if(m_oriNumArr.length == 0)return;//数组已经没有数据
    //查找到选中号码的索引
    var index = -1;
    for(var i=0;i<m_oriNumArr.length;i++){
        if(vData == m_oriNumArr[i]){
            index = i;
        }
    }
    if(-1 == index)return;//未找到不处理
 
    //将最后一个号码调到选中号码所在位置，然后删除最后一个
    m_oriNumArr[index] = m_oriNumArr[m_oriNumArr.length-1];
    m_oriNumArr.length -= 1;
}
//-->
</SCRIPT>
</head>
<body onload="document.getElementById('btnStart').focus();">
<div align="center" id="divNum" style="font-size:300px;color:red;">0</div>
<div align="center">
    第<span id="seq" style="font-size:30px;color:red;">0</span>个 <span id="seqName"></span> 
    <INPUT TYPE="button" id="btnStart" value="开 始" onclick="startShow();">  
    <INPUT TYPE="button" id="btnEnd"   value="停 止" onclick="endShow();">
</div>
<div id="divData"></div>
</body>
</html>

转载于:https://my.oschina.net/h2do/blog/268097