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 相关文章推荐
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
前端 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
深入php常用函数的使用汇总
2013/06/08 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
iframe实用操作锦集
2014/04/22 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
深入学习python的yield和generator
2016/03/10 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
详解Python3中ceil()函数用法
2019/02/19 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
Python中过滤字符串列表的方法
2020/12/22 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
计算机个人求职信范例
2014/01/24 职场文书
老同学聚会感言
2014/02/23 职场文书
业务员的岗位职责
2014/03/15 职场文书
购房协议书范本
2014/04/11 职场文书
员工工作表现评语
2014/04/26 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书