js实现简单抽奖功能

2024-12-16 09:31:04

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

代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title></title>
 <style>
 #box{
 border: 1px solid aqua;
 height: 100px;
 width: 200px;
 text-align: center;
 line-height: 100px;
 margin: auto;
 font-size: 22px;
 }
 .active{
 background: slateblue;
 }
 li{
 text-align: center;
 list-style:none ;
 width: 40px;
 height: 20px;
 line-height: 20px;
 border: 1px solid blue;
 margin-left: 40px;

 float: left;
 }
 ul,li
 {
 list-style: none;

 }
 #shu
 {
 margin: auto;
 }

 </style>
 </head>
 <body>
 <button id="stp">开始</button><button id="off">停止</button>

 <div id="box">恭喜<span>1</span>号 </div>
 <div id="shu">0</div><span>等奖</span>
 <ul>
 <li class="active">1号</li>
 <li>2号</li>
 <li>3号</li>
 <li>4号</li>
 <li>5号</li>
 <li>6号</li>
 <li>7号</li>
 </ul>
 <script>
 var t=null;
 var ostp=document.getElementById("stp");
 var ooff=document.getElementById("off");
 var ospan=document.getElementsByTagName("div")[0].getElementsByTagName("span");
 var oli=document.getElementsByTagName("ul")[0].getElementsByTagName("li");
 var oshu=document.getElementsByClassName("shu");
 function mytime(){
 var n=Math.floor(Math.random()*7+1);
 ospan[0].innerText=n;
 ospan[1].innerText=oli[n-1].innerText;
 for(let i=0;i<oli.length;i++)
 {
 oli[i].className="";
 }
 oli[n-1].className="active";
 }
 function mytime2()
 {
 var a=Math.floor(Math.random()*3+1);
 shu.innerText=a;

 }
 ostp.onclick=function(){
 clearInterval(t);
 t=setInterval(mytime,50);
 at=setInterval(mytime2,1000)
 }
 ooff.onclick=function(){
 clearInterval(t);
 clearInterval(at);
 }
 </script>
 </body>
</html>

效果

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

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
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

需求: 最多可以抽奖5次,而且,每次只会中"2000元理财金"或者"谢谢参与",其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-content"> <div class="g-lottery-case"> <div class="g-left"> <h2>您已拥有<span class="play
原生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
详解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根据奖品权重计算中奖概率

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

本文实例为大家分享了js实现抽奖功能的具体代码,供大家参考,具体内容如下 html部分: <div id="title" class="title">开始抽奖啦</div> <div class="btns"> <span id="play">开始</span> <span id="stop">结束</span> </
javascript实现随机抽奖功能

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

核心代码: //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实现简单抽奖功能

相关推荐

随机推荐