抽奖
Paste_Image.png
难点分析：
1.页面架构：背景转盘灯光，转盘内容，点击抽奖按钮
2.当没有设置边界的div中，只有一个子元素div时，会发生边界传导现象，解决方案，父div设置边界或将overflow属性设置为hidden
3.由于原始素材问题，需开始时，将内容元素先旋转30deg，且每次转盘旋转抽奖后，转盘需复原为30deg，才能保证再次点击的准确性
4.概率问题：0-99的整数内，如果取到1，就是大奖，概率就是1%（概率自己根据需要调整），其它奖项参考概率修改即可
5.动画过渡效果添加时机：在点击时，结果发出时再删除（transition:all 0s linear 0s;）
代码
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<mata http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
#content {
width: 400px;
height: 400px;
background: url(src/images/ly-plate-c.gif) no-repeat;
/*border: 1px solid red;*/
margin: 100px auto;
overflow: hidden;
position: relative;
}
#zhuan {
width: 340px;
height: 340px;
background: url(src/images/bg-lottery.png) no-repeat;
/*border: 1px solid red;*/
margin: 30px auto 0;
transform: rotate(30deg);
}
#content img {
position: absolute;
top: 115px;
left: 106px;
cursor: pointer;
/*border: 1px solid red;*/
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#content img').click(function(e) {
$('#zhuan').css('transform', 'rotate('+num+'deg)');
var num = Math.floor(Math.random()*100); // 求得随机的概率数0-99
console.log(num);
var test = 0;
if (num < 1) {
test = 3600 + 60*5;
}else if (num < 10) {
test = 3600 + 60*0;
}else {
test = 3600 + 60*2-10*Math.random();
}
// test+=30;
console.log(test);
// test = 60;
$('#zhuan').css('transition', 'all 3s ease 0s');
$('#zhuan').css('transform', 'rotate('+test+'deg)');
// alert(num);
setTimeout(function () {
test %= 360;
console.log(test);
if (test<=30 || test > 330) {
alert('理财金2000元');
}else if (30<test && test<=90) {
alert('理财金1000元');
}else if (90<test && test<=150) {
alert('谢谢参与');
}else if (150<test && test<=210) {
alert('京东e卡');
}else if (210<test && test<=270) {
alert('理财金5200元');
}else if (270<test && test<=330){
alert('谢谢参与');
}
$('#zhuan').css('transition', 'all 0s linear 0s');
$('#zhuan').css('transform', 'rotate(30deg)');
}, 3000)
});
});
</script>
</head>
<body style="padding:50px;background-color:#ccc">
<div id="content">
<div id="zhuan"></div>
</div>
</body>
</html>
<!-- <script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script> -->
网友评论