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 三种编解码方式
Feb 01 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
javascript 闭包详解
Jul 02 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
vue-cli配置环境变量的方法
Jul 09 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 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 多行多列显示
2009/08/15 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
PHP中header用法小结
2016/05/23 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
js有序数组的连接问题
2013/10/01 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
python实用代码片段收集贴
2015/06/03 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
《十六年前的回忆》教学反思
2014/02/14 职场文书
安全教育月活动总结
2014/05/05 职场文书
敬老院活动感想
2015/08/07 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python