作为洛克萨斯青铜玩家,我沉迷于抽奖无法自拔,自认技术菜,就想玩玩好看的皮肤,但是马爸爸抽奖五块一次,抽不起咋整,作为程序猿打算手写一个满足自己的氪金,此项目用的全是原生js,项目思路如下:
把皮肤路径当做数组元素,利用随机数实现随机抽皮肤效果,然后再把路径的图片添加到我们的展示区,另外加了一些皮肤数量的数据,和领取(点击领取删除该图片),代码如下,线上体验网址为,可以进网站试试
http://101.200.166.211/ye/web/chou/
项目初始化文件夹,文件夹里放皮肤图,图片名要与数组对应
index代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
background: url(./抽奖/bg4De2.jpg) no-repeat;
background-size: 100%;
}
a {
text-decoration: none;
color: skyblue;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #eee;
border-radius: 0;
}
::-webkit-scrollbar-thumb {
border-radius: 7px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: skyblue;
}
.b {
width: 100%;
height: 420px;
margin-bottom: 73px;
}
.b>button {
margin-left: 255px;
margin-top: 5px;
}
.box {
float: right;
width: 200px;
height: 400px;
border: 1px solid rgb(247, 237, 237);
margin: 22px 258px 10px 100px;
overflow: hidden;
}
.box1 {
float: left;
width: 660px;
height: 350px;
border: 1px solid rgb(247, 237, 237);
background-color: transparent;
margin: 22px 0 0 25px;
}
.pifu {
width: 200px;
height: 300px;
background-color: transparent;
}
button {
width: 200px;
height: 50px;
background: url(./抽奖/btn2.jpg);
cursor: pointer;
}
img {
width: 200px;
height: 300px;
vertical-align: middle;
}
.box1 img {
width: 120px;
height: 165px;
margin: 5px 7px 5px 5px;
}
.user {
width: 340px;
height: 35px;
margin: auto;
margin-top: 80px;
}
.user span {
color: #fff;
}
.user span:nth-child(5) {
color: red;
background-color: rgba(255, 255, 255, .08);
}
.nav {
width: 100px;
height: 30px;
background-color: rgba(255, 255, 255, .08);
color: #fff;
line-height: 30px;
text-align: center;
margin: auto;
}
.jp {
position: relative;
width: 1068px;
height: 932px;
border: 1px solid rgb(248, 242, 242);
margin: 20px auto;
overflow: auto;
}
.jp div {
position: relative;
display: inline-block;
width: 200px;
height: 300px;
background-color: pink;
margin: 0 10px 40px 0;
}
.jp div a {
display: block;
position: absolute;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
background-color: pink;
color: #000;
text-decoration: none;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
}
.logo {
position: absolute;
top: 30px;
left: 0;
width: 200px;
height: 72px;
}
.logo img {
width: 200px;
height: 72px;
}
h1 {
position: absolute;
top: 25px;
right: 40px;
color: #fff;
}
.allget {
position: absolute;
top: 591px;
right: 96px;
z-index: 1;
}
p {
position: absolute;
top: 591px;
right: 320px;
color: #fff;
}
p span {
background-color: rgba(255, 255, 255, .08);
color: red;
}
.kz {
display: inline-block;
width: 280px;
height: 18px;
}
.user .xx {
cursor: pointer;
color: skyblue;
}
.user .zx {
color: blue;
cursor: pointer;
}
.dcp {
position: fixed;
display: none;
top: 100px;
left: 460px;
width: 300px;
height: 450px;
z-index: 100;
}
.dcp img {
width: 100%;
height: 100%;
}
.dcp .cc1 {
position: absolute;
top: 0;
right: -20px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
cursor: pointer;
background-color: #fff;
}
.cc2 {
position: fixed;
top: 70px;
right: 180px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
cursor: pointer;
z-index: 100;
display: none;
background-color: #fff;
}
.dcp p {
position: absolute;
top: -75px;
left: 0;
width: 100%;
text-align: center;
margin: 0;
font-size: 45px;
color: #fff;
}
.gxn {
position: fixed;
top: 5px;
left: 0;
width: 100%;
text-align: center;
margin: 0;
z-index: 100;
display: none;
font-size: 45px;
color: #fff;
}
.lcp {
position: fixed;
top: 70px;
left: 165px;
width: 900px;
height: 500px;
z-index: 100;
display: none;
}
.lcp img {
width: 178px;
height: 245px;
margin: 0 2px 5px 0;
}
.mask {
position: absolute;
display: none;
top: 0;
left: 0;
width: 1263px;
height: 1612px;
background-color: rgba(0, 0, 0, .7);
z-index: 50;
}
</style>
</head>
<body>
<div class="mask"></div>
<div class="dcp">
<img src="" alt="" class="dcpp">
<div class="cc1">X</div>
<p>恭喜您获得</p>
</div>
<div class="lcp"></div>
<p class="gxn">恭喜您获得</p>
<div class="cc2">X</div>
<div class="logo">
<img src="./抽奖/logo.png" alt="">
</div>
<h1>青青子衿,悠悠我心</h1>
<div class="user">
<span>账号:</span>
<div class="kz"> <span class="xx">登录</span> <span class="zx"></span></div> <br> <span>您的余额为:</span><span
id="xs"></span><span>元</span>
</div>
<div class="b">
<div class="box">
<div class="pifu">
<img src="" alt="" id="pifu">
</div>
<button id="btn">抽奖</button>
<button id="cz">充值</button>
</div>
<div class="box1"></div>
<button id="btn10">十连抽</button>
</div>
<button id="allget" class="allget">全部领取</button>
<div class="nav">我的奖品</div>
<p>暂存箱皮肤数:<span id="gs">0个</span></p>
<div class="jp"></div>
<script>
var arr = ['./抽奖/1.png', './抽奖/2.png', './抽奖/3.png', './抽奖/4.png', './抽奖/5.png', './抽奖/6.png', './抽奖/7.png', './抽奖/8.png', './抽奖/9.png', './抽奖/10.png', './抽奖/11.png', './抽奖/12.png', './抽奖/13.png', './抽奖/14.png', './抽奖/15.png', './抽奖/16.png', './抽奖/17.png', './抽奖/18.png', './抽奖/19.png', './抽奖/20.png', './抽奖/21.png', './抽奖/22.png', './抽奖/45.png', './抽奖/46.png', './抽奖/47.png', './抽奖/48.png', './抽奖/49.png', './抽奖/50.png', './抽奖/23.png', './抽奖/24.png', './抽奖/25.png', './抽奖/26.png', './抽奖/27.png', './抽奖/28.png', './抽奖/29.png', './抽奖/30.png', './抽奖/31.png', './抽奖/32.png', './抽奖/33.png', './抽奖/34.png', './抽奖/35.png', './抽奖/36.png', './抽奖/37.png', './抽奖/38.png', './抽奖/39.png', './抽奖/40.png', './抽奖/41.png', './抽奖/42.png', './抽奖/43.png', './抽奖/44.png',]
var pifu = document.getElementById('pifu');
var btn = document.getElementById('btn');
var cz = document.getElementById('cz');
var xs = document.getElementById('xs');
var jp = document.querySelector('.jp');
var shi = document.getElementById('btn10');
var shibox = document.querySelector('.box1')
var allget = document.getElementById('allget');
var gs = document.getElementById('gs');
var xx = document.querySelector('.xx');
var zx = document.querySelector('.zx');
var dcp = document.querySelector('.dcp');
var lcp = document.querySelector('.lcp');
var dcpp = document.querySelector('.dcpp');
var cc1 = document.querySelector('.cc1');
var cc2 = document.querySelector('.cc2');
var mask = document.querySelector('.mask');
var gxn = document.querySelector('.gxn');
var x = new URLSearchParams(location.search)
var qqh = x.get('qqh');
var user = x.get('user');
var daqu = x.get('daqu');
if (location.search != '') {
xx.innerHTML = qqh + '(' + user + ')' + '大区:' + daqu;
zx.innerHTML = '注销';
}
xx.addEventListener('click', function () {
if (xx.innerHTML == '登录') {
location.href = './login.html';
} else {
xx.onclick = null;
}
})
zx.addEventListener('click', function () {
location.href = './index.html';
})
var yue = 0;
xs.innerHTML = yue;
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var re = getRandom(0, 49);
cz.onclick = function () {
if (xx.innerHTML == '登录') {
alert('请登录');
} else {
var cq = +prompt('请输入充值金额');
if (cq > 0) {
yue += cq;
alert('充值成功,充值金额' + cq + '元');
xs.innerHTML = yue;
} else {
alert('充值失败')
}
}
}
btn.onclick = function () {
if (xx.innerHTML == '登录') {
alert('请登录');
} else {
if (yue == 0) {
alert('您的余额不足,请充值,一元抽一次');
} else if (yue >= 1) {
pifu.src = arr[re];
dcp.style.display = 'block';
dcpp.src = arr[re];
mask.style.display = 'block';
cc1.addEventListener('click', function () {
dcp.style.display = 'none';
mask.style.display = 'none';
})
yue = yue - 1;
xs.innerHTML = yue;
var wjd = document.createElement('div');
jp.appendChild(wjd);
var wjp = document.createElement('img');
wjp.src = arr[re];
wjd.innerHTML = '<a href="javascript:;" >领取</a>';
wjd.appendChild(wjp);
re = getRandom(0, 49);
var numall = document.querySelectorAll('a');
gs.innerHTML = numall.length + '个';
}
var del = document.querySelectorAll('a');
for (i = 0; i < del.length; i++) {
del[i].onclick = function () {
this.parentNode.remove();
alert('领取成功')
var numall = document.querySelectorAll('a');
gs.innerHTML = numall.length + '个';
}
}
}
}
var flag = 0;
shi.onclick = function () {
if (xx.innerHTML == '登录') {
alert('请登录');
} else {
if (yue < 10) {
alert('余额不足十元,请充值');
} else {
if (flag == 1) {
for (j = 0; j < 10; j++) {
shibox.removeChild(shibox.children[0]);
}
}
for (i = 0; i < 10; i++) {
yue = yue - 1;
xs.innerHTML = yue;
var wjpp = document.createElement('img');
wjpp.src = arr[re];
shibox.appendChild(wjpp);
var wjd = document.createElement('div');
jp.appendChild(wjd);
var wjp = document.createElement('img');
wjp.src = arr[re];
wjd.innerHTML = '<a href="javascript:;" >领取</a>';
wjd.appendChild(wjp);
var wjppp = document.createElement('img');
wjppp.src = arr[re];
gxn.style.display = 'block';
lcp.style.display = 'block';
lcp.appendChild(wjppp);
mask.style.display = 'block';
cc2.style.display = 'block';
cc2.addEventListener('click', function () {
lcp.style.display = 'none';
mask.style.display = 'none';
cc2.style.display = 'none'
gxn.style.display = 'none';
for (j = 0; j < 10; j++) {
lcp.removeChild(lcp.children[0]);
}
})
re = getRandom(0, 49);
var numall = document.querySelectorAll('a');
gs.innerHTML = numall.length + '个';
}
flag = 1;
}
}
var del = document.querySelectorAll('a');
for (k = 0; k < del.length; k++) {
del[k].onclick = function () {
this.parentNode.remove();
alert('领取成功')
var numall = document.querySelectorAll('a');
gs.innerHTML = numall.length + '个';
}
}
}
allget.onclick = function () {
if (xx.innerHTML == '登录') {
alert('请登录');
} else {
var delall = document.querySelectorAll('a');
if (delall.length == 0) {
alert('暂存箱暂无皮肤');
} else {
for (k = 0; k < delall.length; k++) {
delall[k].parentNode.remove();
}
alert('全部领取成功');
}
gs.innerHTML = 0 + '个';
}
}
</script>
</body>
</html>
login代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 350px;
margin: 80px auto;
border: 1px solid #ccc;
padding: 0 80px;
box-sizing: border-box;
}
h1 {
text-align: center;
}
span {
display: inline-block;
width: 100px;
}
input {
width: 220px;
margin-bottom: 30px;
border: 1px solid #ccc;
}
.tj {
width: 200px;
height: 30px;
background-color: skyblue;
border: none;
margin: 50px auto;
margin-left: 80px;
color: #fff;
}
.nnn {
width: 0;
height: 0;
border: none;
}
</style>
</head>
<body>
<div class="box">
<h1>请登录</h1>
<form action="./index.html">
<input type="text" name="nn" class="nnn">
<div class="qq">
<span>QQ号:</span> <input type="number" required name="qqh" class="q">
</div>
<div class="username">
<span>用户名:</span> <input type="text" required name="user" class="w">
</div>
<div class="qu">
<span>大区:</span>
<select name="daqu">
<option value="艾欧尼亚">艾欧尼亚</option>
<option value="洛克萨斯">洛克萨斯</option>
<option value="黑色玫瑰">黑色玫瑰</option>
<option value="祖安">祖安</option>
<option value="男爵领域">男爵领域</option>
<option value="钢铁烈阳">钢铁烈阳</option>
</select>
</div>
<input type="submit" class="tj" value="立即登录">
</form>
</div>
<script>
var q = document.querySelector('.q');
var w = document.querySelector('.w');
var login = document.querySelector('.tj');
login.addEventListener('click', function () {
if (q.value == '' || w.value == '') {
alert('请输入账号信息');
} else {
location.href = "./index.html"
}
})
</script>
</body>
</html>