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的鼠标拖动效果代码
May 30 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
js创建数组的简单方法
Jul 27 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 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
DC动漫人物排行
2020/03/03 欧美动漫
Ajax PHP分页演示
2007/01/02 PHP
php实现的漂亮分页方法
2014/04/17 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
JavaScript效率调优经验
2009/06/04 Javascript
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
Vue实现穿梭框效果
2020/09/30 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
浅析Python多线程下的变量问题
2015/04/28 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
基于Django用户认证系统详解
2018/02/21 Python
python生成ppt的方法
2018/06/07 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
django自带调试服务器的使用详解
2019/08/29 Python
学习Django知识点分享
2019/09/11 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
捷克玩具商店:Bambule
2019/02/23 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
迟到检讨书5000字
2014/01/31 职场文书
文案策划岗位职责
2015/02/11 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书