JavaScript實現的轉盤抽獎html頁面前端源碼

家好，今天給大家介紹一款，JavaScript實現的轉盤抽獎html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

點擊中間的開始按鈕，就可以轉動轉盤（圖2）

圖2

源碼完整，需要的朋友可以下載學習（圖3）

圖3

本源碼編碼：10165，需要的朋友，點擊下面的鏈接后，搜索10165，即可獲取。

就愛UI - 分享UI設計的點點滴滴

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

最近在頭條也是給小伙伴們送出3.8福利，由于是小用戶，頭條也沒有給出抽獎活動的功能，所以必須自己來一個，順道補充一下JS隨機數的小知識。結尾附上本次抽獎代碼，一次抽出中獎者，明天（3.8）12:00公布結果，也是第一次做出這樣的活動，感謝大家的支持。沒有參與的小伙伴還有一天時間，希望大家可以參與。

JavaScript生成隨機數, 來個抽獎活動

基礎知識

向上取整

Math.ceil();
// 示例
Math.ceil(1.5); // 2
Math.ceil(2.4); // 3

向下取整

Math.floor();
// 示例
Math.floor(1.2); // 1
Math.floor(0.5); // 0

四舍五入

Math.round();
// 示例
Math.round(1.2); // 1
Math.round(0.5); // 1

0.0 ~ 1.0 之間的一個偽隨機數?！景?不包含1】

Math.random(); // 0.8647578968666494

獲取從1到10的隨機整數

Math.ceil(Math.random()*10); // 取0的概率極小。

均衡獲取0到1的隨機整數

Math.round(Math.random());

均衡獲取0到9的隨機整數

Math.floor(Math.random()*10);

均衡獲取0到10的隨機整數

Math.round(Math.random()*10); // 其中獲取最小值0和最大值10的幾率少一半。因為結果在0~0.4 為0，0.5到1.4為1...8.5到9.4為9，9.5到9.9為10。所以頭尾的分布區間只有其他數字的一半。

生成[n,m]的隨機整數

函數功能：生成[n,m]的隨機整數。在js生成驗證碼或者隨機選中一個選項時很有用

//生成從minNum到maxNum的隨機數
function randomNum(minNum,maxNum){
 switch(arguments.length){
 case 1:
 return parseInt(Math.random()*minNum+1,10);
 break;
 case 2:
 return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
 break;
 default:
 return 0;
 break;
 }
}

解析

Math.random() 生成[0,1)的數，所以

Math.random()*5 生成{0,5)的數。

通常期望得到整數，所以要對得到的結果處理一下。

parseInt()，Math.floor()，Math.ceil()和Math.round()都可得到整數。

parseInt()和Math.floor()結果都是向下取整。

所以Math.random()*5生成的都是[0,4]的隨機整數。

所以生成[1,max]的隨機數，公式如下：

// max - 期望的最大值
parseInt(Math.random()*max,10)+1;
Math.floor(Math.random()*max)+1;
Math.ceil(Math.random()*max);

所以生成[0,max]到任意數的隨機數，公式如下：

// max - 期望的最大值
parseInt(Math.random()*(max+1),10);
Math.floor(Math.random()*(max+1));

所以希望生成[min,max]的隨機數，公式如下：

// max - 期望的最大值
// min - 期望的最小值
parseInt(Math.random()*(max-min+1)+min,10);
Math.floor(Math.random()*(max-min+1)+min);

3.8抽獎代碼

.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

在線咨詢

上一篇：html基礎標簽大全（網頁開發基礎）
下一篇：HTML基礎回顧

您的項目需求

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

整合營銷服務商