js实现抽奖功能

本文实例为大家分享了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';
 }

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解JavaScript按概率随机生成事件

    最近做了一个JavaScript按概率随机生成事件,于是整理了一下思路,写了一个小demo: /* *在抽奖的活动中经常会用到这个算法,不同奖项的获取概率不同,要按概率去随机生成对应的奖品 * */ function random(arr1, arr2) { var sum = 0, factor = 0, random = Math.random(); for(var i = arr2.length - 1; i >= 0; i--) { sum += arr2[i]; // 统计概率总和 }

  • js控制随机数生成概率代码实例

    基本思路:把Math.random()生成的数看着百分比,然后定义每个整数值取值范围. 具体内容如下,供大家参考 'use strict'; export default class GL { /** * 构造函数 * @param {object} opt * @param {number} opt.min 最小整数值 * @param {number} opt.max 最大整数值 * @param {Map} opt.fenpei 自定义概率 */ constructor({ min, ma

  • js实现简单抽奖功能

    js实现简单抽奖功能

    本文实例为大家分享了js实现简单抽奖功能的具体代码,供大家参考,具体内容如下 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #box{ border: 1px solid aqua; height: 100px; width: 200px; text-align: center; lin

  • 原生JS实现九宫格抽奖

    本文实例为大家分享了JS实现九宫格抽奖的具体代码,供大家参考,具体内容如下 上代码: <div class="wrapper"> <div>谢谢惠顾</div> <div>十万元现金</div> <div>谢谢惠顾</div> <div>iphone11</div> <div>抽奖</div> <div>美的冰箱</div> <

  • js数组实现权重概率分配

    今天写了一个js控制页面轮播的功能,如果仅仅使用队列很简单,但是考虑到为每一个页面分配权重的是否变的异常复杂,使用switch和if else也无法解决,于是想到使用js数组实现,思路是将各个轮播的页面抽象成一个对象,各个对象需要手动指定权重值,然后组成一个数组,使用下面封装的函数,将会根据各个对象相应的权重概率返回一个对象,代码如下: /** * js数组实现权重概率分配 * @param Array arr js数组,参数类型[Object,Object,Object--] * @retur

  • js 概率计算(简单版)

    核心代码: //7:3运算 if(Math.ceil(Math.random()*10)>3){ //占比=7 alert('7'); window.location.href="http://www.baidu.com" rel="external nofollow" ; }else{ //占比=3 alert(3); widnow.location.href="http://www.jb51.net"; } 通过随机数大小来判断,最好访

  • JS根据奖品权重计算中奖概率

    目录 一.示例场景 1.1.设置抽奖活动的奖项名称 1.2.设置各奖项权重 1.3.抽奖活动规则 二.实现原理 2.1.计算权重和值 2.2.编写抽奖函数 三.项目完整代码 一.示例场景 1.1.设置抽奖活动的奖项名称 奖项名称:["一等奖", "二等奖", "三等奖", "未中奖"].假设抽奖活动设置了这四个奖项,当然开发者可以扩展更多. var prizes = ["一等奖","二等奖&quo

  • jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

    jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

    需求: 最多可以抽奖5次,而且,每次只会中"2000元理财金"或者"谢谢参与",其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-content"> <div class="g-lottery-case"> <div class="g-left"> <h2>您已拥有<span class="play

  • js实现1,2,3,5数字按照概率生成

    js按照配置的概率生成,概率规则如下: 1------------50% 2------------30% 3------------15% 5------------5% 简单的代码 function myRandom() { var rand = Math.random(); if (rand < .5) return 1; if (rand < .8) return 2; if (rand < .95) return 3; return 5; } 复杂点的 function pri

  • javascript实现随机抽奖功能

    javascript实现随机抽奖功能

    javascript实现随机抽奖,供大家参考,具体内容如下 首先创建一个数组用于存放抽奖的参与者: var arr=['张三','波波','kk','莉莉','张三丰','刘德华','周杰困','你那儿','zhere','好的']; 给开始和结束按钮div添加点击事件: //添加点击开始则开始循环播放 document.getElementById("start").addEventListener("click",va); //点击停止则停止播放并显示恭喜中奖

随机推荐