之前项目的时候要写一个抽奖,自己写了以后就记录一下。

先是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;
} }) }

这边没有写概率。控制概率控制控制这个就好

效果

jq转盘抽奖的更多相关文章

  1. 简单JS旋转实现转盘抽奖效果

    闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域 比如,我选择了"区域2",结果就是这样 具体可以见下 ...

  2. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  3. javascript 转盘抽奖代码和计数器代码

    要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下  看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究...  效果预览: 一.模拟抽奖的实 ...

  4. canvas转盘抽奖

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...

  5. jquery——九宫格大转盘抽奖

    一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...

  6. 纯CSS3大转盘抽奖(响应式、可配置)

    源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...

  7. web:转盘抽奖

    移动web:转盘抽奖(幸运大转盘)   为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转 ...

  8. 移动web:转盘抽奖(幸运大转盘)

    为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转盘),游戏式(砸蛋/拼图...).... ...

  9. jquery转盘抽奖的研究

    先看效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

随机推荐

  1. xutils工具上传日志文件--后台服务器的搭建

    在上一篇文章中使用xutils将手机上保存的日志上传到后台服务器中,现在我们来讲后台服务器是如何搭建的 后台服务器采用jsp+sevlet+mysql的框架 首先讲mysql数据库的表的建立 在fil ...

  2. Spring 面试详解

    SpringSpring就像是整个项目中装配bean的大工厂,在配置文件中可以指定使用特定的参数去调用实体类的构造方法来实例化对象.Spring的核心思想是IoC(控制反转),即不再需要程序员去显式地 ...

  3. ECSHOP 2.5.1 二次开发文档【文件结构说明和数据库表分析】

    ecshop文件架构说明 /* ECShop 2.5.1 的结构图及各文件相应功能介绍 ECShop2.5.1_Beta upload 的目录 ┣ activity.php 活动列表 ┣ affich ...

  4. HTML5实现DTMF(电话拨号按键信号)解码、编码,代码简单易于移植

    目录 一.前言 1.1 HTML5实现DTMF的一些动机 1.2 一些有效场景 (1) 10086 (2) 软电话 (3) 小玩具 二.DTMF频率按键对照表 三.DTMF信号解码 得到按键值 3.1 ...

  5. node+ajax实战案例(1)

    1.mysql入门 1.1.数据库相关概念 1.1.1.什么是数据? 描述事物的符号记录称为数据,描述事物的符号可以是数字.文字.声音.图片.视频等,有多种表现形式,都可以经过数字化后存入计算机 1. ...

  6. VS2017 快捷键

    VS2017注释:先CTRL+K 然后CTRL+C   (ctrl按住不松,松开k按c) 取消注释:先CTRL+K,然后CTRL+U  (ctrl按住不松,松开k按c)

  7. .Net Core 集成ExceptionLess分布式日志框架之本地化部署

    前言 公司目前使用的项目中关于日志记录这块,之前一直都是使用的Log4net 存放于后台文件中的,对于异常错误啊,或者需要查看一些详情错误的时候感觉很不方便,要到服务器上去打开日志文件检索错误,降低了 ...

  8. python中lambda匿名函数与函数之间的关系

  9. 大厂前端工程师教你如何使用css3绘制任意角度扇形+动画

    这里只是做下原理解释,原理:使用两个半圆做角度拼接.比如想绘制一个缺口朝右,缺口弧度30度角的扇形 资源网站搜索大全https://55wd.com 那么将由一个旋转65度角的半圆A+一个旋转-65度 ...

  10. css3 pointer-events(阻止hover、active、onclick等触发事件)

    pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target. /* Keyword values */ pointer-events: ...