案例分享转盘抽奖的demo（附代码）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了案例分享转盘抽奖的demo（附代码），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3486字，纯文字阅读大概需要5分钟。
内容图文
工作之余，总想找出点事干，所以就想试试看自己能否写个圆盘抽奖的demo。开发思路
布局 css rotate 布局；
抽奖过渡效果，采用css3 transition；
动态计算抽奖结束时的角度，赋值给待选择的元素。
效果图
代码
<p class="rotate tn">
<!-- 外部圆-->
<p class="out-circle">
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>
</p>
<!--内部园-->
<p class="inner-circle">
<p class="p11">a</p>
<p class="p12">b</p>
<p class="p13">c</p>
<p class="p14">d</p>
<p class="p15">e</p>
<p class="p16">f</p>
</p>
</p>
<p class="start-game">
<label for="num">
<input
type="text"
id="num" name="num"
placeholder="请输入外数字(0-2)）"
/>
</label>
<a href="javascript:void(0);">开始</a>
</p> * {
margin: 0;
}
.rotate {
position: relative;
margin: 0 auto;
width: 400px;
height: 400px;
text-align: center;
color: #fff;
font-size: 50px;
border-radius: 50%;
background: antiquewhite;
}
.tn {
transition: all 3s cubic-bezier(.11,.77,.2,.94);
transform-origin: 50% 50%;
}
.out-circle {
position: absolute;
width: 300px;
height: 300px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
/*基础旋转的圆*/
.out-circle p {
position: absolute;
display: block;
margin: 0 auto;
left: 0;
right: 0;
width: 30px;
height: 30px;
line-height: 30px;
background: red;
/*以自己的宽度的一半 为 x，以父盒子的高度一半 为 y， 作为旋转点。*/
transform-origin: 15px 150px;
border-radius: 50%;
font-size: 16px;
}
.inner-circle {
position: absolute;
width: 200px;
height: 200px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
/*基础旋转的圆*/
.inner-circle p {
position: absolute;
display: block;
margin: 0 auto;
left: 0;
right: 0;
width: 30px;
height: 30px;
line-height: 30px;
background: #4eff00;
transform-origin: 15px 100px;
border-radius: 50%;
font-size: 16px;
}
.p11 {
transform: rotate(0deg);
}
.p12 {
transform: rotate(60deg);
}
.p13 {
transform: rotate(120deg);
}
.p14 {
transform: rotate(180deg);
}
.p15 {
transform: rotate(240deg);
}
.p16 {
transform: rotate(300deg);
}
.p1 {
transform: rotate(0deg);
}
.p2 {
transform: rotate(120deg);
}
.p3 {
transform: rotate(240deg);
}
a {
padding: 2.5px 10px;
background: #0ebeff;
border-radius: 5px;
color: #fff;
text-decoration: none;
}
.start-game {
position:absolute;
top: 20px;
left: 20px;
} (function () {
let deg = 0;
// 基础角度
let baseDeg = 120;
let $input = $('#num');
// 多少个旋转点
let blocks = 360 / baseDeg;
let k = null;
let flag = false;
const $rotate = $('.rotate');
// 0 1 2
$('a').on('click', function () {
var num = $input.val();
// 当前旋转 位置
var curLc = deg % 360 / 120;
// 待旋转的角度
deg = deg + 4 * 360 + (2*blocks - num - curLc) * baseDeg;
if (flag === true) {
return false;
}
flag = true;
clearInterval(k);
k = null;
$rotate.addClass('tn');
$rotate.css({
'transform': `rotate(${deg}deg)`
});
// 监听过渡结束效果！--没加入兼容性
$rotate.on('transitionend', function () {
flag = false;
$(this).removeClass('tn');
let timeK = null;
// 抽奖后 圆盘动旋转
setTimeout(() => {
k = timeK = setInterval( () => {
var temDeg = deg.toString();
if (k !== timeK) {
clearInterval(timeK);
return false;
}
if ($rotate.hasClass('tn')) {
return false;
}
// 一下代码 正则是为了解决 js 小数点 计算 问题。
temDeg = (/\./).test(temDeg) ? temDeg.replace(/\.\d+/, function ($1) {
var result = $1.length === 2 ? `${$1.substr(1)}0`: `${$1.substr(1)}`;
return result
}) : `${temDeg}00`;
temDeg = parseInt(temDeg);
temDeg += 5;
temDeg = temDeg.toString().split('');
temDeg.splice(temDeg.length - 2, 0, '.');
temDeg = temDeg.join('');
deg = parseFloat(temDeg);
$(this).css({
'transform': `rotate(${deg}deg)`
});
}, 13)
}, 1000);
});
})
})()相关文章：
PHP转盘抽奖接口实例，php转盘抽奖
手机端转盘抽奖代码分享
以上就是案例分享转盘抽奖的demo（附代码）的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的案例分享转盘抽奖的demo（附代码）全部内容，希望文章能够帮你解决案例分享转盘抽奖的demo（附代码）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】