用Javascript轻松制作一套简单的抽奖系统

作者:jegg 
  年底将至,许多公司忙着搞年会,会上一般都会有一些抽奖活动,下面的程序就是用javascript 写的一个简单的抽奖系统与大家共享。
  此代码借鉴了网上的一些网友的代码,又加上了一些诸如不重复抽奖之类的改进。大概思路如下:
  1.将所有的的抽奖数据(这里为手机号码)存入数组中。
  2.使用random 函数随机产生该数组的INDEX
  3.使用setInterval 函数以极短的时间间隔产生该数组随机INDEX所对应的手机号码,并显示。
      4.使用removeEleAt(index)函数删除随机产生过的手机号码。并且重新组织生成剩余的手机号码为一个新的数组,为下次使用。
  使用方法:
  将以下原代码拷到写字板上,然后将txt属性该成html即可。如果出现显示乱码,请改变网页编码(查看--编码)。
  原代码如下:

2006年会抽奖系统

// global variables
var timer;
var flag = new Array(100);
var existingnum = new Array(100);
var clickTimes = 0;
var randnum;
var cellnum =1;
var mobile = new Array();
// set data here!!
mobile[0]=13020000100;
mobile[1]=13020000101;
mobile[2]=13020000102;
mobile[3]=13020000103;
mobile[4]=13020000104;
mobile[5]=13020000105;
mobile[6]=13020000106;
mobile[7]=13020000107;
mobile[8]=13020000108;
mobile[9]=13020000109;
mobile[10]=13020000110;
mobile[11]=13020000111;
mobile[12]=13020000112;
mobile[13]=13020000113;
mobile[14]=13020000114;
mobile[15]=13020000115;

mobile[16]=13020000116;
mobile[17]=13020000117;
mobile[18]=13020000118;
mobile[19]=13020000119;
mobile[20]=13020000120;
mobile[21]=13020000121;
mobile[22]=13020000122;
mobile[23]=13020000123;
mobile[24]=13020000124;
mobile[25]=13020000125;
mobile[26]=13020000126;
mobile[27]=13020000127;
mobile[28]=13020000128;
mobile[29]=13020000129;
mobile[30]=13020000130;
mobile[31]=13020000131;
mobile[32]=13020000132;
mobile[33]=13020000133;
mobile[34]=13020000134;
mobile[35]=13020000135;
mobile[36]=13020000136;
mobile[37]=13020000137;
mobile[38]=13020000138;
mobile[39]=13020000139;
mobile[40]=13020000140;
mobile[41]=13020000141;
mobile[42]=13020000142;
mobile[43]=13020000143;
mobile[44]=13020000144;
mobile[45]=13020000145;
mobile[46]=13020020146;
var num = mobile.length-1;
function getRandNum(){
document.getElementById("result").value = mobile[GetRnd(0,num)];
}
function start(){
clearInterval(timer);
timer = setInterval('change()',50);
}
function ok(){
clearInterval(timer);
}
function GetRnd(min,max){

randnum = parseInt(Math.random()*(max-min+1));
return randnum;
}
function setTimer(){
timer = setInterval("getRandNum();",10);
document.getElementById("start").disabled = true;
document.getElementById("end").disabled = false;
}
function clearTimer(){
noDupNum();
clearInterval(timer);
document.getElementById("start").disabled = false;
document.getElementById("end").disabled = true;

}

function noDupNum(){
// to remove the selected mobile phone number
mobile.removeEleAt(randnum);

// to reorganize the mobile number array!!
var o = 0;
for(p=0; pthis.length){return false;}
this.splice(dx,1);
}
// set mobile phone numbers to the table cell
function setValues(){
document.getElementById(cellnum).value = document.getElementById("result").value ;
cellnum++;
}

中奖号码

一等奖(10名)

二等奖(15名)

三等奖(20名)

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

时间: 2006-12-16

基于JavaScript实现简单的随机抽奖小程序

对于抽奖这样的小程序使用诸如VB,Delphi等工具来实现会比较的方便,由于本人机器上没有装这样的应用程序,所以只能另寻其道.为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行,开发工具和编译运行工具也能够经可能简单(诸如text文本即可编辑,window系统自带的浏览器即可编译运行的情况),决定尝试使用javascript来做.本人对javascript的研究不深,平时主要用于网站开发中对来自客户端的数据进行有效性判断(基于安全性的考虑,安全性要求高的网站尽量使用服务器端语言对数据有效

javascript HTML5 Canvas实现圆盘抽奖功能

我们经常参加各种电商优惠活动,比如购买达到一定数额进行抽奖活动,在比如微信抽奖,淘宝抽奖,迅雷赚钱宝圆盘抽奖活动等.这些抽奖活动部分就是由HTML5的Canvas来制作的,今天就为大家分享一下如何使用HTML5的Canvas来制作圆盘抽奖功能.老规矩,先看下效果图吧: 再来看看Canvas的几个主要api: 全部源代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&qu

javascript+HTML5 Canvas绘制转盘抽奖

之前做过的项目中,有需要抽奖转盘功能的.项目已经完工一段时间了,也没出现什么严重的bug,所以现在拎出来分享给大家. 功能需求 1.转盘要美观,转动效果流畅. 2.转盘上需要显示奖品图片,并且奖品是后台读取的照片和名字. 3.转动动画完成后要有相应提示. 4.获取的奖品具体算法在数据库里操作,前端只提供最后的效果展示. 知识要点 1.引用了一个jq插件:awardRotate,用来实现更智能化的转动(插件下载:http://www.jqcool.net/jquery-jqueryrotate.h

JavaScript 抽奖效果实现代码 数字跳动版

JavaScript实现的抽奖效果 数字跳动版 .a1 {}{ position: relative; font-family: Verdana; font-size: 200px; color: #888888; } function Lottery() { var Nos = Math.round(Math.random() * (4999 - 1) + 1); var result = document.getElementById("layer1"); if (result !

javascript+canvas实现刮刮卡抽奖效果

运用canvas做的简单刮刮卡效果,每次刷新可重新测试 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <me

javascript圆盘抽奖程序实现原理和完整代码例子

效果预览: 一.模拟抽奖的实现过程 旋转原理:当支持CSS3属性采用transform: rotate(角度deg)设置,当角度为正数时顺时针旋转,当为负数时逆时针旋转.如果是IE8及其以下,采用采用绝对定位设置top和left,模拟角度旋转. run方法,参数angle指角度 复制代码 代码如下: function run(angle) {                    if (isIE) {                        cosDeg = Math.cos(angle

javascript 随机抽奖程序代码

随机抽奖程序 请单击开始抽奖 开始抽奖(S) 停止(O) [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

基于javascript实现简单的抽奖系统

本文实例为大家分享了js实现简单的抽奖系统,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="gb2312"> <title>抽奖活动</title> <style> *{ margin:0;padding:0; } #title{ color:red;text-align:center;margi

基于JavaScript实现简单的音频播放功能

现效果如下: 由于我这边不需要其他按钮,就没写 数据是由后台提供,在这做了个小列子 后台代码 public ActionResult MusicPlayer(int musicId=0) { MusicPlayerModel model = new MusicPlayerModel(); switch (musicId) { default: model.MusicName = "Believe-动画<海贼王>"; model.CoverImg = "/Conte

基于javascript实现简单计算器功能

本文实例为大家介绍javascript实现简单计算器功能的详细代码,分享给大家供大家参考,具体内容如下 效果图: 实现代码: <html> <head> <script> function calc(event){ // test //window.alert(event.value); var val = new String(event.value); // clear space val = val.trim(); var res = document.getEl

基于javascript编写简单日历

一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解决行数问题之前,还得先知道这个月的第1天是星期几,因为每个月的1号并不都是从日历上的星期天开始排的,可能1号是星期五,星期六也说不定,所以1号的左边部分,就得用空表格代替了.那么用多少个空表格代替呢,这里就得用到getDay()方法了,该方法返回数组[0-6]中的一个数字,0代表星期天,1代表星期一,2代表星期二,以此类推.所以如果一个月的1号是星期

基于JavaScript实现抽奖系统

用JavaScript实现一个简单的抽奖系统,有[开始]按钮和[停止]按钮. 功能: - 点开始按钮开始抽奖,随机出现奖品名称: - 点停止按钮即可停止抽奖: - 按下回车键可切换开始抽奖和停止抽奖. 效果 html代码: 创建html结构,最基础的要含有显示的奖品名称和开始.停止按钮. <!doctype html> <html> <head> <title>抽奖系统</title> <meta charset="utf-8&q

基于PHP实现简单的随机抽奖小程序

一个抽奖小程序,概论可控,也可某个奖品在前端显示,而程序中根本不可能获得!把所有的概率x10后相加起来,新数组中每项的值等于它前几个的和加上它本身. 然后随即生成一个0到最大数之间的一个数,通过循环查看它属于那个区间,返回该区间的key. 代码如下 $prize = array( 1 => 3.5, //3.5%机率 2 => 2.5, 3 => 6, 4 => 2, 5 => 42, //42%机率 6 => 36, 7 => 2, 8 => 4, 9 =

基于PHP+Mysql简单实现了图书购物车系统的实例详解

PHP+Mysql简单实现了图书购物车 本文主要讲述如何通过PHP+HTML简单实现图书购物车的功能,这是提取我们php项目的部分内容.主要内容包括: 1.通过JavaScript和Iframe实现局部布局界面     2.PHP如何定义类实现访问数据库功能     3.实现简单的添加购物车功能     4.实现了后台管理前台的页面     由于这个项目是在期末完成,PHP只是刚学的,比较简单. 效果图如下: 这是后台管理的页面: 这是前台页面: index.php页面: <!DOCTYPE h

基于CakePHP实现的简单博客系统实例

本文实例讲述了基于CakePHP实现的简单博客系统.分享给大家供大家参考.具体实现方法如下: PostsController.php文件: <?php class PostsController extends AppController { public $helpers = array('Html', 'Form', 'Session'); public $components = array('Session'); public function index() { $this->set