js实现抽奖功能


Posted in Javascript onNovember 24, 2020

本文实例为大家分享了js实现抽奖功能的具体代码,供大家参考,具体内容如下

html部分:

<div id="title" class="title">开始抽奖啦</div>
 <div class="btns">
 <span id="play">开始</span>
 <span id="stop">结束</span>
</div>

css部分:

*{
 margin: 0;
 padding: 0;
 }
 .title{
 width: 400px;
 height:70px ;
 /*水平居中*/
 margin: 0 auto;
 padding-top: 30px;
 text-align: center;
 font-size: 24px;
 color:#F00;
 }
 .btns{
 width: 190px;
 height: 30px;
 margin: 0 auto;
 }
 .btns span{
 display: block;
 float:left;
 width:80px;
 height:27px;
 line-height:27px;
 background:#036;
 border:1px solid #eee;
 border-radius:7px;
 margin-right:10px;
 color:#FFF;
 text-align:center;
 font-size:14px;
 font-family:"微软雅黑";
 cursor:pointer;
 }

Js部分:

var data=['Phone5','Ipad','笔记本','相机','打印机','谢谢参与','50元券'];
var timer=null;

 window.function(){
 var play=document.getElementById('play');
 var stop=document.getElementById('stop');
 play.playFun;
 stop.stopFun;
 }
 function playFun(){
 var play=document.getElementById('play');
 var title=document.getElementById('title');
 clearInterval(timer);

 timer=setInterval(function(){
 var random=Math.floor(Math.random()*data.length);
 title.innerHTML=data[random];
 },50)
 play.style.background='#eee';
 }
 function stopFun(){
 var play=document.getElementById('play');
 clearInterval(timer);
 play.style.background='#036';
 }

想要学习更多关于抽奖功能的实现,请参考此专题:抽奖功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
js实现九宫格抽奖
Mar 19 Javascript
VueJS实现用户管理系统
May 29 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
前端 javascript 实现文件下载的示例
Nov 24 #Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 #Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 #Javascript
原生js实现表格循环滚动
Nov 24 #Javascript
浅析VUE防抖与节流
Nov 24 #Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 #Vue.js
Js利用正则表达式去除字符串的中括号
Nov 23 #Javascript
You might like
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
对Python3 序列解包详解
2019/02/16 Python
python os模块简单应用示例
2019/05/23 Python
pytorch 常用线性函数详解
2020/01/15 Python
python文件和文件夹复制函数
2020/02/07 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
python求前n个阶乘的和实例
2020/04/02 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
广州一家公司的.NET面试题
2016/06/11 面试题
大学生活学习的自我评价
2013/12/03 职场文书
电子商务专业个人的自我评价
2013/12/19 职场文书
环境科学专业求职信
2014/08/04 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
户外活动总结
2015/02/04 职场文书
土建技术员岗位职责
2015/04/11 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python