首先是HTML代码
<p id="text">您还剩余3次机会</p> <div class="box"> <img src="./img/lanren.png" > <div class="btn btn1"></div> <div class="btn2 btn"></div> </div>
然后是CSS代码
body{ padding: 0; margin: 0; } .box{ width: 640px; height: 640px; border-radius: 50%; margin: 150px auto; position: relative; } img{ width: 100%; height: 100%; transform: rotateZ(0deg); transition: all 2s; } .btn{ position: absolute; width: 190px; height: 220px; background-image: url("./img/arrow.png"); background-repeat: no-repeat; background-position: -30px 0; top: 50%; left: 50%; margin-left: -95px; margin-top: -110px; } .btn2{ background-position: -281px 0; display: none; } p{ width: 100%; height: 40px; line-height: 40px; text-align: center; font-size: 20px; color: #facebf; }
最后加JS代码
1 //初始化一个角度 2 var x = 0; 3 //定义一共能抽奖多少次 4 var a = 3; 5 //获取需要的dom元素 6 var text = document.getElementById("text"); 7 var btn1 = document.getElementsByClassName(‘btn1‘)[0]; 8 var btn2 = document.getElementsByClassName(‘btn2‘)[0]; 9 var img = document.getElementsByTagName(‘img‘)[0]; 10 //定义一个随机数 在下面使用 11 function random(a,b){ 12 return Math.floor(Math.random()*(b-a))+a; 13 } 14 //点击按钮时 执行事件 首先a-1 然后再随机得到一个角度数字 然后再赋值给img元素 最后再执行一个回调函数 如果直接把回调函数里面的代码将会出现BUG 但是我不知道什么情况 由这个回调函数来判断还有几次抽奖机会 15 btn1.onclick=function(){ 16 a-=1; 17 x += parseInt(random(10, 30) * 60); 18 img.style.transform = "rotateZ(" + x + "deg)"; 19 qq(a); 20 21 } 22 function qq(x){ 23 text.innerHTML=`您还有${x}次机会`; 24 if(x==0){ //如果次数等于0 则不执行任何事件 25 text.innerHTML=`您还有0次机会`; 26 btn1.onclick=function(){ 27 return false; 28 } 29 } 30 }
原文地址:https://www.cnblogs.com/banyuege/p/9321110.html
时间: 2024-10-14 10:34:23