jq转盘抽奖
2024-10-09 07:24:54
之前项目的时候要写一个抽奖，自己写了以后就记录一下。
先是html
<div class="turntable_zhan">
<img class="yuanpan_zj" src="~/Content/Images/newjf/jiazhi.png" />
<img class="yuanpan_jinq" src="~/Content/Images/newjf/lunzhuangd.png" />
<img class="yuanpan_jinq2" src="~/Content/Images/newjf/lunzhuangc.png" />
<img class="yuanpan_renwu" src="~/Content/Images/newjf/lunzhuangb.png" />
<img class="yuanpan_renwu2" src="~/Content/Images/newjf/lunzhuanga.png" />
<img class="yuanpan_lijicj" src="~/Content/Images/newjf/lunzhuangzong.png" />
<div class="turntable_zhan_xz">
<img class="yuanpan" src="~/Content/Images/newjf/zhuangban.png" />
<canvas id="dial" width="1010" height="1010"></canvas>
<img class="yuanpan_zzhao" src="~/Content/Images/newjf/turnt_top.png" />
</div>
</div>
再是css
@font-face{
font-family: 'hyHei';
src: url('../font/hyliliangheij.ttf');
}
.turntable_zhan{
width:100%;
height:6.6rem;
position:relative;
margin-top:0.8rem;
}
.yuanpan{
position:absolute;
width:5.78rem;
height:5.78rem;
left:;
right:;
margin:auto;
z-index:;
}
.yuanpan_zj{
position:absolute;
width:2.68rem;
bottom:;
left:;
right:;
margin:auto;
z-index:;
}
.yuanpan_jinq{
position:absolute;
width:1.28rem;
bottom:-0.15rem;
left:1.79rem;
z-index:;
}
.yuanpan_jinq2{
position:absolute;
width:6.85rem;
top:-0.28rem;
left:;
right:;
margin:auto;
}
.yuanpan_renwu{
position:absolute;
width:1.36rem;
bottom:;
left:0.5rem;
z-index:;
}
.yuanpan_renwu2 {
position:absolute;
width:2.1rem;
bottom:;
right:0.54rem;
z-index:;
}
.yuanpan_lijicj{
width: 1.54rem;
position: absolute;
top: 2rem;
left:;
right:;
/* bottom: 0; */
margin: auto;
z-index:;
}
#dial{
position: absolute;
top: 0.34rem;
/* bottom: 0; */
right:;
left:;
margin: auto;
width: 5.07rem;
height: 5.07rem;
z-index:;
}
.yuanpan_zzhao{
position:absolute;
width:5.15rem;
height:5.15rem;
top:0.3rem;
right:;
left:;
z-index:;
margin:auto;
}
.turn_commodity_items{
position:absolute;
z-index:;
font-family:hyHei;
font-size:0.24rem;
}
.turn_commodity_items p{
position:absolute;
color:#c5d048;
text-shadow: #fff 2px 0 0, #fff 0 2px 0, #fff -2px 0 0, #fff 0 -2px 0;
}
.turn_commodity0{
top: 1rem;
left: 3.5rem;
}
.turn_commodity0 p{
top: -0.36rem;
left: -0.2rem;
}
.turn_commodity0 img{
width:0.55rem;
}
.turn_commodity1 {
top: 1.5rem;
left: 4.4rem;
}
.turn_commodity1 img{
width:0.72rem;
}
.turn_commodity1 p {
top: -0.2rem;
right: -0.75rem;
width: 1.2rem;
transform: rotate(45deg);
}
.turn_commodity2 {
font-size: 0.33rem;
transform: rotate(90deg);
width: 0.7rem;
top: 2.7rem;
left: 5.3rem;
}
.turn_commodity3{
top: 3.5rem;
left: 4.4rem;
}
.turn_commodity3 p{
width: 1.2rem;
transform: rotate(135deg);
top: 0.7rem;
left: 0.2rem;
}
.turn_commodity3 img{
width:0.56rem;
}
.turn_commodity4{
top: 3.8rem;
left: 3.45rem;
}
.turn_commodity4 p{
width:1.2rem;
top:1rem;
left:-0.26rem;
transform: rotate(180deg);
}
.turn_commodity4 img{
width:0.55rem;
transform: rotate(180deg);
}
.turn_commodity5 {
top: 3.3rem;
left: 2.4rem;
}
.turn_commodity5 p{
width:1.2rem;
transform:rotate(-135deg);
top:0.8rem;
left:-0.8rem;
}
.turn_commodity5 img{
width:0.84rem;
}
.turn_commodity6 {
top: 2.7rem;
left: 2rem;
}
.turn_commodity6 img{
width:0.8rem;
}
.turn_commodity6 p{
left:-0.8rem;
transform:rotate(-90deg);
}
.turn_commodity7{
font-size: 0.33rem;
transform: rotate(-45deg);
width: 0.7rem;
top: 1.2rem;
left: 2rem;
}
.turntable_zhan_xz{
position:inherit;
z-index:;
height: 5.78rem;
transition:all 3s ease;
}
样式地方我就不多说了。
window.onload = function () {
//设置rem
let w = $('body').width();
$('html').css('font-size', w / 7.5 + 'px');
mycanvas(); //绘制表盘
clickRotate();
$('body').css('opacity', '1');
}
let commodityarr = [ //这是物品的数据展示区 使用的时候记得吧图片位置更改。
{ name: 'iPhone11', img: '/Content/Images/newjf/wupa2.png' },
{ name: '智能手表', img: '/Content/Images/newjf/wupa5.png' },
{ name: '再来 一次', img: '' },
{ name: '蓝牙耳机', img: '/Content/Images/newjf/wupa4.png' },
{ name: '红米Note7', img: '/Content/Images/newjf/wupa3.png' },
{ name: '畅轻酸奶', img: '/Content/Images/newjf/wupa6.png' },
{ name: '褐色炭烧', img: '/Content/Images/newjf/wupa1.png' },
{ name: '再接 再厉', img: '' },
];
var commodityarrname = ['iPhone11', '智能手表', '再来一次', '蓝牙耳机', '红米Note7', '畅轻酸奶', '褐色炭烧', '再接再厉', ];
//抽奖数据
function mycanvas() { //绘制表盘
var num = 8; // 奖品数量
var c = document.getElementById("dial");
var ctx = c.getContext("2d");
for (var i = 0; i < num; i++) {
// 保存当前状态
ctx.save();
// 开始一条新路径
ctx.beginPath();
// 位移到圆心，下面需要围绕圆心旋转
ctx.translate(505,505);
// 从(0, 0)坐标开始定义一条新的子路径
ctx.moveTo(0, 0);
// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
ctx.rotate((360 / num * i + 360 / num / 2) * Math.PI / 180);
// 绘制圆弧
ctx.arc(0, 0,495, 0, 2 * Math.PI / num, false);
if (i % 2 == 0) {
ctx.fillStyle = '#43b2ef';
} else {
ctx.fillStyle = '#e3f6ff';
}
// 填充扇形
ctx.fill();
// 绘制边框
// 恢复前一个状态
ctx.restore();
}
//追加物品;
for (let i = 0; i < commodityarr.length; i++) {
$('.turntable_zhan_xz').append(`<div class="turn_commodity_items turn_commodity${i}">
<p>${commodityarr[i].name}</p>
<img src="${commodityarr[i].img}" />
</div>`
);
}
}
//点击旋转
function roter(s,a) { //s 度数 a 是中奖的下标
$('.turntable_zhan_xz').css({ transform: 'rotate(' + s + 'deg)' })
setTimeout(function () {
if(a != 7){
alert('恭喜你获得'+commodityarrname[a]);
} else {
alert('好可惜！没有中奖')
}
},3200)
}
//点击旋转
function clickRotate() {
var cs = 8; //转盘个数
var str = 0; //旋转的度数
var num = 0; //减去多余的度数
var des = 0; //随机的物品下标
$('.yuanpan_lijicj').click(function () {
des = Math.floor(Math.random() * 8)+1; //随机的物品
console.log(des);
switch (des) {
case 1:
num = str % 360;
str += 360 * 8 - num - (360/cs) * 0;
num = str % 360;
roter(str,0);
break;
case 2:
num = str % 360;
str += 360 * 8 - num - (360/cs) * 1;
num = str % 360;
roter(str,1)
break;
case 3:
num = str % 360;
str += 360 * 8 - num - (360/cs) * 2;
num = str % 360;
roter(str,2)
break;
case 4:
num = str % 360;
str += 360 * 8 - num - (360/cs) * 3;
num = str % 360;
roter(str,3)
break;
case 5:
num = str % 360;
str += 360 * 8 - num - (360/cs) * 4;
num = str % 360;
roter(str,4)
break;
case 6:
num = str % 360;
str += 360 * 8 - num - (360/cs) * 5;
num = str % 360;
roter(str,5)
break;
case 7:
num = str % 360;
str += 360 * 8 - num - (360/cs) * 6;
num = str % 360;
roter(str,6)
break;
case 8:
num = str % 360;
str += 360 * 8 - num - (360/cs) * 7;
num = str % 360;
roter(str,7)
break;
}
})
}
这边没有写概率。控制概率控制
控制这个就好
效果
最新文章
- 《learning hard C#学习笔记》读书笔记（20）异步编程
- Django 基本命令
- Scala 学习笔记（五）
- Pixel VS Point, FrameBuffer VS RenderBuffer
- worksteal thread pool
- iOS7 和 iOS6的页面兼容问题
- [分享]关于windows下的小技巧
- 前端优化:DNS预解析提升页面速度
- hihocoder#1054 : 滑动解锁（深度优先搜索）
- Android animation学习笔记之view/drawable animation
- Mr.Jobs
- MVC异步AJAX的三种方法（JQuery的Get方法、JQuery的Post方法和微软自带的异步方法）
- win平台下Path变量消失问题
- 使用selenium爬取网站动态数据
- 框架：初识Spring
- 29.如何不用 transition 和 animation 也能做网页动画
- 转换python脚本为可执行程序的方式
- 利用linux判断elf文件是64位还是32位
- WeChat-扫码支付
- zookeeper的c API 单线程与多线程问题 cli_st和cli_mt