js实现转盘的抽奖
1.html页面
2.css页面
3.js代码
let pointer = document.querySelector('.pointer');
let cishu = document.querySelector('.number');
let oTurntable = document.querySelector('.turntable')
pointer.addEventListener('click',go);
let isGo = false; // 是否正在执行动画
// let oTurntable = ''; // 执行动画的对象
let randomDeg = 0; // 即将旋转的度数
let lastDeg = 0; // 上次旋转的度数
let goTimers = 5; // 抽奖的次数
cishu.innerHTML = goTimers;
function go() {
if(!isGo && goTimers > 0) { getNumber()}
else if(!isGo && goTimers <= 0) { alert('抱歉您的抽奖次数已经用完了') }
else return
}
function getRandom(n,m) {
let result = Math.floor(Math.floor(Math.random()*(m-n+1)+n))
return result;
}
function getNumber() {
let number = getRandom(0,100)
let caseNum = ''
if(number === 0){
caseNum = 0
}else if(number > 0 && number < 5) {
caseNum = 1
}else if(number >= 5 && number < 10) {
caseNum = 2
}else if(number >= 10 && number < 15) {
caseNum = 3
}else if(number >= 15 && number < 20) {
caseNum = 4
}else if(number >= 20 && number < 25) {
caseNum = 5
}else {
caseNum = 6
}
switch(caseNum){
case 0:
ratating(360/7*0 + 360/7/2,"免单4999元");
break;
case 1:
ratating(360/7*1 + 360/7/2,"免单50元");
break;
case 2:
ratating(360/7*2 + 360/7/2,"免单10元");
break;
case 3:
ratating(360/7*3 + 360/7/2,"免单5元");
break;
case 4:
ratating(360/7*4 + 360/7/2,"免分期服务费");
break;
case 5:
ratating(360/7*5 + 360/7/2,"提高白条额度");
break;
default:
ratating(360/7*6 + 360/7/2,"未中奖");
break;
}
}
function ratating(deg,text){
goTimers--
cishu.innerHTML = goTimers
isGo = true
let times = getRandom(3,6)
randomDeg = deg + 360 * times
let realDeg = (360 - lastDeg % 360) + lastDeg + randomDeg
console.log(`以原点为基准共旋转了${randomDeg}度,
以一圈为基准相对旋转了${randomDeg % 360}度,最终结果为${text}`)
oTurntable.style.transform = `rotate(${realDeg}deg)`;
setTimeout(() => {
isGo = false
lastDeg = realDeg
},4000)
}