幸运大转盘

忘是亡心i 2022-06-02 04:50 188阅读 0赞

界面参考：[点击打开链接][Link 1]

index.html

<!DOCTYPE html>
    <html>
    <head>
    	<title>转盘</title>
    	<link rel="stylesheet" type="text/css" href="css/common.css">
    	<link rel="stylesheet" type="text/css" href="css/index.css">
    </head>
    <body>
    	<div class="con" id="con">
    		<div class="sec1">
    			<p>8元红包</p>
    		</div>
    		<div class="sec2">
    			<p>88元红包</p>
    		</div>
    		<div class="sec3">
    			<p>谢谢惠顾</p>
    		</div>
    		<div class="sec4">
    			<p>优酷会员</p>
    		</div>
    		<div class="sec5">
    			<p>一张电影票</p>
    		</div>
    		<div class="sec6">
    			<p>一张优惠券</p>
    		</div>
    		<div class="sec7">
    			<p>笔记本电脑</p>
    		</div>
    		<div class="sec8">
    			<p>平板</p>
    		</div>
    	</div>
    	<div class="tri"></div>
    	<div class="cen" id="cen">
    		<div class="cen_con">
    			<p>点击开始</p>
    			<p><span id="cen_count">3</span>次</p>
    		</div>
    	</div>
    	<div id="res">
    		<div class="res_d1" id="res_d1">×</div>
    		<div class="res_d2">
    			<div class="res_d2_p">
    				<p>恭喜您获得：</p>
    				<p id="get_thing"></p>
    			</div>
    			<button id="btn_sure">确定</button>
    		</div>
    	</div>
    
    	<script type="text/javascript" src="js/index.js"></script>
    </body>
    </html>

common.css:

body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,pre,p{
    	margin:0;
    	padding: 0;
    	border: 0;
    } 
    a{
    	text-decoration: none;
    }

index.css:

body{
    	background: #1E0D45;
    }
    .con{
    	position: absolute;
    	top: 100px;
    	left: 30%;
    	width: 400px;
    	height: 400px;
    	border: 6px solid #D5AF75;
    	border-radius: 50%;
    	background: #FCE9C7;
    }
    .sec1{
    	position: relative;
    	left: 42%;
    	top: 5%;
    }
    .sec2{
    	position: relative;
    	left: 60%;
    	top: 34%;
    	transform: rotate(30deg);
    }
    .sec3{
    	position: relative;
    	left: 35%;
    	top: 74%;
    	transform: rotate(90deg);
    }
    .sec4{
    	position: relative;
    	left: 7%;
    	top: 88%;
    	transform: rotate(120deg);
    }
    .sec5{
    	position: relative;
    	left: -39%;
    	top: 65%;
    	transform: rotate(180deg);
    }
    .sec6{
    	position: relative;
    	left: -64%;
    	top: 25%;
    	transform: rotate(210deg);
    }
    .sec7{
    	position: relative;
    	left: -40%;
    	top: -25%;
    	transform: rotate(270deg);
    }
    .sec8{
    	position: relative;
    	left: 10%;
    	top: -40%;
    	transform: rotate(-30deg);
    }
    .sec1 p,.sec2 p,.sec3 p,.sec4 p,.sec5 p,.sec6 p,.sec7 p,.sec8 p{
    	color: #CE3237;
    }
    .cen{
    	position: absolute;
    	top: 14%;	
    	left: 30%;
    	width: 150px;
    	height: 150px;
    	margin: 125px;
    	border: 6px solid #FA4653;
    	border-radius: 50%;
    	background: #FEF0D6;
    	cursor: pointer;
    }
    .tri{
    	position: absolute;
    	left: 44.5%;
    	top: 30%;
    	width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 30px solid #FA4653;
    }
    .cen_con{
    	margin: auto;
    	margin-top: 50px;
    }
    .cen p{
    	color: #FA4653;
    	text-align: center;
    	font-size: 20px;
    	font-weight: 900;
    }
    #res{
    	position: fixed;
    	top: 50px;
    	left: 25%;
    	width: 50%;
    	z-index: 1;
    	display: none;
    }
    .res_d1{
    	position: relative;
    	left: 95%;
    	top: -10px;
    	width: 30px;
    	height: 30px;
    	color: #FFF;
    	border: 2px solid #FFF;
    	border-radius: 50%;
    	font-size: 30px;
    	text-align: center;
    	line-height: 26px;
    	cursor: pointer;
    }
    .res_d2{
    	background: #FCEACB;
    	height: 500px;
    	border-radius: 10px;
    	font-size: 25px;
    	text-align: center;
    }
    .res_d2_p{
    	padding-top: 10%;
    	font-weight: 800;
    }
    #btn_sure{
    	display: block;
    	position: relative;
    	top: 30%;
    	left: 37%;
    	width: 150px;
    	height: 50px;
    	font-size: 22px;
    	color: #FFF8EB;
    	background: #BC9C6E;
    	border: none;
    	outline: none;
    	border-radius: 3px;
    	cursor: pointer;
    }
    
    @keyframes move1{
    	from{
    		transform: rotate(0deg);
    	}
    	to{
    		transform: rotate(1440deg);
    	}
    }
    @keyframes move2{
    	from{
    		transform: rotate(0deg);
    	}
    	to{
    		transform: rotate(1485deg);
    	}
    }
    @keyframes move3{
    	from{
    		transform: rotate(0deg);
    	}
    	to{
    		transform: rotate(1530deg);
    	}
    }
    @keyframes move4{
    	from{
    		transform: rotate(0deg);
    	}
    	to{
    		transform: rotate(1575deg);
    	}
    }
    @keyframes move5{
    	from{
    		transform: rotate(0deg);
    	}
    	to{
    		transform: rotate(1620deg);
    	}
    }
    @keyframes move6{
    	from{
    		transform: rotate(0deg);
    	}
    	to{
    		transform: rotate(1665deg);
    	}
    }
    @keyframes move7{
    	from{
    		transform: rotate(0deg);
    	}
    	to{
    		transform: rotate(1710deg);
    	}
    }
    @keyframes move8{
    	from{
    		transform: rotate(0deg);
    	}
    	to{
    		transform: rotate(1755deg);
    	}
    }

index.js:

效果图：

![20180104100407036][]

![20180104100424071][]

缺陷：

（1）没有做移动端的自适应；

（2）代码没有封装；

（3）每次转时，不能从上次的位置开始，每次都从第一个开始；

（4）这个是转盘在转，没有做指针转的版本。

注：只用js实现了，还没用jq实现。

后面又做了bug修复和优化，链接：[点击打开链接][Link 2]

[Link 1]: http://www.jsdaima.com/p-962.html
[20180104100407036]: /images/20220602/ff22aa6be4614017979962dc5bdb6b35.png
[20180104100424071]: /images/20220602/320ed5709f7c4b3f838c66250d9ec10c.png
[Link 2]: http://blog.csdn.net/spflinux/article/details/78977302