摘要:本篇教程探讨了JavaScript基础教程之如何做出转盘抽奖效果,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
本篇教程探讨了JavaScript基础教程之如何做出转盘抽奖效果,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
<
首先是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 }
本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号