1、环境要求:用html4配合javascript写的抽奖器,只要电脑上有浏览器就可以运行。

2、功能:支持在抽奖过程中,更换当前要抽奖的人数。

3、缺点:

a.当人数过多时,可能有性能问题。

b.未对输入的人数作校验。

源代码如下:

抽奖

function setlistitem(){

document.getElementById('rewardlist').innerHTML='';

document.getElementById('listdiv').innerHTML='';

narr=new Array();

var pnum=parseInt(document.getElementById('pn').value,10), seln=parseInt(document.getElementById('spn').value,10);

var selh=seln*31;

document.getElementById('rewardlist').style.height=selh+'px';

document.getElementById('maincon').style.height=selh+'px';

for (var i=1; i<=pnum; i++){narr.push(i);}

for (var i=1; i

var ri=parseInt(Math.random()*(pnum-i)+i,10);

var t=narr[ri];

narr[ri]=narr[i-1];

narr[i-1]=t;

}

drawlist();

}

function setbatch(){

var seln=parseInt(document.getElementById('spn').value,10);

var selh=seln*31;

document.getElementById('rewardlist').style.height=selh+'px';

document.getElementById('maincon').style.height=selh+'px';

document.getElementById('rewardlist').innerHTML='';

}

function drawlist(){

document.getElementById('listdiv').innerHTML='';

var bl = narr.length, tmparr = new Array();

for (var y=0;y<2;y++){

for (var i=0; i

tmparr.push(narr[i]);

}

}

var hs='';

for (var i=0; i

hs+='

'+tmparr[i]+'

';

}

document.getElementById('listdiv').innerHTML=hs;

document.getElementById('listdiv').style.marginTop='0px';

}

var scrollTime=null, scrollFlag=false, narr;

function scrollitem(){

if (scrollFlag){

scrollTime = setTimeout('scrollitem()',70);

}

var mh=parseInt(document.getElementById('listdiv').style.marginTop,10);

mh=mh-31;

var pnum=parseInt(document.getElementById('pn').value,10);

if (mh<=pnum/2*(-30)){

mh=0;

}

document.getElementById('listdiv').style.marginTop=mh+'px';

}

function doplay(){

if (scrollFlag){

scrollFlag=false;

clearTimeout(scrollFlag);

document.getElementById('playbut').value='开始抽奖';

var mh=parseInt(document.getElementById('listdiv').style.marginTop,10), pnum=parseInt(document.getElementById('pn').value,10), seln=parseInt(document.getElementById('spn').value,10);

var si=mh*(-1)/31;

var rewardarr = new Array();

for (var ri=0;ri

rewardarr.push(parseInt(document.getElementById('listdiv').childNodes[si+ri].innerHTML,10));

}

narrtmp = new Array();

for (var xi=0;xi

var ni=0, s=true;

for (var yi=0;yi

if (narr[xi]==rewardarr[yi]){s=false;break;}

}

if (s){

narrtmp.push(narr[xi]);

}

}

narr=new Array();

for (var xi=0;xi

narr.push(narrtmp[xi]);

}

drawlist();

var hs = '';

for (var i=0; i

hs+='

'+rewardarr[i]+'

';

}

document.getElementById('rewardlist').innerHTML+=hs;

}else{

scrollFlag=true;

scrollitem();

document.getElementById('playbut').value='停止';

}

}

.item{width:400px;height:30px;line-height:30px;border-bottom:1px solid #000;text-align:center;font-weight:700;font-size:25px;}

.itemlist{width:430px;height:180px;border:1px solid #000;}

.itemcon{width:400px;}

.setdiv{width:803px;height:30px;line-height:30px;text-align:center;}

参加总人数

每次抽得个数

抽奖区

中奖号码

算法只是简单的洗牌,如有问题,欢迎大家指正。

html抽奖原理,抽奖器html相关推荐

  1. 【Android 插件化】插件化原理 ( 类加载器 )

    Android 插件化系列文章目录 [Android 插件化]插件化简介 ( 组件化与插件化 ) [Android 插件化]插件化原理 ( JVM 内存数据 | 类加载流程 ) [Android 插件 ...

  2. Axure移动端app抽奖转盘+电商圆盘抽奖+商品抽奖+年会抽奖+抽奖动态+Axure通用抽奖转盘组件原型+九宫格方形随机抽奖原型组件+运营活动抽奖转盘

    Axure移动端app抽奖转盘+电商圆盘抽奖+商品抽奖+年会抽奖+抽奖动态+Axure通用抽奖转盘组件原型+九宫格方形随机抽奖原型组件+运营活动抽奖转盘 原型演示及下载地址:https://www.p ...

  3. 【小程序与公众号】微信小程序九宫格抽奖(抽奖完全随机)

    上图 话不多说直接上图,抽奖是顺时针又快变慢(还原抽奖的动画)进行抽奖,抽奖的几率都是随机 源码 接下来展示的就是微信小程序中的九宫格抽奖 说明 适用范围 抽奖逻辑只是原生JS,通过数据进行驱动,因此 ...

  4. html抽奖原理,js实现抽奖功能

    在很多网站,app中我们都能看见抽奖功能,但是我们都能发现,很难抽中那些比较吸引人的东西,接下来我们来解开抽奖的面纱! 效果图 一,原理 通过,循环给最外层标签添加样式,让后通过匹配两个数组的值是否相 ...

  5. python转盘抽奖_react 抽奖转盘 ----小计

    前言 很久没有写过小组件了,突然想做一个抽奖转盘,就花半天时间做一个,很简单 1.支持把一个圆盘分成n瓣. 2.实现转动动画. 3.弄个指针样式意思意思. 4.遇到抽奖的需求改吧改吧就能用了. 图是这 ...

  6. 不重复点名抽奖_抽奖新玩法?和平精英蜘蛛异变套装上线 参与十次可获得所有奖励...

    自从国服刺激战场下架,我们迎来了全新的"吃鸡"游戏和平精英,虽说上架后玩家给予的评价并不是很好,但官方依然在持续更新.近期,和平精英新套装上线,除了与刺激战场国际服"蜘蛛 ...

  7. python自动抽奖_Python定时自动参与抽奖助手抽奖

    打开localhost:8002的web管理端页面,此时应该已经可以看到数据请求了. 然后在手机上访问小程序,抽奖助手. 如果手机流量很杂影响筛选的话,可以在管理页面手动设置filter: 后续的步骤 ...

  8. python重复抽奖_python—抽奖程序

    抽奖程序: 1.每次抽奖完成,会提示是否继续抽奖,只有输入"是"才继续抽奖 2.抽奖逻辑: (1)生产0-100的整数,构造成列表 (2)构造三个列表,分别是一等奖.二等奖.三等奖 ...

  9. PHP做大转盘抽奖的思路,jQuery实现幸运大转盘(php抽奖程序)抽奖程序

    抽奖程序有各式各样的形式,其中幸运大转盘最为常见.线上线下都有很多的使用场景. 本文结合我自己的php网站,是实现一个php抽奖程序. 下图是该抽奖程序的截图: 一般的抽奖程序主要是算法程序,界面效果 ...

最新文章

  1. Ansible04-任务控制
  2. WebApi与Mvc的区别
  3. 何时在C ++中使用extern
  4. segformer 使用笔记
  5. java之java.sql.SQLException: ResultSet is from UPDATE. No Data.
  6. Eclipse 报 “Exception in thread main java.lang.OutOfMemoryError: Java heap space ”错误的解决办法
  7. 手持gps坐标转换参数求解方法及在excel中的实现_分享∣Arcgis中62个常用技巧系列二(21-40技巧)...
  8. Sqlserver2014下载与安装
  9. EF for Firebird
  10. iphone开热点电脑总是搜不到问题的解决办法(百试百灵)
  11. 华为5G折叠屏手机Mate X 重新入网,即将上市!
  12. DiQuick Web UI 框架 V1.3.2 版本更新
  13. OceanBase云平台简介
  14. 为什么很多公司不允许使用C++ STL?
  15. 你要的Chrome插件都在这里了
  16. 获取emf图片格式的方法
  17. SpringBoot+FreeMarker+flying-saucer-pdf实现PDF预览、分页需求
  18. 人脉就是钱脉,培养人脉的106个技巧
  19. 计算机用户与权限如何设置密码,如何设置电脑用户权限_如何设置电脑使用时间...
  20. 项目管理——项目进度的确定

热门文章

  1. zimuku字幕下载 v1.0
  2. apache mysql是什么_apache服务器是什么
  3. php(常见知识点二)
  4. 知识图谱研讨实录10丨肖仰华教授带你读懂知识图谱的搜索推荐
  5. es 搜索推荐:Suggest
  6. 疫情下企业管理的思考
  7. 有没有可以共享日程的app
  8. TALOS组件化平台搭建总结
  9. js获取上个月今天或下个月今天
  10. Flash性能真不赖啊