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 相关文章推荐
ie8本地图片上传预览示例代码
Jan 12 Javascript
js读取cookie方法总结
Oct 31 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
javascript流程控制语句集合
Sep 18 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
js实现转动骰子模型
Oct 24 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
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框架Phpbean说明
2008/01/10 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
javascript天然的迭代器
2010/10/29 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
javascript闭包入门示例
2014/04/30 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
python进阶之自定义可迭代的类
2019/08/20 Python
Django框架安装方法图文详解
2019/11/04 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
python中remove函数的踩坑记录
2021/01/04 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
Europcar比利时:租车
2019/08/26 全球购物
战友聚会邀请函
2014/01/18 职场文书
大学生作弊检讨书
2014/02/19 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
考研经验交流会策划书
2015/11/02 职场文书
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏