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 相关文章推荐
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
js实现简易计算器功能
Oct 18 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
JSONObject与JSONArray使用方法解析
Sep 28 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
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
js常用代码段整理
2011/11/30 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
移动端界面的适配
2017/01/11 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
利用Python获取操作系统信息实例
2016/09/02 Python
python 使用get_argument获取url query参数
2017/04/28 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
环境科学专业个人求职信
2013/12/15 职场文书
中学门卫岗位职责
2013/12/26 职场文书
班组安全员工作职责
2014/02/01 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
详解MySQL 用户权限管理
2021/04/20 MySQL
python模板入门教程之flask Jinja
2022/04/11 Python