html 抽奖代码

最新推荐文章于 2021-05-31 12:41:27 发布
最新推荐文章于 2021-05-31 12:41:27 发布
阅读量1.8k 收藏 6
点赞数 2
文章标签： 前端 xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/CyLee/p/5828160.html
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>抽奖</title>
    <meta http-equiv="Content-Type" content="text/html;
charset=gb2312">
    <script language="javascript">
    <!--
    // global variables
    var timer;
    var flag = new Array(100);
    var existingnum = new Array(100);
    var clickTimes = 0;
    var randnum;
    var cellnum = 1;
    var mobile = new Array();
    // set data here!!
    mobile[0] = 13020000100;
    mobile[1] = 13020000101;
    mobile[2] = 13020000102;
    mobile[3] = 13020000103;
    mobile[4] = 13020000104;
    mobile[5] = 13020000105;
    mobile[6] = 13020000106;
    mobile[7] = 13020000107;
    mobile[8] = 13020000108;
    mobile[9] = 13020000109;
    mobile[10] = 13020000110;
    mobile[11] = 13020000111;
    mobile[12] = 13020000112;
    mobile[13] = 13020000113;
    mobile[14] = 13020000114;
    mobile[15] = 13020000115;
    mobile[16] = 13020000116;
    mobile[17] = 13020000117;
    mobile[18] = 13020000118;
    mobile[19] = 13020000119;
    mobile[20] = 13020000120;
    mobile[21] = 13020000121;
    mobile[22] = 13020000122;
    mobile[23] = 13020000123;
    mobile[24] = 13020000124;
    mobile[25] = 13020000125;
    mobile[26] = 13020000126;
    mobile[27] = 13020000127;
    mobile[28] = 13020000128;
    mobile[29] = 13020000129;
    mobile[30] = 13020000130;
    mobile[31] = 13020000131;
    mobile[32] = 13020000132;
    mobile[33] = 13020000133;
    mobile[34] = 13020000134;
    mobile[35] = 13020000135;
    mobile[36] = 13020000136;
    mobile[37] = 13020000137;
    mobile[38] = 13020000138;
    mobile[39] = 13020000139;
    mobile[40] = 13020000140;
    mobile[41] = 13020000141;
    mobile[42] = 13020000142;
    mobile[43] = 13020000143;
    mobile[44] = 13020000144;
    mobile[45] = 13020000145;
    mobile[46] = 13020020146;
    var num = mobile.length - 1;

    function getRandNum() {
        num = parseInt(num);
        var y = GetRnd(0, num);
        document.getElementById("result").value = mobile[y];
    }

    function start() {
        clearInterval(timer);
        timer = setInterval('change()', 50);
    }

    function ok() {
        clearInterval(timer);
    }

    function GetRnd(m, n) {
        randnum = parseInt(Math.random() * (n - m + 1));
        return randnum;
    }

    function setTimer() {
        time = setInterval("getRandNum()", 10);
        document.getElementById("start").disabled = true;
        document.getElementById("end").disabled = false;
    }

    function clearTimer() {
        noDupNum();
        clearInterval(time);
        document.getElementById("start").disabled = false;
        document.getElementById("end").disabled = true;
        setValues();
    }

    function noDupNum() {
        // to remove the selected mobile phone number
        mobile.removeEleAt(randnum);
        // to reorganize the mobile number array!!
        var o = 0;
        for (p = 0; p < mobile.length; p++) {
            if (typeof mobile[p] != "undefined") {
                mobile[o] = mobile[p];
                o++;
            }
        }
        num = mobile.length - 1;
    }
    // method to remove the element in the array
    Array.prototype.removeEleAt = function(dx) {
            if (isNaN(dx) || dx > this.length) {
                return false;
            }
            this.splice(dx, 1);
        }
        // set mobile phone numbers to the table cell
    function setValues() {
        document.getElementById(cellnum).value =
            document.getElementById("result").value;
        cellnum++;
    }
    //-->
    </script>
</head>

<body>
    <center>
        <div> </div>
        <div id="main">
            <div>
                <h1>Öн±ºÅÂë</h1>
                <p>
                    <input id="result" type="text" size="30" style="height:130px;width:800px;border:2px solid
red;font-size:120;" readonly/>
                </p>
                <p>
                    <input id="start" type="button" value="¿ªÊ¼" style="border: 1px solid; border-color: #aaa 000
#000 #aaa;width:4em; background: #fc0;" onclick="setTimer()" />
                    <input id="end" type="button" value="Í£" style="border: 1px solid; border-color: #aaa 000
#000 #aaa;width:4em; background:
#fc0;" onclick="clearTimer()" disabled/>
                </p>
                <p><strong>Ò»µÈ½±£¨10Ãû£©</strong></p>
                <table width="946" height="79" border="1">
                    <tr>
                        <td>
                            <input name="text36" type="text" id="36" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="28" readonly/>
                        </td>
                        <td>
                            <input name="text37" type="text" id="37" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text38" type="text" id="38" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text39" type="text" id="39" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text40" type="text" id="40" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="text41" type="text" id="41" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="28" readonly/>
                        </td>
                        <td>
                            <input name="text42" type="text" id="42" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text43" type="text" id="43" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text44" type="text" id="44" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text45" type="text" id="45" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                    </tr>
                </table>
                <p>¶þµÈ½±£¨15Ãû£©</p>
                <table width="951" height="88" border="1">
                    <tr>
                        <td>
                            <input name="text21" type="text" id="21" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="28" readonly/>
                        </td>
                        <td>
                            <input name="text22" type="text" id="22" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text23" type="text" id="23" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text24" type="text" id="24" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text25" type="text" id="25" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="text26" type="text" id="26" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="28" readonly/>
                        </td>
                        <td>
                            <input name="text27" type="text" id="27" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text28" type="text" id="28" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text29" type="text" id="29" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text30" type="text" id="30" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="text31" type="text" id="31" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="28" readonly/>
                        </td>
                        <td>
                            <input name="text32" type="text" id="32" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text33" type="text" id="33" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text34" type="text" id="34" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text35" type="text" id="35" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                    </tr>
                </table>
                <p>ÈýµÈ½±£¨20Ãû£©</p>
                <table width="961" height="102" border="1">
                    <tr>
                        <td>
                            <input name="text1" type="text" id="1" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="28" readonly/>
                        </td>
                        <td>
                            <input name="text2" type="text" id="2" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text3" type="text" id="3" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text4" type="text" id="4" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text5" type="text" id="5" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="text6" type="text" id="6" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="28" readonly/>
                        </td>
                        <td>
                            <input name="text7" type="text" id="7" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text8" type="text" id="8" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text9" type="text" id="9" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text10" type="text" id="10" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="text11" type="text" id="11" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="28" readonly/>
                        </td>
                        <td>
                            <input name="text12" type="text" id="12" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text13" type="text" id="13" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text14" type="text" id="14" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text15" type="text" id="15" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="text16" type="text" id="16" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="28" readonly/>
                        </td>
                        <td>
                            <input name="text17" type="text" id="17" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text18" type="text" id="18" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text19" type="text" id="19" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                        <td>
                            <input name="text20" type="text" id="20" style="height:30px;width:190px;border:1px solid
red;font-size:25;" size="20" readonly/>
                        </td>
                    </tr>
                </table>
                <p> </p>
                <p> </p>
                <p> </p>
            </div>
        </div>
        <center>
</body>

</html>

 

转载于:https://www.cnblogs.com/CyLee/p/5828160.html

weixin_33709364
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html抽奖代码，抽奖代码
10-22
javascript编写的HTML抽奖代码
html5抽奖源代码
08-28
抽奖源代码，可以参开一下，html5，又需要的可以看看哦
抽奖程序（HTML+JS）源码
02-05
源码可修改，可查阅，安全，不怕公司员工信息泄露，抽奖概率平均。
html抽奖代码
01-12
HTML抽奖代码是网页开发中的一种常见应用场景，常用于制作各种互动性强、视觉效果吸引人的线上活动，如电商平台的促销抽奖、公司年会的幸运大转盘等。在HTML抽奖代码中，开发者通常会结合CSS（层叠样式表）和...
HTML+JS抽奖系统源代码
03-18
纯html+JS完成的抽奖系统，友通数码港实力派团队开发。 1、号码抽取等级、数量自由定义 ini.htm 2、全屏幕显示1024X768像素，界面美观大方,适合于投影仪投射晚会晚宴豪华场所抽奖系统。 3、可自由选择键盘及鼠标双重...
html实现酷炫的公司年会抽奖（源码）
01-11
html实现酷炫公司年会抽奖，可以直接配置员工信息然后使用的，实现动态配置员工信息，实现员工只能中一次奖，实现奖品可灵活配置，实现样式灵活调整，实现抽奖酷炫音效，并且有多种震撼音效可选，可以直接运行index....
html网页大转盘抽奖页面代码
12-19
在压缩包中的"jQuery网页大转盘抽奖代码"文件，包含了实现上述功能的具体代码。通过学习和理解这段代码，开发者不仅可以创建自己的抽奖页面，还能深入理解HTML、CSS和jQuery在实际项目中的应用。在实践中，还可以...
抽奖系统-HTML-代码
05-24
一个web网页，用HTML写的，css样式、JavaScript也在里面，会动，有特效，学习前端的朋友可以试着下载来看看，有些地方是可以借鉴的，挺不错的
HTML 抽奖网页源码
04-06
HTML 抽奖网页源码
HTML+css实现抽奖程序
12-02
HTML+css实现抽奖程序,带有背景音效。可根据自己需要改进。
HTML5抽奖程序
09-12
html5编写的抽奖程序(3个版本)，包括抽奖的数据统计，使用了canvas,localStorage等html5技术，不需要服务器端在浏览器直接查看运行
html5公司年终抽奖程序源码按数字随机抽奖
01-17
按键盘空格键或者字母A可进行抽取,隐藏菜单请按ESC。 ESC菜单中高级设置可以设置参与人数，格子大小，重置抽奖数据等信息。 点击已经中奖格子并输入点击的格子编号可取消该格子中奖状态，并清除中奖信息。 中奖信息保存在本机上，如清理缓存活更换机器则记录将消失。 请使用Chrome浏览器浏览，在投影仪上展示，请进入浏览器的全屏模式浏览。
html编写抽奖程序
08-04
教你如何制作一个简单的网页，此程序写的就是抽奖的小程序
JavaScript高手之路：封装抽奖效果
张翠山的博客
05-09 2429
通过前面6篇文章的介绍，我相信读者大概对JavaScript的对象有了初步了解。那么这篇文章我们继续对前面学习的知识进行总结和实战，用面向对象思维来封装抽象效果，本文要达到的效果如图所示。 如图所示，蓝色方框内显示当前奖品，当我们单击开始按钮时，奖品开始滚动起来；当我们单击停止按钮时，奖品列表滚动停止。 无论是现在我们要封装抽奖效果，还是后面要进行的插件开发，编程的步骤大概分为这几步。首先，编写...
html抽奖代码实验原理,javascript圆盘抽奖程序实现原理和完整代码例子
weixin_36180912的博客
05-31 218
抽奖#container{width: 400px;height: 400px;position: relative;margin: 0 auto;}#demo{position: absolute;filter: progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");} var m$ = f...
抽奖.html
AKABUGmaker的博客
09-03 393
jquery案例之抽奖
html抽奖代码实验原理,真正的网页抽奖-JavaScript HTML5代码
weixin_27625589的博客
05-31 552
圆盘抽奖*.{margin:0;padding:0;}#elm1{height:40px;background-color:#a00;}#elm2{height:50px;background-color:#0a0;}#wrap{position:relative;height:400px;}#bg{position:absolute;left:0;top:0;}#cell{position:ab...
抽奖代码 不重复 html
最新发布
01-17
抽奖代码不重复的实现方式有很多种，以下是一种简单的实现思路： 首先，在HTML中创建一个包含所有奖品的列表，每个奖品对应一个独一无二的ID。例如： ```html <ul> <li id="prize1">一等奖</li> <li id="prize2">二等奖</li> <li id="prize3">三等奖</li> <!-- 其他奖品... --> </ul> ``` 接下来，我们可以使用JavaScript代码来实现抽奖的功能。我们可以给一个按钮绑定一个点击事件，当用户点击按钮时，抽奖开始。在抽奖过程中，我们可以先生成一个随机数，然后根据这个随机数从奖品列表中选取一个奖品，并将该奖品从列表中移除，确保每个奖品只能被抽中一次。具体的代码如下： ```html <button onclick="drawLottery()">开始抽奖</button> <script> function drawLottery() { // 获取奖品列表 var prizes = document.querySelectorAll('li'); // 生成一个随机数，范围是0到奖品总数减1 var randomIndex = Math.floor(Math.random() * prizes.length); // 选取对应随机数的奖品 var selectedPrize = prizes[randomIndex]; // 将选中的奖品内容显示在页面上 console.log(selectedPrize.innerText); // 从奖品列表中移除选中的奖品 selectedPrize.parentNode.removeChild(selectedPrize); } </script> ``` 上述代码中，我们使用`querySelectorAll`函数获取所有奖品的元素，然后通过生成一个随机数`randomIndex`，从奖品列表中选取一个奖品，并将其内容显示在页面上。最后，我们通过`removeChild`方法将选中的奖品从列表中移除，以确保每个奖品只能被抽中一次。 这样，我们就实现了一个简单的抽奖代码，每次抽奖都能保证不重复。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值