<!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>XM 幸运抽奖</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/wall.css">
<style type="text/css">
body, html {
width: 100%;
height: 100%;
}
.result {
position: absolute;
height: 320px;
width: 100%;
left: 0;
top: 50%;
margin-top: -160px;
text-align: center;
padding: 10px;
display: none;
}
.result span {
display: inline-block;
font-size: 25px;
width: 150px;
background: #fff;
line-height: 30px;
color: #000;
margin: 5px;
border-radius: 10px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
padding: 10px 0;
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0;
border: none;
}
button {
overflow: visible;
}
button, select {
text-transform: none;
}
button, html input[type=button], input[type=reset], input[type=submit] {
-webkit-appearance: button;
cursor: pointer;
}
.pure-button {
display: inline-block;
zoom: 1;
line-height: normal;
white-space: nowrap;
vertical-align: middle;
text-align: center;
cursor: pointer;
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.pure-button {
font-family: inherit;
font-size: 100%;
padding: .5em 1em;
color: #444;
color: rgba(0, 0, 0, .8);
border: 0 rgba(0, 0, 0, 0);
background-color: #E6E6E6;
text-decoration: none;
border-radius: 2px;
}
.pure-button:focus {
outline: 0
}
.pure-button-hover, .pure-button:hover, .pure-button:focus {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, .05)), to(rgba(0, 0, 0, .1)));
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .1));
background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
background-image: linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
}
.button-success, .button-error, .button-warning, .button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65);
}
.button-error {
background: rgb(202, 60, 60);
}
.button-warning {
background: rgb(223, 117, 20);
}
.button-secondary {
background: rgb(66, 184, 221);
}
.tools {
position: absolute;
bottom: 20px;
right: 20px;
text-align: center;
}
.tools .pure-button {
display: inline-block;
margin: 5px;
padding: 10px 0;
text-align: center;
width: 50px;
}
.mask {
-webkit-filter: blur(5px);
filter: blur(5px);
}
#main {
-webkit-transition: all 1s;
transition: all 1s;
}
.result-btn {
margin-top: 20px;
text-align: right;
margin-right: 30px;
text-decoration: none;
color: white;
}
.inbox {
position: absolute;
height: 300px;
width: 600px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
background-color: white;
z-index: 99999;
}
</style>
</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="inbox" class="inbox" style="display: none;">
<div class="form-group">
<label>参与抽奖人员名单：</label>
<textarea class="form-control" rows="9" id="intxt" placeholder="请输入参与抽奖的人员名单，每行代表一名人员，可从excel中直接拷贝"></textarea>
</div>
<div class="form-group">
<div class="form-inline">
<button class="btn btn-success" onclick="update()">更新</button>
<button class="btn btn-info" onclick="document.getElementById('inbox').style.display='none'">取消</button>
</div>
</div>
</div>
<div id="tools" class="tools">
<button v-for="value in btns" @click="onClick(value)" class="pure-button" :class="{ 'button-error': selected == value}">{{value}}</button>
<button class="pure-button" @click="toggle" :class="{'button-secondary': !running,
'button-success': running}">{{running?'停!':'开始'}}
</button>
<button class="pure-button button-warning" @click="reset">重置</button>
<button @click="document.getElementById('inbox').style.display=''" class="pure-button" style="width: 100px;">抽奖名单</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">
var choosed = null;
var canvas = null;
function update() {
var userList = document.getElementById("intxt").value.split("\n");
member = [];
for (var i = 0; i < userList.length; i++) {
if(userList[i]!=null&&userList[i].trim()!=""){
member.push({"phone": "", "name": userList[i]})
}
}
init();
document.getElementById('inbox').s
抽奖H5仿soul首页星球旋转，可以自定义奖品名单，可以改成自定义中奖数量，中奖弹窗和中奖记录，只能中奖一次中奖后颜色变化，重置
需积分: 5 199 浏览量
2024-01-05
08:47:21
上传
评论
收藏 779KB RAR 举报
Soul球旋转转圈抽奖.rar （12个子文件） 
result.html 3KB
js 
zepto.js 67KB vue.js 85KB tagcanvas.js 60KB member.js 21KB img 
icon-wall.jpg 311KB
title.png 412KB btn_exit.png 3KB css wall.css 5KB bootstrap.min.css 119KB reset.css 975B index.html 13KB资源评论
