小实战——抽奖转盘（大神篇）
Posted hjysunshine
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小实战——抽奖转盘（大神篇）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
margin: 0;
padding: 0;
}
.container {
width: 600px;
height: 600px;
margin: 100px auto;
position: relative;
}
.zhen img{
position: absolute;
left: 50%;
top: 50%;
margin: -190px 0 0 -45px;
z-index: 10;
}
.pan img{
z-index: 1;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="zhen">
<img src="img/zhen.png" >
</div>
<div class="pan">
<img src="img/pan.png" >
</div>
</div>
<script src="js/lottery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
index.js
var parts = {
rotateNum : 8,
turnTable : document.getElementsByClassName(‘container‘)[0]
}
var lottery = new Lottery(parts);
lottery.js
(function(win) {
win.Lottery = Lottery;
var defaultParts = {
rotateNum: 8,
turnTable: document.getElementsByClassName(‘body‘)[0]
}
function Lottery(parts) {
this.parts = Object.assign(defaultParts, parts); //对象的合并，不传走默认
this.bool = true;
this.ranNum = 0;
this.init();
}
Lottery.prototype.init = function() {
var self = this;
this.zhen = this.parts.turnTable.getElementsByClassName(‘zhen‘)[0];
this.pan = this.parts.turnTable.getElementsByClassName(‘pan‘)[0];
this.zhen.onclick = function() {
if (self.bool) {
self.parts.ranNum = Math.floor(Math.random() * 360);
self.panRotate(self.parts.ranNum);
self.bool = false;
}
};
this.pan.addEventListener(‘webkitTransitionEnd‘, function() {
self.bool = true;
self.pan.style.transform = ‘rotate(‘ + self.parts.ranNum + ‘deg)‘;
self.pan.style.transition = ‘none‘;
})
}
Lottery.prototype.panRotate = function(deg) {
var rotNum = this.parts.rotateNum * 360 + deg;
this.pan.style.transform = ‘rotate(‘ + rotNum + ‘deg)‘;
this.pan.style.transition = ‘all 3s‘;
}
}(window))
以上是关于小实战——抽奖转盘（大神篇）的主要内容，如果未能解决你的问题，请参考以下文章
Unity实战篇 | 自己制作一个《大转盘抽奖》 小程序，顺便带你看看抽奖的水可以有多深