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 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
如何制作自己的原生JavaScript路由
May 05 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中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
vue路由传参三种基本方式详解
2019/12/09 Javascript
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
Python程序运行原理图文解析
2018/02/10 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
大学生志愿者活动总结
2014/06/27 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
班级管理经验交流材料
2015/11/02 职场文书
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS