JS实现随机抽选获奖者


Posted in Javascript onNovember 07, 2019

本文实例为大家分享了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>

JS实现随机抽选获奖者

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
js select常用操作控制代码
Mar 16 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
Echarts如何重新渲染实例详解
May 30 Javascript
Vue中错误图片的处理的实现代码
Nov 07 #Javascript
vue 实现购物车总价计算
Nov 06 #Javascript
JavaScript原型式继承实现方法
Nov 06 #Javascript
vue点击自增和求和的实例代码
Nov 06 #Javascript
解决vue 表格table列求和的问题
Nov 06 #Javascript
JavaScript如何借用构造函数继承
Nov 06 #Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 #Javascript
You might like
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
深入理解Django-Signals信号量
2019/02/19 Python
Python实现时间序列可视化的方法
2019/08/06 Python
python 的topk算法实例
2020/04/02 Python
python为什么会环境变量设置不成功
2020/06/23 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
应聘自荐书
2013/10/08 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
企业后勤岗位职责
2014/02/28 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
求职自荐信的格式
2014/04/07 职场文书
感恩之星事迹材料
2014/05/03 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
2014年学习部工作总结
2014/11/12 职场文书
二手房购房意向书
2015/05/09 职场文书
银行安全保卫工作总结
2015/08/10 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
Linux中文件的基本属性介绍
2022/06/01 Servers