整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
单的html和js做的抽奖效果，自己也做过抽奖程序，用作年会上面的抽奖，效果不错，赛光时代小编会后续的分享出来供大家使用得。近些年互联网飞速发展，周边的产业不断的完善微信、手机等等都需要我们企业不断的扩展和适应。
抽奖效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>抽奖程序-saiguangw.com</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<style>
* {
margin:0;
padding:0;
}
a {
text-decoration:none;
}
img {
border:none;
}
li {
list-style:none outside none;
}
body {
background:#c9c9c9;
font-size:14px;
font-family:"宋体";
}
.myBox {
margin:50px auto 0;
}
.myBox ul {
margin:0 auto 0;
position:relative;
width:500px;
height:100px;
overflow:hidden;
}
.myBox li {
width:100px;
height:100px;
text-align:center;
line-height:100px;
font-size:40px;
color:#fff;
background:rgba(222,122,155,0.5);
}
.myBox li.on {
background:rgba(66,56,222,0.5);
}
.text {
height:50px;
overflow:hidden;
width:500px;
margin:20px auto 0;
font-size:20px;
line-height:50px;
text-align:center;
}
.bt,.jg,.zt {
float:left;
width:200px;
}
.bt {
width:100px;
height:50px;
background:rgb(200,100,55);
color:#fff;
cursor:pointer;
}
em {
font-size:30px;
font-style:normal;
color:red;
}
</style>
</head>
<body>
<div class="myBox">
<ul class="cj2">
<li>1</li>
</ul>
<div class="text">
<div class="bt bt2">点我抽奖</div>
<div class="jg jg2">中奖者为"<em></em>"号</div>
</div>
</div><script>
//by zyp
;(function($, window, document, undefined) {
var LuckDraw = function(ele, opt) {
this.$element = ele,
this.defaults = {
row: 4, //行
column: 4, //列
spacing: 0,
click: null,
time: 3,
end: function(e) {}
},
this.target,
this.options = $.extend({}, this.defaults, opt);
}
LuckDraw.prototype = {
init: function() {
var $this = this.$element;
var row = this.options.row;
var col = this.options.column;
var spacing = this.options.spacing;
var click = this.options.click;
var allNumber = 2 * (row + col) - 4;
var line = row - 2; //除去上下de行数
var length = $this.children('li').length;
var options = this.options;
if (length < allNumber) {
for (var i = length; i <= (allNumber - length); i++) {
$this.append("<li>" + (i + 1) + "</li>");
}
}
var children = $this.children('li');
var width = children.eq(0).width() || 0;
var height = children.eq(0).height() || 0;
//元素初始化
$this.css({
position: 'relative',
width: col * width + (col - 1) * spacing,
height: row * height + (row - 1) * spacing
});
children.css({
position: 'absolute'
});
if (line == 0) {
initOne();
} else {
initTwo();
}
//初始化函数
//此时分成4个部分，上、右、下、左
//上： 0 ~ col-1
//右： col ~ col+line
//下： col+line+1 ~ 2*col+line-1
//左： else
//如果只有两行
//此时分成4个部分，上、右、下、左
function initOne() {
children.each(function(index) {
if (index >= 0 && index <= (col - 1)) {
$(this).css({
top: 0,
left: index * width + index * spacing
});
} else {
$(this).css({
bottom: 0,
right: index % col * width
});
}
});
}
//如果大于两行
function initTwo() {
children.each(function(index) {
if (index >= 0 && index <= (col - 1)) {
$(this).css({
top: 0,
left: index * width + index * spacing
});
} else if (index >= col && index <= (col + line - 1)) {
$(this).css({
top: ((index + 1 - col)) * (height + spacing),
right: 0
});
} else if (index >= (col + line) && index <= (2 * col + line - 1)) {
$(this).css({
bottom: 0,
right: (index - ((col + line))) * (width + spacing)
});
} else {
$(this).css({
left: 0,
bottom: (index - (2 * col + line - 1)) * (height + spacing)
});
}
});
}
var target = $this.target || Math.floor(Math.random() * allNumber + 1); //目标，指定或随机
var ix = 0; //位置
var stop;
var flg = false; //抽奖是否正在运行
/*
加速度公式
v1 = v0 + a*t;注意加速度的v代表时间
此时的t可以我们自己定义，所以是常量，所以只需要求a的值
*/
var a = -25.0;
var v0 = 500.0;
var t = 0.0,
v;
var time = this.options.time * 1000; //匀速运行的时间，单位秒
$(click).on('click', function() {
if (!flg) {
flg = true;
target = $this.target || Math.floor(Math.random() * allNumber + 1);
speedUp();
} else {
return;
}
});
//加速
function speedUp() {
runner(ix);
if (v <= 50) {
clearTimeout(stop);
v = 50;
t = 0.0;
uniform(); //跳转到匀速
} else {
t++;
v = v0 + a * t;
stop = setTimeout(speedUp, v);
}
}
//匀速
function uniform() {
stop = setTimeout(uniform, v);
if (t == time / 50) {
clearTimeout(stop);
t = 0.0;
speedDown();
} else {
t++;
}
runner(ix);
}
//减速
function speedDown() {
var stop3 = setTimeout(speedDown, v);
if (v >= 500) {
v = 500;
if (ix == target - 1) {
clearTimeout(stop3);
options.end(target);
flg = false;
}
} else {
t++;
v = v - a * t;
}
runner(ix);
}
//ix++
function runner(i) {
children.removeClass('on').eq(ix).addClass('on');
i++;
if (i == allNumber) {
ix = 0;
} else {
ix = i;
}
}
},
setTarget: function(options) {
var $this = this.$element;
$this.target = options;
}
}
$.fn.myLuckDraw = function(options, target) {
var Ld = new LuckDraw(this, options);
Ld.setTarget(target);
Ld.init();
return this;
}
})(jQuery, window, document);
$(function() {
var tar = 5;
$('.cj2').myLuckDraw({
row: 3, //行
column: 5, //列
spacing: 5, //空隙
click: '.bt2', //点击触发
time: 3, //匀速运动的时间
end: function(e) {
//抽奖执行完毕的回调函数,参数e为获奖编号
//因为这里是指定的，所以e == 12
$('.jg2 em').text(e);
}
});
});</script>
</body>
</html>
图1
图2
图3
就爱UI - 分享UI设计的点点滴滴
年快乐
每当我们在元旦，年会的时刻，总是无法避免地出现抽奖环节。身为专业程序员的我们自然应当负起这份责任，确保这场抽奖活动能够顺利流畅地进行下去。然而，面对众多待完成的工作任务，我们恐怕又需要进一步延长加班时间来应对。请别担忧，在此，为您提供了一款卓越出色的现成抽奖网页，可用于此次年度盛典的抽奖环节中。首先，让我们共同欣赏一下实际应用表现吧！
抽奖效果
此页面所有实现均采用最基本的JavaScript、html和jQuery技术完成，无需使用任何框架，开箱即用。
参与抽奖的数据需要提前设定好，在 js 目录中，data.js 里，文件和结构如下：
人员数据
personArray.push({
id: 546,
image :"img/tx.png",
thumb_image :"img/tx.png",
name: "张三"
});每个数据都按此标准结构构建即可。img 可以使用默认的， 也可以自行提供照片，id 需要随机指定一个数字，保证不与列表内的其他数据相同即可。设置新数据后刷新后就能使用。
现有的功能里没有作弊选项（不能设置必中项），而且一个人可以重复多次中奖，因此需要添加以下内容来扩展。
# 编辑lucy.js
# 在Obj 对象下定义两个变量
Obj.writeList = [0] # 用于存放白名单列表
Obj.hasLuck = [] # 用于记录已中奖下标
# 新增去重函数
function doRepeatResult(num){
console.log(Obj.hasLuck.length, personArray.length)
if(Obj.hasLuck.includes(num)){
console.log('存在重复中奖, 重新抽奖', num )
num = num - 1
if(num < 0){
num = num + personArray.length
}
if(Obj.hasLuck.length >= personArray.length){
return 0
}
return doRepeatResult(num)
}
return num
}
# 重写中奖随机函数
function randomLuckyArr() {
Obj.luckyResult = [];
for (var i = 0; i < Obj.luckyNum; i++) {
var random = Math.floor(Math.random() * personArray.length);
if (Obj.luckyResult.indexOf(random) == -1) {
if(Obj.writeList.length > 0 && Obj.hasLuck.length > 2){
random = Obj.writeList[0]
random = doRepeatResult(random)
Obj.luckyResult.push(random)
Obj.writeList.shift()
} else {
random = doRepeatResult(random)
Obj.luckyResult.push(random)
}
Obj.hasLuck.push(random)
} else {
i--;
}
console.log("已中奖下标", Obj.hasLuck)
}
}在上述代码中， 提供一个去重函数，并使用递归调用，保证每次数据都做去重校验。如果数据有重复，则使用当前下标减一，如果小于 0 则，直接将下标调到最大，如果所有人都中奖了， 则始终返回第一个人的结果。
在randomLuckyArr 中， 则调用去重函数，并将每次中奖的数据都保存到 hasLuck 中。
对于需要暗箱的内容的内容则在luckyResult.push 之前，写好相应的逻辑即可，如上代码中，就是抽 3 回后保证第 4 回，中奖的人为writeList 中的（暗箱虽好，可不要贪杯[灵光一闪]）。
有需要的朋友请来个三连获取。
#文章首发挑战赛#
#头条创作挑战赛#
#挑战30天在头条写日记#
#我的2023年终总结#
*请认真填写需求信息，我们会在24小时内与您取得联系。
