效果图 ：
HTML代码 ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .wrap{ position: relative; width: 400px; height: 400px; margin: 100px auto; } .btn1{ position:absolute; } .btn2{ position:absolute; width: 130px; height:130px; left: 50%; top: 45%; margin-left: -65px; margin-top: -65px; } .wrap img{ width:100%; } </style> </head> <body> <div class="wrap"> <span class="btn1"><img src="img/pan.png" alt=""></span> <span class="btn2"><img src="img/btn.png" alt=""></span> </div> <script src="index.js"></script> </body> </html>
JavaScript 代码 :
//获取相应的DOM var box = document.getElementsByClassName(‘btn1‘)[0];//转盘 var btn = document.getElementsByClassName(‘btn2‘)[0];//按钮 var num = 0; //初始度数 var bool = true; btn.addEventListener(‘click‘,function(){ //开始旋转 num = Math.floor(Math.random()*360); //随机度数 tableRun(num); }) //旋转函数 function tableRun(deg){ deg = deg + 8*360; box.style.transform = ‘rotate(‘+ deg +‘deg)‘; box.style.transition = ‘all 5s‘; } box.addEventListener(‘webkitTransitionEnd‘,function(){ // webkitTransitionEnd 当css完成过渡后触发 console.log(‘over‘); judgeFn(num);//判断函数 bool = true;//解开锁 box.style.transform = ‘rotate(‘+ num +‘deg)‘; box.style.transition = ‘none‘; }) function judgeFn(deg){ var str = ‘‘; if(deg < 45 && deg < 270&& deg > 0){ //二等奖 str = ‘二等奖‘ }else if(deg > 90 && deg < 135 || deg > 270 && deg < 315){ //三等奖 str = ‘三等奖‘ }else if(deg > 45 && deg < 90 || deg > 135 && deg < 180 || deg > 225 && deg < 270 || deg > 315 && deg < 360) { //四等奖 str = ‘四等奖‘ }else if(deg > 180 && deg < 225 ){ str = ‘一等奖‘ //一等奖 } alert (‘大吉大利 恭喜获得‘ + str + ‘!‘) }
原文：https://www.cnblogs.com/asd7850254/p/12259749.html