用html和js做的抽獎效果僅僅是一個效果哦

單的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>

.0版本的時候沒有前端頁面，會使這個系統看起來很簡陋，但由于自己前端水平實在有限，所以在github上找了一個抽獎的前端，直接套用一下。抽獎也改用前端實現，只有抽獎名單和中間名單使用了后臺。

跨域處理

引入前端界面的同時，引入了另一個問題：跨域！

什么是跨域呢？

出于瀏覽器的同源策略限制。同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響?？梢哉fWeb是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。同源策略會阻止一個域的javascript腳本和另外一個域的內容進行交互。所謂同源（即指在同一個域）就是兩個頁面具有相同的協議（protocol），主機（host）和端口號（port）

簡單來說就是當一個請求url的協議、域名、端口三者之間任意一個與當前頁面url不同即為跨域。

origins = [
    "*",
    "http://localhost",
    "http://localhost:8080",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

新增數據上傳接口

新增數據model，中獎描述，還有中獎名單，因為沒有其他業務邏輯，這里就直接通過pymysql 插入數據，不做其他的處理了



class Info(BaseModel):
    description: str
    name: str


@app.post("/push/lottery")
async def push_lottery(info: Info):


    db = pymysql.connect(host='localhost', port=3306, user='root', password='root', database='test_data_platform',
                         charset='utf8')
    cursor = db.cursor()
    sql = "INSERT INTO user_info(name,description)values('%s','%s')" % (info.description, info.name.rstrip(','))
    try:
        cursor.execute(sql)
        db.commit()
    except Exception as e:
        db.rollback()
        print("push error:"+e)
    db.close()
    return {"message": "push success"}

前端頁面

github代碼地址，上面有這個動態效果的源代碼https://github.com/fouber/lottery ，將其中的部分代碼替換為請求后臺數據

member.js

window.member;
$(document).ready(function(){
  $.get("http://127.0.0.1:8000/lottery/employees",function(data,status){
    localStorage.setItem('member', JSON.stringify(data.data));
  });

});

前端顯示界面

<!DOCTYPE html>
<html>
<head>
    <meta name="screen-orientation" content="portrait">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
    <title>年會抽獎小程序</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/wall.css">
   
</head>
<body>
<div id="main" class="wall">
    <div class="result-btn">
       <a href="./result.html" target="_blank">獲獎名單</a>
    </div>
</div>
<div id="result" class="result">
</div>

<div id="tools" class="tools">
       <form-item label="抽獎人數">
        <input type="textarea" v-model="btns"></input>
      </form-item>
    <button
       class="pure-button"
       @click="toggle"
       :class="{'button-secondary': !running,
               'button-success': running}">{{running?'停!':'開始'}}</button>
    <button class="pure-button button-warning" @click="reset">重置</button>
</div>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/tagcanvas.js"></script>
<script type="text/javascript" src="js/member.js"></script>
<script type="text/javascript">
    (function(){
        var employees = JSON.parse(localStorage.getItem('member'))
        var choosed = JSON.parse(localStorage.getItem('choosed')) || {};
        // 轉動效果
        var speed = function(){
            return [0.1 * Math.random() + 0.01, -(0.1 * Math.random() + 0.01)];
        };
        var getKey = function(item){
            return item.name + '-' + item.phone;
        };
        var createHTML = function(){
            var html = [ '<ul>' ];
                employees.forEach(function(item, index){
                item.index = index;
                var key = getKey(item);
                var color = choosed[key] ? 'yellow' : 'white';
                html.push('<li><a href="#" style="color: ' + color + ';">' + item.name + '</a></li>');
            });
            html.push('</ul>');
            return html.join('');
        };
        var lottery = function(count){
            var list = canvas.getElementsByTagName('a');
            var color = 'yellow';
            var names = "";
            var ret = employees
                .filter(function(m, index){
                    m.index = index;
                    return !choosed[getKey(m)];
                })
                .map(function(m){
                    return Object.assign({
                      score: Math.random()
                    }, m);
                })
                .sort(function(a, b){
                    return a.score - b.score;
                })
                .slice(0, count)
                .map(function(m){
                  choosed[getKey(m)] = 1;
                  list[m.index].style.color = color;
                  names = m.name +","+names
                  return m.name + '<br/>'; 
                });
            localStorage.setItem('choosed', JSON.stringify(choosed));
            var info = {"name":names,"description":"一等獎"}
            $.ajax({
                url:'http://127.0.0.1:8000/push/lottery',
                type:'post',
                dateType:'json',
                headers:{
                    'Content-Type':'application/json'
                },
                data:JSON.stringify(info)
            })
            return ret;
        };
        var canvas = document.createElement('canvas');
        canvas.id = 'myCanvas';
        canvas.width = document.body.offsetWidth;
        canvas.height = document.body.offsetHeight;
        document.getElementById('main').appendChild(canvas);
        new Vue({
            el: '#tools',
            data: {
                selected: 30,
                running: false,
                btns: ''
            },
            mounted () {
                canvas.innerHTML = createHTML();
                TagCanvas.Start('myCanvas', '', {
                    textColour: null,
                    initial: speed(),
                    dragControl: 1,
                    textHeight: 14
                });
            },
            methods: {
                reset: function(){
                    if(confirm('確定要重置么？所有之前的抽獎歷史將被清除！')){
                        localStorage.clear();
                        location.reload(true);
                    }
                },

                toggle: function(){
                    if(this.running){
                        TagCanvas.SetSpeed('myCanvas', speed());
                        var ret = lottery(this.btns);
                        if (ret.length === 0) {
                            $('#result').css('display', 'block').html('<span>已抽完</span>');
                            return
                        }
                        $('#result').css('display', 'block').html('<span>' + ret.join('</span><span>') + '</span>');
                        TagCanvas.Reload('myCanvas');
                        setTimeout(function(){
                            localStorage.setItem(new Date().toString(), JSON.stringify(ret));
                            $('#main').addClass('mask');
                        }, 300);
                    } else {
                        $('#result').css('display', 'none');
                        $('#main').removeClass('mask');
                        TagCanvas.SetSpeed('myCanvas', [5, 1]);
                    }
                    this.running = !this.running;
                }
            }
        });
    })();
</script>
</body>
</html>

抽獎效果

結果記錄

上傳抽獎記錄到數據庫

前后端所有代碼已上傳 https://github.com/627886474/lottery

套系統開發沒有任何難度，唯一需要注意高并發下性能和數據問題,靜態資源放到cdn，避免帶寬成為瓶頸,把mysql操作變成redis操作，解決io問題。

需求出現

年會將近，而年會抽獎環節必不可少，但是抽獎系統卻還沒有。所以某一天，PM走過來說：小伙，手頭的需求修完成了吧！在年會開始之前必須做出一個抽獎系統。這個系統很簡單，后臺可以設置總金額，然后每個用戶可以獲得的金額范圍，金額派完則顯示很遺憾沒有中獎，還要設置抽獎活動時間。

需求分析

一看這東西，就覺得非常簡單。最簡單的一個方案，活動時間放在一個數據表，總金額和已經使用金額存放在一個表，已經派送的日志一個表。后臺提供一個接口，客戶端手動點擊按鈕，則發送一個請求。賬號體系直接使用微信的oauth，接口首先判斷活動有沒有開始，如果開始則隨機一個金額，然后判斷如果派送該金額會不會超預算，如果不超預算，則調用微信的現金接口發放零錢。

并發問題

這個簡單方案存在一個致命的問題，就是并發下，可能導致超預算的問題。如果采用加鎖的方式，面對1000多員工同時請求，系統100%癱瘓。（因為抽獎系統的服務器是最普通的1核1G 1M帶寬的服務器）

那么不加鎖的情況，又能如何避免并發造成的派送超過預算的問題呢？一個簡單的辦法，把分配派送金額的操作從并行變成串行。那么就需要異步的編程方法。最簡單的處理方法，把任務寫入mysql，然后啟動一個獨立的進程來一個任務一個任務的串行處理。異步的話，客戶端如何知道服務器已經處理了呢？最簡單就是采用輪詢的方法了，客戶端每隔幾秒就請求服務器一次。

性能問題

由于抽獎是短時間大量用戶請求的，如果直接讓請求落到mysql，類似DDOS攻擊,一般的數據庫是扛不住的。而redis是1種基于內存的高并發NoSQL,在很多公司廣泛使用,由于其性能非常好，并且其豐富的數據接口完全可以勝任抽獎任務需求。這個時候，你可能有這樣的疑問,我們的系統設計是怎么樣的呢？
抽獎系統相關配置存儲在redis的一個key值，直接使用json格式
客戶端請求的時候判斷，時間是否在活動時間范圍內
客戶端請求如果時間在活動范圍內，則把用戶添加到一個redis集合，用于防止用戶重復請求，只有第一次請求才會添加到集合后，再添加到一個redis列表。
后臺一個獨立的進程，從redis列表pop第一位用戶，然后分配一個金額，然后把金額和用戶信息壓入另一個redis列表B，同時寫入redis的hash結構，標示用戶獲得多少現金。一直循環該過程。
后臺另一個獨立的進程，從redis列表B pop第一位用戶，然后調用發送現金接口，一直循環該過程。
客戶端不停輪詢獲取用戶金額的接口，該接口從哪個hash結構獲取用戶金額，然后沒有數據，則告訴客戶端若干秒后再次請求。

前端優化

由于參與活動的人數較多，而且服務器是放在外網的，所以需要考慮帶寬的問題。
第一步，把靜態資源放到cdn。
第二步，抽獎頁面靜態化，同時也放到cdn，這樣子服務器只需要承受用戶請求和登錄即可。
第三步，由于采用了微信登錄，所以登錄系統采用一個獨立的進程，并且使用異步框架來處理高并發。
第四步，前端發送請求隊列化處理，避免用戶不停點擊，造成大量請求。

本文轉自：https://www.linuxprobe.com/develop-company.html

在線咨詢

上一篇：javascript反轉字符串的方法有哪些？
下一篇：分享 15 個 HTML 新特性，大多數人可能不知道，建議盡早使用上

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

用html和js做的抽獎效果僅僅是一個效果哦

跨域處理

新增數據上傳接口

前端頁面

抽獎效果

您的項目需求