整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
單的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小時內與您取得聯系。
