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实现相同内容合并单元格的代码
Jan 12 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
js实现div在页面拖动效果
May 04 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
JavaScript实现alert弹框效果
Nov 19 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
PHP英文字母大小写转换函数小结
2014/05/03 PHP
php简单截取字符串代码示例
2016/10/19 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
python中迭代器(iterator)用法实例分析
2015/04/29 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
Python中安装easy_install的方法
2018/11/18 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
详解Python IO编程
2020/07/24 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
中学劳技课教师的自我评价
2014/02/05 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
学校春季防火方案
2014/06/08 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
大连导游词
2015/02/12 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书