【实例简介】

【调试步骤】

# 安装依赖

npm install

# 开启本地服务器localhost:8088

npm run dev

# 发布环境

npm run build

#然后静待你的浏览器打开一个网页，按F12 进入手机模拟器，查看效果最佳(推荐chrome浏览器，前端开发者的必备)

【实例截图】

【核心代码】

{{item.count}}

{{item.name}}

今日免费抽奖次数： {{ lottery_ticket}}
活动规则

1.每日签到后，即可获得一次幸运大转盘的机会，仅限当天有效，过期作废。 2.金币抽奖，每10个金豆可兑换一次大转盘机会。

2.金币抽奖，每10个金豆可以兑换一次大转盘抽奖机会

3.所中金豆或积分到【我的账户】中查询。累计达到100金豆及以上，可以兑换相应奖品

{{toast_title}}

关闭

export default {

data() {

return {

easejoy_bean: 0, //金豆

lottery_ticket: 0, //抽奖次数

prize_list: [

{

icon: require("../assets/img/bean_500.png"), // 奖品图片

count: 10, // 奖品数量

name: "易趣豆", // 奖品名称

isPrize: 1 // 该奖项是否为奖品

},

{

icon: require("../assets/img/bean_five.png"),

count: 5,

name: "豆",

isPrize: 1

},

{

icon: require("../assets/img/bean_one.png"),

count: 10,

name: "易趣豆",

isPrize: 1

},

{

icon: require("../assets/img/point_five.png"),

count: 5,

name: "积分",

isPrize: 1

},

{

icon: require("../assets/img/point_ten.png"),

count: 10,

name: "积分",

isPrize: 1

},

{

icon: require("../assets/img/bean_500.png"),

count: 10,

name: "易趣豆",

isPrize: 1

},

{

icon: require("../assets/img/give_up.png"),

count: 0,

name: "未中奖",

isPrize: 0

},

{

icon: require("../assets/img/bean_500.png"),

count: 10,

name: "易趣豆",

isPrize: 1

}

], //奖品列表

toast_control: false, //抽奖结果弹出框控制器

hasPrize: false, //是否中奖

start_rotating_degree: 0, //初始旋转角度

rotate_angle: 0, //将要旋转的角度

start_rotating_degree_pointer: 0, //指针初始旋转角度

rotate_angle_pointer: 0, //指针将要旋转的度数

rotate_transition: "transform 6s ease-in-out", //初始化选中的过度属性控制

rotate_transition_pointer: "transform 12s ease-in-out", //初始化指针过度属性控制

click_flag: true, //是否可以旋转抽奖

index: 0

};

},

created() {

this.init_prize_list();

},

computed: {

toast_title() {

return this.hasPrize

? "恭喜您，获得" this.prize_list[this.index].count ' ' this.prize_list[this.index].name

: "未中奖";

},

toast_pictrue() {

return this.hasPrize

? require("../assets/img/congratulation.png")

: require("../assets/img/sorry.png");

}

},

methods: {

//此方法为处理奖品数据

init_prize_list(list) {},

rotate_handle() {

this.index = 1 //指定每次旋转到的奖品下标

this.rotating();

},

rotating() {

if (!this.click_flag) return;

var type = 0; // 默认为 0 转盘转动 1 箭头和转盘都转动(暂且遗留)

var during_time = 5; // 默认为1s

var random = Math.floor(Math.random() * 7);

var result_index = this.index ; // 最终要旋转到哪一块，对应prize_list的下标

var result_angle = [337.5, 292.5, 247.5, 202.5, 157.5, 112.5, 67.5, 22.5]; //最终会旋转到下标的位置所需要的度数

var rand_circle = 6; // 附加多转几圈，2-3

this.click_flag = false; // 旋转结束前，不允许再次触发

if (type == 0) {

// 转动盘子

var rotate_angle =

this.start_rotating_degree

rand_circle * 360

result_angle[result_index] -

this.start_rotating_degree % 360;

this.start_rotating_degree = rotate_angle;

this.rotate_angle = "rotate(" rotate_angle "deg)";

// // //转动指针

// this.rotate_angle_pointer = "rotate(" this.start_rotating_degree_pointer 360*rand_circle "deg)";

// this.start_rotating_degree_pointer =360*rand_circle;

var that = this;

// 旋转结束后，允许再次触发

setTimeout(function() {

that.click_flag = true;

that.game_over();

}, during_time * 1000 1500); // 延时，保证转盘转完

} else {

//

}

},

game_over() {

this.toast_control = true;

this.hasPrize = this.prize_list[this.index].isPrize

},

//关闭弹窗

close_toast() {

this.toast_control = false;

}

}

};

.container {

width: 100%;

}

.lucky-wheel {

width: 100%;

height: 31.5625rem;

background: rgb(252, 207, 133) url("../assets/img/color_pillar.png") no-repeat

center bottom;

background-size: 100%;

padding-top: 1.5625rem;

}

.lucky-title {

width: 100%;

height: 8.125rem;

background: url("../assets/img/lucky_title.png") no-repeat center top;

background-size: 100%;

}

.wheel-main {

display: flex;

align-items: center;

justify-content: center;

position: relative;

}

.wheel-bg {

width: 18.4375rem;

height: 18.4375rem;

background: url("../assets/img/draw_wheel.png") no-repeat center top;

background-size: 100%;

color: #fff;

font-weight: 500;

display: flex;

flex-direction: column;

justify-content: center;

align-content: center;

transition: transform 3s ease;

}

.wheel-pointer-box {

position: absolute;

top: 50%;

left: 50%;

z-index: 100;

transform: translate(-50%, -60%);

width: 5.3125rem;

height: 5.3125rem;

}

.wheel-pointer {

width: 5.3125rem;

height: 5.3125rem;

background: url("../assets/img/draw_btn.png") no-repeat center top;

background-size: 100%;

transform-origin: center 60%;

}

.wheel-bg div {

text-align: center;

}

.prize-list {

width: 100%;

height: 100%;

position: relative;

}

.prize-list .prize-item {

position: absolute;

top: 0;

left: 0;

z-index: 2;

}

.prize-list .prize-item:first-child {

top: 0;

left: 8.3125rem;

transform: rotate(20deg);

}

.prize-list .prize-item:nth-child(2) {

top: 2.8rem;

left: 10.8rem;

transform: rotate(67deg);

}

.prize-list .prize-item:nth-child(3) {

top: 6.4rem;

left: 10.6rem;

transform: rotate(-250deg);

}

.prize-list .prize-item:nth-child(4) {

top: 9rem;

left: 8.2125rem;

transform: rotate(-210deg);

}

.prize-list .prize-item:nth-child(5) {

top: 9.2125rem;

left: 4.4rem;

transform: rotate(-160deg);

}

.prize-list .prize-item:nth-child(6) {

top: 6.3875rem;

left: 1.9rem;

transform: rotate(-111deg);

}

.prize-list .prize-item:nth-child(7) {

top: 2.8rem;

left: 1.8125rem;

transform: rotate(-69deg);

}

.prize-list .prize-item:nth-child(8) {

top: 0;

left: 4.5rem;

transform: rotate(-20deg);

}

.prize-item {

width: 5.875rem;

height: 9rem;

}

.prize-pic img {

width: 4.0625rem;

height: 2.5rem;

margin-top: 1.5625rem;

}

.prize-count {

font-size: 0.875rem;

}

.prize-type {

font-size: 0.75rem;

}

.main {

position: relative;

width: 100%;

min-height: 14.25rem;

background: rgb(243, 109, 86);

padding-bottom: 1.6875rem;

}

.main-bg {

width: 100%;

height: 6.5625rem;

position: absolute;

top: -3.4375rem;

left: 0;

background: url("../assets/img/luck_bg.png") no-repeat center top;

background-size: 100%;

}

.bg-p {

width: 100%;

height: 2.95rem;

background: rgb(252, 207, 133);

}

.content {

position: absolute;

top: 0.175rem;

left: 0;

background: rgb(243, 109, 86);

width: 100%;

height: 5.1875rem;

font-size: 1.125rem;

color: #ffeb39;

padding-left: 6.75rem;

}

.content div {

text-align: left;

}

.tip {

position: relative;

margin: 2.5rem auto 0;

width: 17.5rem;

border: 1px solid #fbc27f;

}

.tip-title {

position: absolute;

top: -1rem;

left: 50%;

transform: translate(-50%, 0);

font-size: 1rem;

color: #fccc6e;

background: rgb(243, 109, 86);

padding: 0.3125rem 0.625rem;

}

.tip-content {

padding: 1.5625rem 0.625rem;

font-size: 0.875rem;

color: #fff8c5;

line-height: 1.5;

}

.toast-mask {

position: fixed;

top: 0;

left: 0;

background: rgba(0, 0, 0, 0.6);

z-index: 10000;

width: 100%;

height: 100%;

}

.toast {

position: fixed;

top: 50%;

left: 50%;

z-index: 20000;

transform: translate(-50%, -50%);

width: 15.4375rem;

background: #fff;

border-radius: 0.3125rem;

padding: 0.3125rem;

background-color: rgb(252, 244, 224);

}

.toast-container {

position: relative;

width: 100%;

height: 100%;

border: 1px dotted #fccc6e;

}

.toast-picture {

position: absolute;

top: -6.5rem;

left: -1.5rem;

width: 18.75rem;

height: 8.5625rem;

}

.toast-pictrue-change {

position: absolute;

top: -1.5rem;

left: -1.375rem;

width: 17.5rem;

height: 3.125rem;

}

.toast-title {

padding: 2.8125rem 0;

font-size: 18px;

color: #fc7939;

text-align: center;

}

.toast-btn {

display: flex;

align-items: center;

justify-content: center;

margin-bottom: 0.9375rem;

}

.toast-btn div {

background-image: -moz-linear-gradient(

-18deg,

rgb(242, 148, 85) 0%,

rgb(252, 124, 88) 51%,

rgb(252, 124, 88) 99%

);

background-image: -ms-linear-gradient(

-18deg,

rgb(242, 148, 85) 0%,

rgb(252, 124, 88) 51%,

rgb(252, 124, 88) 99%

);

background-image: -webkit-linear-gradient(

-18deg,

rgb(242, 148, 85) 0%,

rgb(252, 124, 88) 51%,

rgb(252, 124, 88) 99%

);

box-shadow: 0px 4px 0px 0px rgba(174, 34, 5, 0.7);

width: 4.6875rem;

height: 1.875rem;

border-radius: 1.875rem;

text-align: center;

line-height: 1.875rem;

color: #fff;

}

.close {

position: absolute;

top: -0.9375rem;

right: -0.9375rem;

width: 2rem;

height: 2rem;

background: url("../assets/img/close_store.png") no-repeat center top;

background-size: 100%;

}

html转盘游戏,html5大转盘抽奖实例源码(基于vue.js)相关推荐

  1. html5公司年终抽奖程序源码按数字随机抽奖

    下载地址 按键盘空格键或者字母A可进行抽取,隐藏菜单请按ESC.ESC菜单中高级设置可以设置参与人数,格子大小,重置抽奖数据等信息.点击已经中奖格子并输入点击的格子编号可取消该格子中奖状态,并清除中奖 ...

  2. java 微服务源码_java 微服务 入门级实例源码(基于SpringCloud)

    [实例简介] 实例中包含三个项目 eurekaServer(服务注册中心),provicer_demo(微服务提供者),caller_demo(微服务调用者),并对 服务器直接返回与调用微服务的性能 ...

  3. qq开放平台之站内应用-php抽奖大转盘,jQuery实现大转盘抽奖活动仿QQ音乐代码分享...

    jQuery实现大转盘抽奖活动仿QQ音乐抽奖特效源码是一款基于jQuery,点击大转盘开始抽奖可抽到绿钻的仿qq音乐抽奖转盘的代码. 运行效果图:--------------------------- ...

  4. 手机抽奖页面代码html,html5大转盘抽奖支持手机转盘抽奖代码

    特效描述:html5 大转盘抽奖 支持手机 转盘抽奖代码.html5转盘,html5抽奖,手机转盘,手机抽奖,手机转盘抽奖,可配置奖品抽奖. 代码结构 1. 引入CSS 2. 引入JS 3. HTML ...

  5. 团建游戏----快乐大转盘

    明阳天下团建游戏----快乐大转盘 游戏类型:活动或团队 参加人数:16人以上为佳,可多达150人,人员最好为偶数. 游戏时间:讲师自行掌握       所需材料:无          场地要求:大会 ...

  6. 2022修复版PHP活动现场大屏幕互动系统源码 带微信上墙+3D签到投票抽奖+互动游戏+红包等功能

    介绍: 此源码亲测,网站效果相当震撼,如果非要评价这套源码,牛逼就完了,这套源码某平台售价2000, 适用于大型活动现场.婚礼现场等等,附完整教程 2022修复版PHP活动现场大屏幕互动系统源码 带微 ...

  7. PHP活动现场大屏幕互动系统源码 带微信上墙+3D签到投票抽奖+互动游戏+红包等功能

    简介: 修复版PHP活动现场大屏幕互动系统源码 带微信上墙+3D签到投票抽奖+互动游戏+红包等功能 使用前提:需要公众号且必须是服务号,而且服务号必须通过微信认证,网页要开启ssl证书(也就是强制ht ...

  8. HTML5期末大作业：网站——美丽家乡(南京介绍7个页面) 家乡文化介绍 学生DW网页设计作业源码(HTML+CSS+JS) ~学生dreamweaver网页设计作业成品

    HTML期末大作业~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到 ...

  9. html5坦克大战游戏,HTML5游戏《坦克大战》完整源码

    [实例简介] HTML5游戏<坦克大战>完整源码 请不要商用,仅限学习使用 [实例截图] [核心代码] HTML5<坦克大战>完整源码 └── HTML5<坦克大战> ...

最新文章

  1. 用了3年CAT，这次我想选择SkyWalking，老板反手就是一个赞！
  2. Linux 常用命令笔记
  3. 深度学习100例 | 第51天-目标检测算法（YOLOv5）（入门篇）
  4. Consensus Mechanisms — As Detailed and Concise as possible!
  5. Fast Matrix Operations
  6. 广州大学计算机网络期末考试2013,广州大学计算机网络技术试卷(A卷)
  7. 2019年11月数据库流行度排行：前三甲大幅下跌 PM 应云而升 国产续领风云
  8. RedHat RealTime Kernel
  9. Shell脚本学习指南
  10. jersey_教程–带有Jersey和Spring的Java REST API设计和实现
  11. QT蓝牙调试助手、动态曲线绘制
  12. SpringCloud整合Skywalking实现链路追踪
  13. mysql datesub interval_Mysql之INTERVAL与DATE_SUB与EXTRACT函数的使用
  14. Windows11便签工具在哪 win11的便签在哪里打开
  15. c2-00支持java_双卡超长待机 经典实用诺基亚C2-00图赏
  16. 序列化和反序列化二叉树 -----前序,中序,后序,层序
  17. 论文Anonymous Zether实验复现（持续更）
  18. [SCOI2012]喵星球上的点名(后缀数组+莫队+ST表)
  19. 吴恩达《机器学习》——SVM支持向量机
  20. pip安装torch失败

热门文章

  1. SAP UI5 createBindingContext in local JSON model
  2. SAP UI5 Require Busy dialog
  3. ERP Configurable product不会被CRM中间件下载
  4. Cloud for Customer的shell布局介绍
  5. WordPress里的PHP AJAX call
  6. 如何把新建的UI component添加到新的workcenter里
  7. Web pack misc
  8. Java动态代理之InvocationHandler最简单的入门教程
  9. 最大流之最长递增子序列问题
  10. excel图表之道_学习笔记：Excel之图表布局