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 相关文章推荐
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
vue2过滤器模糊查询方法
Sep 16 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
前端 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
我的论坛源代码(九)
2006/10/09 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
python实现串口通信的示例代码
2020/02/10 Python
pandas数据处理之绘图的实现
2020/06/15 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
新闻专业个人自我评价
2013/09/21 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
硕士论文致谢范文
2015/05/14 职场文书
Elasticsearch 配置详解
2022/04/19 Java/Android