htmlcssjs实现抽奖，原⽣（纯）js+html+css实现移动端抽奖转
盘系统
这是我前个⽉使⽤纯javascript+html写出的⼀个抽奖转盘系统，按理来说，我应该在当时做完这个⼩系统，就应该⽴即写bike总结才对，但是本⼈之前没有在⽹上写博客的习惯，平时总结更加习惯写在纸上，但是现在发现卸载⽹上可能更好。博客中有许多⾼⼿，当你们点进来看到我这篇⼩总结的时候，还希望多多给我提出建议咯，感谢！其他的话不多说啦，下⾯进⼊正题，先亮出我转盘的庐⼭正⾯⽬(ps：这张图是我在⽹上随便的，只是简单处理了⼀下⽔印)
我的抽奖转盘是⽔平垂直居中的，也就是处于⼿机屏幕的正中间，先贴上我html部分的代码
start
恭喜中奖
再贴上css代码
*{
padding: 0;
margin: 0;
}
html{
position: absolute;
overflow: hidden;
}
body{
background-color: white;
overflow: hidden;
}
.random{
width:14.6rem;
height:14.6rem;
position:absolute;
margin: auto;
}
.content{
width:14.6rem;
height:14.6rem;
background: url(bg.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-orign:content-box;
transform:rotate(0deg);
}
.down{
width:2rem;
height: 0.7rem;
background-image: url(down.png); background-size: 100%;
position: absolute;
left:7rem;
top:0;
}
.
start{
width:3rem;
height:3rem;
background-color: red;
position:absolute;
top:5.8rem;
left:5.8rem;
border-radius: 4rem;
-o-border-radius:4rem;
text-align: center;
line-height:3rem;
}
.close{
position: absolute;
top:3rem;
width:4rem;
left:5rem;
text-align: center;
font-weight: bold;
background-color: white;
font-size: 1rem;
display: none;
}
前⾯的css+html部分的代码只是将我的转盘最安静的时候展现出来
使⽤原⽣JavaScript才能真正展现它动如脱兔的⼀⾯，先将我的代码贴出来，再讲讲我的思路吧！random.js⽂件：
//转盘对象
var Rondom = function(){}
//返回随机的度数
Deg = function(arr){
var arr = arr;
rotate属性
var len1 = arr.length;//⼀共有⼏种奖项
var len2 = 0;//每种奖项有⼏种可能
var rom2;//抽取奖项的其中⼀个⾊块
var deg;//指针只指向的位置
var type;//抽取到的奖品类型
//获取随机数
var rom1 = Math.random();
for(var i = 0; i
if(arr[i].pro >= rom1){
len2 = arr[i].deg.length;
rom2 = und(Math.random() * (len2 -1));
deg = arr[i].deg[rom2];
type = arr[i].type;
break;
}
}
return {'type': type,//返回奖品类型
'deg':deg //返回指针停下来的位置
}
;
}
//转盘旋转
Rondom.prototype.turn = function(objc,objc2,objc3,objc4){
//获取transform的当前旋转位置数组
var arr = ($Style(objc,"transform")).split(',');
var arrCos = parseFloat(arr[3]);
var arrSin = parseFloat(arr[1]);
var sinDeg = und(Math.asin(arrSin)*(180/Math.PI));//求当前转盘可能的⾓度var cosDeg = und(Math.acos(arrCos)*(180/Math.PI));//求当前转盘可能的⾓度var deg = 0;//实际⾓度
if(arrCos*arrSin > 0){
arrSin > 0 ? deg = cosDeg : deg = 180 - sinDeg;
}else if(arrCos*arrSin < 0){
arrCos > 0 ?deg = sinDeg + 360 : deg = cosDeg;
}else{
arrSin >= 0 ? deg = cosDeg : deg = sinDeg + 360 ;
}
if(objc4){
//$attrCommon.setRotate(objc,objc3,deg);
return deg;
}else{
$attrCommon.setRotate(objc,objc3,deg);
}
}
//向TouchEvent对象订阅start触摸事件
Rondom.prototype.listenerStart = (function(){
window.timeId1;//定义计时器
var n = 0;//计时
var flag = true;//是否点击了转盘
var deg;
var deg2 = 0;//获取上次旋转停留的位置
var m = 0;//旋转次数，可以为⼩数
var posObj;//获取抽取到的奖项对象
return function(objc,n,objc2,objc3,objc4){
var $this = this;//保存对this的引⽤
timeId1 = setInterval(function(){
if(flag){
posObj = $Deg(objc4);
deg2 = $this.turn(objc,objc4,posObj.deg,true);//获取上次旋转停下来的位置
ansform = 'rotate('+0+'deg'+')';//将转盘转回最初的位置
deg = posObj.deg + 720;//转盘每次点击，⼀共旋转多少度
flag = false;
}
deg2 = $this.turn(objc,objc4,posObj.deg);
n = n + 0.2;
m = m + ((720+posObj.deg)/posObj.deg);//转盘⽬前旋转了多少度clearInterval(timeId1);
if(m <= (720+posObj.deg)){
if((m <= 720)){
$this.listenerStart(objc,n,objc2,objc3,objc4);
}else if(m = (720+ posObj.deg)){
deg2 = $this.turn(objc,objc4,posObj.deg,true);//转盘在最后⼀次旋转前的位置ansform = 'rotate('+ 0 +'deg'+')';//将转盘转回初始位置
$this.listenerStart(objc,n,objc2,objc3,objc4);//转盘旋转到指定的⾓度上
}
}else{
flag = true;
n = 0;
m = 0;
deg2 = 0;
deg = 0;
$this.listenerEnd(objc3,pe); //结束旋转
posObj = null;
}
},n);
}
})();
//向TouchEvent对象订阅close事件
Rondom.prototype.listenerEnd = function(obj1,obj2,text){
var timeId2 = setTimeout(function(){
obj1.style.display = 'block';
},500);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。