<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#wrapper
{
width: 300px;
height: 300px;
position: absolute;
left: 100px;
top: 100px;
}
#board
{
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
z-index:999;
}
#direct
{
width: 300px;
height: 300px;
}
#inner
{
width: 150px;
height: 30px;
float: right;
margin-top: 135px;
background: #f30;
}
.prize{
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
}
.prize .inner{
width: 150px;
height: 30px;
float: right;
margin-top: 135px;
background: #f60;
line-height:30px;
text-align:center;
color:#fff;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="board">
<div id="direct">
<div id="inner">
</div>
</div>
</div>
</div>
<input type="button" value="start" onclick="t.start()" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var MSIEBrowser = function()
{
var rorateIt = function(node,deg)
{
//取得末变形前矩形的中点
var rect = node.getBoundingClientRect(),
cx1 = (rect.right - rect.left) / 2, // center x
cy1 = (rect.bottom - rect.top) / 2, // center y
deg2rad = Math.PI / 180,//角度转弧度
rad = deg * deg2rad ,
cos = Math.cos(rad),
sin = Math.sin(rad);
var ident = "DXImageTransform.Microsoft.Matrix";
node.style.filter = "progid:"+ident +"(M11='1.0',sizingmethod='auto expand')";
//http://www.satzansatz.de/cssd/onhavinglayout.html
if(!node.currentStyle.hasLayout){//在IE7中，如果没有获得hasLayout，滤镜会失效
node.style.writingMode = "tb-rl";
}
var filter = node.filters.item(ident);
// +-------+-------+
// | M11 | M12 |
// +-------+-------+
// | M21 | M22 |
// +-------+-------+
filter.M11 = cos;
filter.M12 = -sin;
filter.M21 = sin;
filter.M22 = cos;
//取得当前中心
rect = node.getBoundingClientRect();
var cx = (rect.right - rect.left) / 2;
var cy = (rect.bottom - rect.top) / 2;
//调整此元素的坐标系，实现CSS3 transform-origin的功能
node.style.marginLeft = cx1 - cx + "px";
node.style.marginTop = cy1 - cy + "px";
}
this.rorateIt = function(node, deg)
{
rorateIt(node,0);
rorateIt(node,deg);
}
this.getValue = function()
{
return 1;
}
}
var W3CBrowser = function()
{
var rorateIt = function(node,deg)
{
var cssText = "-webkit-transform: rotate("+ deg +"deg);"
cssText += "-moz-transform: rotate("+ deg +"deg);"
cssText += " -o-transform: rotate("+ deg +"deg);"
node.style.cssText = cssText;
}
this.rorateIt = function(node,deg)
{
rorateIt(node,deg);
}
this.getValue = function()
{
return 0.3;
}
}
var Prize = function(data,browser)
{
var createPrize = function(prize)
{
var htmlText = "<div class='prize'><div class='inner' style='background:"+ prize.src +"'>"+ prize.name +"</div></div>"
return $(htmlText);
}
var getDeg = function(index)
{
return Math.round(360 / data.length) * index;
}
this.initialize = function()
{
for(var i = 0 ; i < data.length ; i ++)
{
var p = createPrize(data[i]);
$("#wrapper").append(p)
data[i].deg = getDeg(i)
browser.rorateIt(p.get(0),getDeg(i));
}
}
this.getPrizesInfo = function()
{
return data;
}
}
var Turntable = function(browser,prize)
{
var board = $("#board").get(0);
var deg = 0; //标记数字，每360度清0
var degcount = 0; //已经旋转度数
var maxdegcount; //总共要旋转度数
var changeNum = 120 ;// 每转changeNum度进行一次速度变换
var owner = this;
var observers = [];
var getRandom = function()
{
random.setPrizesInfo(prize.getPrizesInfo());
return random.getValue();
}
var getIdentity = function()
{
var count = maxdegcount / changeNum //要更新速度次数
var alreadycount = degcount / changeNum //已更新速度次数
var identity = count/2 - Math.abs(alreadycount - count/2)
identity = identity <= 1 ? 1 : identity;
return identity * browser.getValue();
}
this.start = function()
{
this.reset();
var timer = window.setInterval(function()
{
var identity = getIdentity();
if(degcount >= maxdegcount)
{
window.clearInterval(timer);
owner.notify()
return;
}
if(deg>=360) deg = 0
deg = degcount += identity;
browser.rorateIt(board,deg);
//document.getElementById('inner').innerHTML = identity
},1);
}
this.reset = function()
{
maxdegcount = getRandom();
degcount = 0;
deg = 0;
browser.rorateIt(board,0);
}
this.getSelectedPrize = function()
{
var deg = Math.round(maxdegcount % 360);
var selectedPrize ;
$.each(prize.getPrizesInfo(),function(index,o){
if(o.deg == deg){
selectedPrize = o;
return false;
}
})
return selectedPrize;
}
this.addObserver = function(observer)
{
observers.push(observer);
}
this.notify = function()
{
$.each(observers,function(index,o){o.update(owner);})
}
}
var Random = function(userlevel)
{
var owner = this;
var prizesInfo;
var filter;
var level1count = 0;
var level2count = 0;
var level3count = 0;
var level1HitRate = 1;
var level2HitRate = 1;
var level3HitRate = 1;
this.reset = function()
{
level1count = 0;
level2count = 0;
level3count = 0;
}
this.getUserLevel = function()
{
throw new Error('未实现');
}
this.setPrizesInfo = function(p)
{
prizesInfo = p;
filter = getData();
}
var getValue = function()
{
var random = Math.random() * (5400-5040+1) + 5040;
var v = Math.round(random % 360);
for(var i = 0 ; i < filter.length ; i ++)
{
if(filter[i].deg == v)
{
if(filter[i].level == 1 && ++level1count >= level1HitRate) return random;
if(filter[i].level == 2 && ++level2count >= level2HitRate) return random;
if(filter[i].level == 3 && ++level3count >= level3HitRate) return random;
}
}
return getValue();
}
this.getValue = function()
{
this.reset();
var value = getValue();
//document.getElementById("level1").innerHTML = level1count;
//document.getElementById("level2").innerHTML = level2count;
//document.getElementById("level3").innerHTML = level3count;
return value;
}
var getData = function()
{
var filter = new Array;
$.each(prizesInfo,function(index,obj){
if(obj.accept.join(',').indexOf(userlevel) != -1) filter.push(obj);
})
return filter;
}
}
var Success = function()
{
var turntable ;
this.update = function(t)
{
turntable = t;
alert("您获得的礼品为："+t.getSelectedPrize().name)
}
}
function createBrowser()
{
var isMSIE = navigator.userAgent.indexOf("MSIE") != - 1 ? true : false;
if(isMSIE) return new MSIEBrowser();
else return new W3CBrowser();
}
var browser = createBrowser();
var prize = new Prize([{level:1,name:'奖品一(级别一)',src:'#111',accept:[1]},//src为礼品图片路径，这里先用颜色代替
{level:1,name:'奖品二(级别一)',src:'#222',accept:[1]},
{level:1,name:'奖品三(级别一)',src:'#333',accept:[1,2]},
{level:2,name:'奖品四(级别二)',src:'#444',accept:[1,2,3]},
{level:2,name:'奖品五(级别二)',src:'#555',accept:[1,2,3]},
{level:2,name:'奖品六(级别二)',src:'#666',accept:[1,2,3]},
{level:3,name:'奖品七(级别三)',src:'#777',accept:[1,2,3]},
{level:3,name:'奖品八(级别三)',src:'#888',accept:[1,2,3]},
{level:3,name:'奖品九(级别三)',src:'#999',accept:[1,2,3]},
{level:3,name:'奖品十(级别三)',src:'#ccc',accept:[2,3]}],browser)
prize.initialize()
var random = new Random(1);
var success = new Success();
var t = new Turntable(browser,prize,random);
t.addObserver(success);
</script>
<div id="level1"></div>
<div id="level2"></div>
<div id="level3"></div>
</body>
</html>
浙公网安备 33010602011771号