前言
先进行项目分析，把项目分成及格步骤
- 转盘
- 抽奖
- 中奖
- 登录注册
页面不能跳转，思路清晰，目标明确
一、转盘
- 可以用 Canvas 绘制转盘
- 可以用 CSS 绘制转盘
1. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东抽奖</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- 抽奖 -->
<div class="container">
<div class="reward">
<div class="option">
<div class="content">
<div>谢谢参与</div>
</div>
</div>
<div class="option">
<div class="content">
<div class="first">一等奖</div>
</div>
</div>
<div class="option">
<div class="content">
<div>谢谢参与</div>
</div>
</div>
<div class="option">
<div class="content">
<div class="second">二等奖</div>
</div>
</div>
<div class="option">
<div class="content">
<div>谢谢参与</div>
</div>
</div>
<div class="option">
<div class="content">
<div class="third">三等奖</div>
</div>
</div>
<div class="option">
<div class="content">
<div>谢谢参与</div>
</div>
</div>
<div class="option">
<div class="content">
<div class="prize">特等奖</div>
</div>
</div>
</div>
<div class="btn">开始抽奖</div>
</div>
</body>
</html>
2. css
/* 抽奖 */
.container{
width: 500px;
height: 500px;
background: red;
border-radius: 50%;
margin: 30px auto;
padding: 30px;
position: relative;
overflow: hidden;
}
.reward{
width: 500px;
height: 500px;
margin: 0 auto;
background: gray;
border-radius: 50%;
overflow: hidden;
position: relative;
box-shadow: 0 0 15px #000;
}
.option{
width: 250px;
height: 250px;
box-shadow: 0 0 1px #000 inset;
position: absolute;
transform-origin: right bottom 0;
-webkit-transform-origin: right bottom 0;
-moz-transform-origin: right bottom 0;
-ms-transform-origin: right bottom 0;
}
.option:nth-child(odd){
background: orange;
}
.option:nth-child(even){
background: orangered;
}
.option:nth-child(1) {
transform: rotate(0deg) skewY(45deg);/* 2D 旋转，定义沿着 Y 轴的 2D 倾斜旋转 */
}
.option:nth-child(2) {
transform: rotate(45deg) skewY(45deg);
}
.option:nth-child(3) {
transform: rotate(90deg) skewY(45deg);
}
.option:nth-child(4) {
transform: rotate(135deg) skewY(45deg);
}
.option:nth-child(5) {
transform: rotate(180deg) skewY(45deg);
}
.option:nth-child(6) {
transform: rotate(225deg) skewY(45deg);
}
.option:nth-child(7) {
transform: rotate(270deg) skewY(45deg);
}
.option:nth-child(8) {
transform: rotate(315deg) skewY(45deg);
}
.content {
width: 150px;
height: 200px;
transform-origin: center center 0;
transform: skewY(-45deg) rotate(-22.5deg) translate(10px, 70px);
-webkit-transform: skewY(-45deg) rotate(-22.5deg) translate(10px, 70px);
position: absolute;
right: 0;
bottom: 0;
text-align: center;
}
/* 开始抽奖 */
.btn {
position: absolute;
left: 240px;
top: 240px;
z-index: 5;
height: 70px;
width: 70px;
padding: 4px;
color: #fff899;
line-height: 60px;
font-size: 16px;
text-align: center;
background-color: lightcoral;
border-radius: 50%;
border: 1px solid red;
cursor: pointer;
}
.btn::after {
content: '';
position: absolute;
left: 19px;
top: -70px;
border-width: 40px 20px;
border-style: solid;
border-color: transparent;
border-bottom-color: lightpink;
}
二、抽奖
1. js 代码（jQuery）
在 html 中导入 jQuery 文件$(function () {
// 转盘抽奖
var lottery = 0
var n1 = 0
function clickBtn() {
n1 = Math.floor(Math.random() * 8 + 1)// 转的角度
var n2 = Math.floor(Math.random() * 4 + 4)// 转的圈数
lottery = 45 * n1 + 360 * n2 + 22.5// 保证指针指着中心，45/2
$(this).unbind().css("cursor", "wait")
$('.reward').css({
"transition": "all 8s ease",
"transform": "rotate(" + lottery + "deg)",
"-webkit-transform": "rotate(" + lottery + "deg)"
})
}
$('.btn').bind('click', clickBtn)// 开始抽奖
$('.reward')[0].addEventListener('transitionend', function () {
$('.btn').bind('click', clickBtn).css("cursor", "pointer")
setTimeout(result, 1000)// 定时器
})
function result() {
$('.reward').css({
"transition": "none",
"transform": "none",
"-webkit-transform": "none"
});
}
})
三、中奖
1. html
<!-- 中奖页面 -->
<div class="result">
<span class="pop">恭喜你，中奖了</span>
<div class="ok">确定</div>
</div>
2. css
/* 中奖页面 */
.result{
position: absolute;
width: 100%;
height: 100%;
background: lightslategray;
z-index: 10;
top: 0;
left: 0;
display: none;
}
.pop{
display: block;
font-size: 45px;
text-align: center;
padding: 40px;
color: white;
border: 3px solid darkorange;
z-index: 15;
margin: 150px auto;
}
.ok{
font-size: 36px;
text-align: center;
padding: 20px;
color: tomato;
border: 1px solid red;
cursor: pointer;
margin: auto;
}
.ok:hover{
background: yellowgreen;
}
3. js
$(function () {
// 转盘抽奖
var lottery = 0
var n1 = 0
function clickBtn() {
n1 = Math.floor(Math.random() * 8 + 1)// 转的角度
var n2 = Math.floor(Math.random() * 4 + 4)// 转的圈数
lottery = 45 * n1 + 360 * n2 + 22.5// 保证指针指着中心，45/2
$(this).unbind().css("cursor", "wait")
$('.reward').css({
"transition": "all 8s ease",
"transform": "rotate(" + lottery + "deg)",
"-webkit-transform": "rotate(" + lottery + "deg)"
})
}
$('.btn').bind('click', clickBtn)// 开始抽奖
$('.reward')[0].addEventListener('transitionend', function () {
$('.btn').bind('click', clickBtn).css("cursor", "pointer")
setTimeout(result, 1000)// 定时器
// 中奖页面显示
$('.result').css('display', 'inline')
// 中奖页面设置
var ward = ['谢谢参与', '特等奖', '谢谢参与', '三等奖', '谢谢参与', '二等奖', '谢谢参与', '一等奖']
ward.forEach(function (value, index) {
if (n1 > 7) {
n1 = n1 % 8
}
if (index == n1) {
$('.pop').text('恭喜你，抽中' + ward[index] + '了！！！')
}
})
})
function result() {
// 中奖页面隐藏
$('.ok').click(function () {
$('.result').css('display', 'none')
})
$('.reward').css({
"transition": "none",
"transform": "none",
"-webkit-transform": "none"
});
}
})
三、登录注册
1. html
<!-- 登录 -->
<span class="cpt">登录</span>
<div class="login">
<div class="type-title">
<span class="logins">登录</span>
<span class="register">注册</span>
</div>
<span class="close">X</span>
<div class="login-box">
<div class="login-content">
<div class="login-input">
<input type="text" placeholder="输入手机号">
</div>
<div class="login-input">
<input type="password" placeholder="密码">
</div>
<div class="forget-psw">
<a href="#">忘记密码?</a>
</div>
<div class="login-btn">登录</div>
</div>
</div>
</div>
2. css
* {
margin: 0;
padding: 0;
}
.cpt {
color: #999;
font-size: 30px;
text-align: center;
cursor: pointer;/* 鼠标样式 */
position: absolute;
top: 77px;
left: 90%;
}
/* 登录 */
.login {
/* overflow: scroll; */
width: 100%;
height: 100%;
background: rgba(53, 53, 53, 0.9);
text-align: center;
position: fixed;
z-index: 10;
top: 0;
display: none;
}
.type-title{
width: 200px;
color: black;
font-size: 32px;
/* text-align: center; */
margin: 40px auto;
border-bottom: black 3px solid;
cursor: pointer;
}
.close{
font-size: 28px;
cursor: pointer;
position: absolute;
right: 20px;
top: 20px;
}
.login-input {
width: 270px;
margin: auto;
padding-top: 25px;
padding-left: 8px;
}
/* 文本框内的提示信息 */
input[placeholder] {
padding-left: 15px;
padding-right: 12px;
font-size: 14px;
font-weight: 100;
color: #ccc;
}
.login-input input {
box-sizing: border-box;
width: 270px;
height: 33px;
outline: none;
font-weight: 300;
font-size: 16px;
border: 1px solid transparent;
color: #333;
border-bottom-color: #e8e8e8;
}
.login .login-box .forget-psw {
width: 270px;
margin: 5px auto;
font-size: 12px;
text-align: right;
padding-top: 10px;
}
.login .login-box .forget-psw a {
color: #ccc;
}
.login-btn {
font-weight: 200;
font-size: 14px;
line-height: 44px;
width: 126px;
box-sizing: border-box;
text-align: center;
border: 1px solid white;
border-radius: 25px;
color: white;
cursor: pointer;
margin: 25px auto;
}
3. js
$(function () {
// 登录页面显示与隐藏
$('.cpt').click(function () {
$('.login').css('display', 'inline')
})
$('.close').click(function () {
$('.login').css('display', 'none')
})
// 登录页面设置
// 转盘抽奖
var lottery = 0
var n1 = 0
function clickBtn() {
n1 = Math.floor(Math.random() * 8 + 1)// 转的角度
var n2 = Math.floor(Math.random() * 4 + 4)// 转的圈数
lottery = 45 * n1 + 360 * n2 + 22.5// 保证指针指着中心，45/2
$(this).unbind().css("cursor", "wait")
$('.reward').css({
"transition": "all 8s ease",
"transform": "rotate(" + lottery + "deg)",
"-webkit-transform": "rotate(" + lottery + "deg)"
})
}
$('.btn').bind('click', clickBtn)// 开始抽奖
$('.reward')[0].addEventListener('transitionend', function () {
$('.btn').bind('click', clickBtn).css("cursor", "pointer")
setTimeout(result, 1000)// 定时器
// 中奖页面显示
$('.result').css('display', 'inline')
// 中奖页面设置
var ward = ['谢谢参与', '特等奖', '谢谢参与', '三等奖', '谢谢参与', '二等奖', '谢谢参与', '一等奖']
ward.forEach(function (value, index) {
if (n1 > 7) {
n1 = n1 % 8
}
if (index == n1) {
$('.pop').text('恭喜你，抽中' + ward[index] + '了！！！')
}
})
})
function result() {
// 中奖页面隐藏
$('.ok').click(function () {
$('.result').css('display', 'none')
})
$('.reward').css({
"transition": "none",
"transform": "none",
"-webkit-transform": "none"
});
}
})
总结
本文中关于登录注册尚不完善，希望大家借鉴的时候注意下大家一起加油，一起努力
5962
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
