JS实现随机抽选获奖者

本文实例为大家分享了JS实现随机抽选获奖者的具体代码，供大家参考，具体内容如下

<!--2018年9月12日——————幸运抽奖-->
<!DOCTYPE html>
<html>
<head>
 <title></title>
 <style type="text/css">

 .select{
 background: #3399FF;
 color:white;
 }
 .button{
 border-radius: 10px;
 height: 100px;
  font-size: 25px;
 width: 100px;
 background-color: #3399FF;
  color: white;
 }
 .title{
 font-family: cursive;
 }
 </style>

</head>
<body>
 <div style="text-align:-webkit-center;font-size: 57px;color: #3399FF;" class="title">抽奖人员名单</div>

 <table style="border:1px solid #ccc; width:800px; height:400px; text-align: center; margin: auto;" background="C:\Users\Administrator\Desktop\%application%\360壁纸\50736.jpg" >
 <tr>
 <td id="student_1">谢林峰</td>
 <td id="student_2">卿明珠</td>
 <td id="student_3">袁龙</td>
 <td id="student_4">周志明</td>
 <td id="student_5">秦玉萍</td>
 <td id="student_6">金晖</td>
 <td id="student_7">陶灵峰</td>
 <td id="student_8">廖杨明</td>

 </tr>
 <tr>
 <td id="student_9">胡雄</td>
 <td id="student_10">胡俊凡</td>
 <td id="student_11">李欣</td>
 <td id="student_12">易君</td>
 <td id="student_13">湛威</td>
 <td id="student_14">古海平</td>
 <td id="student_15">潘杰杰</td>
 <td id="student_16">伍光政</td>
 </tr>
 <tr>
 <td id="student_17">谭谈</td>
 <td id="student_18">周强</td>
 <td id="student_19">陈辉</td>
 <td id="student_20">李庚云</td>
 <td id="student_21">吴玉风</td>
 <td id="student_22">伍鹏</td>
 <td id="student_23">蔡东龙</td>
 <td id="student_24">胡俊飞</td>
 </tr>
 <tr>
 <td id="student_25">文捷频</td>
 <td id="student_26">唐明</td>
 <td id="student_27">吴鑫培</td>
 <td id="student_28">唐翌</td>
 <td id="student_29">邹家欢</td>
 <td id="student_30">刘朋</td>
 <td id="student_31">周文才</td>
 <td id="student_32">阳小松</td>
 </tr>
 <tr>
 <td id="student_33">张明博</td>
 <td id="student_34">严伟</td>
 <td id="student_"></td>
 <td id="student_"></td>
 <td id="student_"></td>
 <td id="student_"></td>
 <td id="student_"></td>
 <td id="student_"></td>
 </tr>

 </table>

 <sapn style="margin-left: 430px;">抽奖倒计时：</sapn><span id="Ten" style="color:red;font-size: 70px;">10</span>
 <span style="color:red">s</span>
 <span style="margin-left: 220px;">幸运星:</span>
 <span style="font-size: 70px; color: red;" id="Lucky" class="title"></span>

 <div style="text-align: -webkit-center;"><button onclick="go()" class="button">走你</button></div>

</body>

 <script type="text/javascript">
 //鼠标单击事件
 var stuInterval;
 var flag = false;

 //点击开始事件
 function go(){
 if(flag != false){
 return;
 }
 flag = true;
 setTimeout(function(){
 flag = false;
 },15000);

 time();//调用时间倒计时方法

 //循环选取学生
 stuInterval=setInterval(function(){
 var ran=Math.floor(Math.random()*34+1);
 var id="student_"+ran;
 //获取到文本值并且赋属性
 var td=document.getElementById(id);

 //删除之前的样式
 var stuO = document.getElementsByClassName("select");
 if(stuO.length != 0){
  stuO[0].setAttribute("class","");
 }if(stuO){
 td.setAttribute("class","select");
 var stuname = td.innerText;
 document.getElementById("Lucky").innerText = stuname;
 }

 },200)

 }

 //时间倒计时
 function time(){
 var t=10;
 var int=setInterval(function(){
 --t;
 var tspan=document.getElementById("Ten");
 tspan.innerText=t;
 if(t==0){
 clearInterval(int);
 clearInterval(stuInterval);//延时特殊情况
 }
 },1000);
 }
 </script>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 按给定几率进行随机抽取的js代码

    复制代码 代码如下: function StringResource(k) { return StringResource[k] || k; } function RandomSelector() { var f = 0, c = []; return function (v, r) { if (arguments.length) { if (r <= 0) throw { message: StringResource("INVALID_ARGUMENT") }; c.push

  • JS实现随机抽取三人

    因为实验室每周需要三人来做报告,所以用JS来做一个随机抽取的页面. 首先,先说一下需求.研二同学共5人,一人是单独的一组,研一同学共9人,同时九人分为三组.所以共八组,每周报告的三人从八组中抽取,这三人不能有两人或者两人以上在同一组. 程序思路1 1.将研一的三组建成三个小的数组,从这三个数组里每组随机抽取一人: 2. 将第一步里抽取出来的三人和研二的五人放在一起,组成一个新的数组,在从中随机抽取三人: 3. 若随机抽取的三人存在上述情况,则返回第一步,重新随机抽取,直到不存在第二步的情况,然后

  • javascript随机抽取0-100之间不重复的10个数

    目前只学会两种简单的方法,帮助大家实现随机抽取0-100之间不重复的10个数,具体内容如下 第一种利用数组长度可改写的特点 思路:可以从0到100的数用for循环出来放在一个数组中,然后将这100个数利用sort()随机打乱,然后通过将这个数组的length改写为10,便取到了10个不同的数. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

  • 使用JS编写的随机抽取号码的小程序

    使用JS编写的随机抽取号码的小程序

    刚开始学习JavaScript,写了一个随机抽取号码的小程序,附上body里的所有代码,供大家参考. 本程序可以实现功能如下: 1.在文本框中输入抽号最大值 2.点击按钮,开始抽号,随机生成1~最大值之间的整数 3.已经抽取的号码不能再次抽取到,保证号码的唯一性 4.将号码结果放入result中显示出来 5.将已经生成的号码存入exist中显示出来 具体代码如下: <body> <input type="text" id="txt" placeho

  • JS实现随机抽选获奖者

    JS实现随机抽选获奖者

    本文实例为大家分享了JS实现随机抽选获奖者的具体代码,供大家参考,具体内容如下 <!--2018年9月12日------幸运抽奖--> <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .select{ background: #3399FF; color:white; } .button{ border-radi

  • js实现随机抽选效果、随机抽选红色球效果

    js实现随机抽选效果、随机抽选红色球效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>caipiao</title> </head> <body> <div id="wrap"></div> <button id="goBtn">go</

  • Python实现一个带权无回置随机抽选函数的方法

    需求 有一个抽奖应用,从所有参与的用户抽出K位中奖用户(K=奖品数量),且要根据每位用户拥有的抽奖码数量作为权重. 如假设有三个用户及他们的权重是: A(1), B(1), C(2).希望抽到A的概率为25%,抽到B的概率为25%, 抽到C的概率为50%. 分析 比较直观的做法是把两个C放到列表中抽选,如[A, B, C, C], 使用Python内置的函数random.choice[A, B, C, C], 这样C抽到的概率即为50%. 这个办法的问题是权重比较大的时候,浪费内存空间. 更一般

  • 原生JS实现随机点名项目的实例代码

    核心思想 •随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停. 所用知识 •Math.random() * num: 产生从0到num的随机数 •Math.floor(): 向下取整 •简单的DOM操作等 技术扩展 •扩展人数 •添加停止键等 效果 代码如下 •html: <div class="container"> <section class="demo"> <ul> <li></l

  • JS生成随机字符串的多种方法

    下面的一段代码,整理电脑时,记录备查. 复制代码 代码如下: <script language="javascript"> function randomString(len) { len = len || 32; var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/ var maxPos = $chars.len

  • js实现随机点名系统(实例讲解)

    废话不多说,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随机点名</title> <style type="text/css"> td{ text-align: center; } </style> </head> <body

  • js实现当复选框选择匿名登录时隐藏登录框效果

    js实现当复选框选择匿名登录时隐藏登录框效果

    本文实例讲述了js实现当复选框选择匿名登录时隐藏登录框效果.分享给大家供大家参考.具体如下: 本技巧是比较常见的,有些网站可以登录发帖或匿名发帖,当勾选复选框选择匿名发帖时,登录框自动隐藏了,是不是更人性化了?这其实是在表单元素上稍微加了一点JavaScript代码,具体实现方法请查看代码. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-checkbox-nm-login-submit-codes/ 具体代码如下: <title>当复

  • 基于JS实现checkbox全选功能实例代码

    基于JS实现checkbox全选功能实例代码

    需求:要求实现点击全选选中所有菜单,再次点击全选取消选中.此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧! 效果图如下: 点击全选之前: 点击全选之后: 再次点击全选之后: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l

  • JS实现随机乱撞彩色圆球特效的方法

    本文实例讲述了JS实现随机乱撞彩色圆球特效的方法.分享给大家供大家参考.具体实现方法如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS实现的随机乱撞的彩色圆球特效代码</title> <style> body{ font-family: 微软雅黑; } body,h1{ margin

  • js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析

    首先是js限制checkbbox勾选个数的代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/

随机推荐