前言：
目前你们对“css抽奖”大概比较着重，各位老铁们都想要学习一些“css抽奖”的相关知识。那么小编也在网络上收集了一些对于“css抽奖””的相关资讯，希望大家能喜欢，小伙伴们快快来了解一下吧！1.0版本的时候没有前端页面，会使这个系统看起来很简陋，但由于自己前端水平实在有限，所以在github上找了一个抽奖的前端，直接套用一下。抽奖也改用前端实现，只有抽奖名单和中间名单使用了后台。
跨域处理
引入前端界面的同时，引入了另一个问题：跨域！
什么是跨域呢？
出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）
简单来说就是当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
origins = [ "*", ";, ";,]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代码地址，上面有这个动态效果的源代码 ，将其中的部分代码替换为请求后台数据
member.js
window.member;$(document).ready(function(){ $.get(";,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:';, 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>抽奖效果抽奖效果
结果记录
上传抽奖记录到数据库
前后端所有代码已上传
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css抽奖
