console
let all_page;
let right_ul = document.querySelector(".body .right .r_body ul");
let page = 1;
let dask = document.querySelector(".dask");
let start_btn = document.querySelector(".start_btn");
_ajax("http://student.0melon0.cn/index/wheel/get_top_draw_record_list",function(res){
top_run(res);
});
function top_run(obj_arr) {
let top_ul = document.querySelector(".box .top ul");
let now_index = 0;
top_ul.innerHTML = `
<li>
<div class="img_box">
<img src="https://s1.ax1x.com/2020/10/20/BSCs7n.png" alt="">
</div>
<span>恭喜</span>
<span class="phone">${obj_arr[now_index].phone.replace(obj_arr[now_index].phone.slice(3,7),"****")}</span>
<span>用户抽中</span>
<span class="prize_name">${obj_arr[now_index].prize_name}</span>
</li>
<li>
<div class="img_box">
<img src="https://s1.ax1x.com/2020/10/20/BSCs7n.png" alt="">
</div>
<span>恭喜</span>
<span class="phone">${obj_arr[++now_index].phone.replace(obj_arr[++now_index].phone.slice(3,7),"****")}</span>
<span>用户抽中</span>
<span class="prize_name">${obj_arr[++now_index].prize_name}</span>
</li>
`
let timer = setInterval(function () {
top_ul.style.transform = `translateX(-${100}%)`;
top_ul.addEventListener("transitionend", function () {
top_ul.style.transition = 'none';
top_ul.removeChild(top_ul.firstElementChild);
top_ul.style.transform = `translateX(0%)`;
getComputedStyle(top_ul).transition;
top_ul.style.transition = '';
(++now_index == obj_arr.length + 1) && (now_index = 0);
top_ul.innerHTML += `
<li>
<div class="img_box">
<img src="https://s1.ax1x.com/2020/10/20/BSCs7n.png" alt="">
</div>
<span>恭喜</span>
<span class="phone">${obj_arr[now_index].phone.replace(obj_arr[now_index].phone.slice(3,7),"****")}</span>
<span>用户抽中</span>
<span class="prize_name">${obj_arr[now_index].prize_name}</span>
</li>
`
}, {
once: true
})
}, 2000)
}
create();
function create() {
_ajax(`http://student.0melon0.cn/index/wheel/get_draw_record_list?page=${page}&page_num=20`, function (res) {
all_page = res.all_page;
res.draw_record_list.forEach(function (obj, index, arr) {
right_ul.innerHTML += `
<li>
<span>${date_change(obj.draw_time_stamp)}</span>
<span>${obj.prize_name}</span>
</li>
`
})
page++;
});
}
function date_change(stamp) {
var date = new Date(Number(stamp) * 1000);
let Y = date.getFullYear() + '-';
let M = String(date.getMonth() + 1).padStart(2, '0') + '-';
let D = date.getDate() + ' ';
let h = date.getHours() + ':';
let m = String(date.getMinutes()).padStart(2, '0');
return (Y + M + D + h + m);
}
right_ul.addEventListener("scroll", function () {
if (page <= all_page && right_ul.scrollHeight == (right_ul.scrollTop + right_ul.clientHeight)) {
create();
}
})
_ajax("http://student.0melon0.cn/index/wheel/get_prize_list", function (res) {
res.prize_list.forEach(function (item, index) {
dask.innerHTML +=
`
<li style="transform: rotate(${360/res.prize_list.length*index}deg) skew(${360/res.prize_list.length}deg);">
<div class="item_box" style="transform: skew(-${360/res.prize_list.length}deg) translate(-50%) rotate(-75deg);">
<p>${item.name}</p>
<div class="imgBox" style="width:60%;margin:0 auto;padding-top:5px;">
<img style="width:100%" src="${item.diagram}">
</div>
</div>
</li>
`;
})
});
start_btn.addEventListener("click", function () {
_ajax("http://student.0melon0.cn/index/wheel/draw?phone=13800138000", function (res) {
let dask_deg = 360 / dask.childElementCount;
dask.style.transform = `translate(-50%, -50%) rotateZ(${((dask_deg/2)*3-(res.bingo_prize_id-1)*dask_deg)+3600}deg)`
dask.addEventListener("transitionend", function () {
dask.style.transition = 'none';
dask.style.transform = `translate(-50%, -50%) rotateZ(${((dask_deg/2)*3-(res.bingo_prize_id-1)*dask_deg)}deg)`
getComputedStyle(dask).transition;
dask.style.transition = '';
}, {
once: true
})
})
})
function _ajax(_url, _callback, _method = "GET") {
let xhr = new XMLHttpRequest();
xhr.open(_method, _url);
xhr.send();
xhr.addEventListener("readystatechange", function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
_callback(JSON.parse(xhr.responseText).data);
} else {
alert("未知错误")
}
}
})
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<title>轮盘抽奖</title>
</head>
<body>
<div class="web">
<div class="box">
<div class="top">
<ul>
</ul>
</div>
<div class="body">
<div class="left">
<div class="box _center">
<ul class="dask _center">
</ul>
<div class="start_btn _center">
<img src="https://s1.ax1x.com/2020/10/20/BS8lPf.png" alt="">
</div>
</div>
</div>
<div class="right">
<div class="r_top">
今天还有
<span>4</span>
次抽奖机会
</div>
<div class="r_body">
<div class="head">
<span>抽奖时间</span>
<span>抽奖结果</span>
</div>
<ul>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
html,
body {
height: 100%;
background-color: #161535;
}
.web {
height: 100%;
position: relative;
>.box {
width: 970px;
position: absolute;
top: 15%;
left: 50%;
transform: translateX(-50%);
.top,
.left,
.right {
background-color: #201a48;
}
.top {
width: 100%;
height: 40px;
overflow: hidden;
ul{
height: 100%;
white-space: nowrap;
font-size: 0;
transition: all .5s ease;
li{
height: 100%;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
.img_box{
width: 14px;
img{
width: 100%;
}
}
span{
font-size: 14px;
font-weight: bold;
font-family: '微软雅黑';
color: white;
margin: 0 5px;
}
}
}
}
.body{
margin-top: 30px;
width: 100%;
height: 600px;
display: flex;
justify-content: space-between;
.left{
flex-basis: 67%;
position: relative;
.box{
width: 422px;
height: 422px;
background-color: #ffde8d;
border-radius: 50%;
.dask{
width: 388px;
height: 388px;
border: 4px solid #fe8b36;
box-sizing: border-box;
border-radius: 50%;
box-shadow: 0 0 5px 5px #ffa131;
overflow: hidden;
transform : translate(-50%, -50%);
transition: all 1s cubic-bezier(.65,-0.05,.46,1.2);
li{
width: 190px;
height: 190px;
border: 1px solid #fed07c;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
transform-origin: right bottom;
.item_box{
position: absolute;
left: 50%;
bottom: 2px;
text-align: center;
padding-left: 27px;
}
}
li:nth-child(2n){
background-color: #ffe7c0;
}
li:nth-child(2n+1){
background-color: pink;
}
}
}
}
.right{
height: 100%;
flex-basis: 29%;
display: flex;
flex-direction: column;
align-items: center;
font-family: '微软雅黑';
.r_top{
background-color: #4e3eb4;
width: 55%;
padding: 10px;
margin: 20px 0;
text-align: center;
font-size: 14px;
color: white;
border-radius: 50px;
position: relative;
span{
color: #fbb234;
}
&::before,&::after{
content: '';
display: block;
background-color: #4e3eb4;
width: 8px;
height: 8px;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
&::before{
left: -10%;
}
&::after{
right: -10%;
}
}
.r_body{
flex-grow: 1;
.head{
display: flex;
justify-content: space-between;
padding: 0 30px 0 40px;
span{
color: #8575e2;
font-size: 15px;
font-weight: bold;
}
}
ul{
height: 500px;
overflow-y: scroll;
&::-webkit-scrollbar{
width: 15px;
}
&::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(41,34,86,1);
}
li{
padding: 15px 0;
display: flex;
justify-content: space-between;
span{
margin: 0 20px;
color: #fff;
font-size: 14px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}
}
}
}
._center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}