文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

vue开发微信商城项目总结之五--vue实现九宫格抽奖

根据产品提出的需求， 需要做一个抽奖活动页面 需求简介 九宫格抽奖，中奖概率可配置，以九宫格转盘的形式进行抽奖，奖品分为三类， 实物类奖品，收货人信息可编辑，默认为登陆用户，可生成订单 福币类奖品，直接发放...，可在交易明细中查看 优惠劵类奖品，交易明细中查看 九宫格转动之后，中奖之前，要进行降速处理，获奖后可以在右上角查看中奖记录， 活动未开始不能抽奖，并且更换按钮状态 示意图 ?...该项目脱离了Jquery，采用原生js和vue实现 项目地址在这里 后台接口结构 { "bizCode": "000000", "bizMessage": "", "data": {...endTime": 1601446191000, "currTime": 1506751791732, "title": "奖品丰厚", "lotteryDesc": "100中奖...defineId：活动id remainingTimes：剩余抽奖次数 beginTime：活动开始时间 endTime活动结束时间 currTime:当前时间 title：活动标题 prizeInfo：奖品信息

1.4K20

如何优雅的实现一个九宫格抽奖

作者：黄鹏 如何优雅的实现一个九宫格抽奖 九宫格抽奖是在移动端常见开发功能点之一，那如何实现一个高度可复用的九宫格逻辑就显的特别重要了。接下来我们来分析下如何实现一个优雅的抽奖功能。 功能分析 ?...通过先写出所有小方格的css,（每一个停留区间实现一套css。八个就写八次。）然后js 中只需要不停的替换class名称就行了。...部分的代码搬到sass 中，减少js 代码的冗余，并通过css 3d 加速，使用页面效果更加流畅。...总结 优点：因为用css写的，效果看起来比js写起来的顺滑许多。 缺点：兼容代码过去。且不易扩展。如果不是九宫格，是十宫格，十一宫格。修改的地方感觉就多了。...定义合理的数据结构。（采用链表的形式） 服务端返回的奖品信息列表的一般形式，可能会有其他信息，这里就不列出来了。

2.1K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    用60行代码实现一个高性能的圣诞抽抽乐H5小游戏(含源码)

    将收获 •防抖函数的应用•用css实现九宫格布局•生成n维环形坐标的算法•如何实现环形随机轨道运动函数•实现加速度动画•性能分析与优化 设计思路 ?...为了进一步提高性能,本文介绍的方法,将使用坐标法,将操作dom的成本降低,完全由js实现滑块的路径的计算,滑块元素采用绝对定位,让其脱离文档流,避免其他元素的重绘等等,最后点击按钮我们会使用防抖函数来避免频繁执行函数...九宫格布局实现 为了让大家更加熟悉dom结构,这里我就不用js动态生成了.如下html结构: 圣诞抽抽乐...,当然以上函数只是基本的动画, 还没有实现在随机位置停止, 以及滑块的加速度运动,这块需要一定的技巧和js基础知识比如闭包. 3.1 加速度运动 加速度运动其实很简单,比如每转过一圈将setTimeout...路径的长度 * @param {number} random 中奖坐标 */ function run(el, path, n = 1, speed = 60, i = 0, len = path.length

    1.4K21

    如何优雅的实现一个九宫格抽奖

    作者：黄鹏 如何优雅的实现一个九宫格抽奖 九宫格抽奖是在移动端常见开发功能点之一，那如何实现一个高度可复用的九宫格逻辑就显的特别重要了。接下来我们来分析下如何实现一个优雅的抽奖功能。 功能分析 ?...通过先写出所有小方格的css,（每一个停留区间实现一套css。八个就写八次。）然后js 中只需要不停的替换class名称就行了。...部分的代码搬到sass 中，减少js 代码的冗余，并通过css 3d 加速，使用页面效果更加流畅。...总结 优点：因为用css写的，效果看起来比js写起来的顺滑许多。 缺点：兼容代码过去。且不易扩展。如果不是九宫格，是十宫格，十一宫格。修改的地方感觉就多了。...定义合理的数据结构。（采用链表的形式） 服务端返回的奖品信息列表的一般形式，可能会有其他信息，这里就不列出来了。

    1.4K10

    7 个沙雕又带有陷阱的 JS 面试题

    在 JS 面试中，经常会看到一些简单而又沙雕的题目，这些题目包含一些陷阱，但这些在我们规范的编码下或者业务中基本不会出现。...因此 JS 引荐将b = 0 表达式解释为 window.b = 0。 如下图所示，函数 foo 中的 i 都是一个偶然创建的全局变量： ? 同样，在咱们的问题中，b 是一个偶然创建的全局变量。...答案 上面代码中 for() 后加了一个分号(;) ，加上分号，JS 会认为该语句结束，所以 for 循环执行了4次空语句，当退出循环的时候，此时的 i 值为 4。...答案 这里需要注意的 return 和 [items] 之间已经换行了，JS 会在换行之间自动插入分号。...但是，还是有一小部分的面试中会被问到。 当然，虽然都说是沙雕题目，但这些是可以评估你是否精通 JS，还是有我们学习的知识的。 在面试中，你还遇到哪些像这样的题目，欢迎留言讨论。

    56420

    【趣味操作】Terminals显示带有酷炫linux标志的基本硬件信息

    下面介绍两款可用于显示Linux标志及基础硬件信息的命令，分别是ScreenFetch和Linux_Logo/linuxlogo，二者都可以实现上述需求，这篇文章将会从安装、使用和截图三个方面介绍，使用方面在此仅介绍最简单的使用...ScreenFetch screenFetch 是一个能够在截屏中显示系统/主题信息的命令行脚本。它可以在 Linux，OS X，FreeBSD 以及其它的许多类Unix系统上使用。...这个方便的 Bash 脚本可以用来生成那些漂亮的终端主题信息和用 ASCII 构成的发行版标志，就像如今你在别人的截屏里看到的那样。...它会自动检测你的发行版并显示 ASCII 版的发行版标志，并且在右边显示一些有价值的信息。...v22+ 或更新版本 $ dnf install linux_logo Use $ linux_logo Screenshot Quote 用 screenfetch 和 linux_logo 显示带有酷炫

    1.8K20

    通用抽奖工具之需求分析

    抽奖五要素 常见抽奖场景与归类 下面是我列出来的一些常见的抽奖场景： 红包雨、糖果雨、打地鼠、大转盘(九宫格)、考眼力、答题闯关、游戏闯关、支付刮刮乐、积分刮刮乐等等活动营销场景。...、幸运大转盘(九宫格)、考眼力 时间维度 按时间抽奖 是否多场次 单场次次数限制(次) 总场次次数限制(次) 红包雨 是 1 N 糖果雨 是 1 N 打地鼠 是 N N 幸运大转盘(九宫格) 否 N...抽奖五要素 通过上面的分析我们已经得到了抽奖的三要素 活动 场次 奖品 那还有什么要素我们还没聊到呢？接下来来看。 第四要素：中奖概率 抽奖自然离不开奖品的中奖概率的设置。...关于中奖概率我们支持如下灵活的配置： 1. 手动设置奖品中奖概率 2....100%，否则剩余部分默认添加为空奖的中奖概率。

    6.4K10

    京东开源了十二个抽奖组件！！！

    想当年大师兄刚入行的时候，领导分配的第一个任务就是做一个九宫格抽奖程序，不仅要求中奖概率还要求中奖范围，更重要的是不能有人中奖！！！...当时的痛苦场景大师兄还历历在目，写的头都大了 为了不让前端同行们再为抽奖程序而发愁，今天大师兄就告诉大家一个好消息，一款由京东前端团队出品的抽奖组件开源了！！！...使用了当下极为先进的Vue3与TypeScript和NutUI 特点 一共包含 12 种抽奖组件 UI 设计基于京东 APP 10.0 视觉规范 官网提供详尽的文档和充足的代码示例 基于 Vue 3.0...，也支持 TypeScript，支持按需引入 便捷灵活的自定义设置 包含12种常见的抽奖组件 TurnTable 大转盘抽奖 Marquee 跑马灯抽奖 quareNine 九宫格抽奖 ScratchCard...，支持设置奖品池、中奖奖品、自定义样式等，提供开始、结束等回调函数，还可以调整动画的时间、运转频率等。

    3K30

    通用抽奖工具之需求分析

    抽奖五要素 常见抽奖场景与归类 下面是我列出来的一些常见的抽奖场景： 红包雨、糖果雨、打地鼠、大转盘(九宫格)、考眼力、答题闯关、游戏闯关、支付刮刮乐、积分刮刮乐等等活动营销场景。...、幸运大转盘(九宫格)、考眼力 时间维度 按时间抽奖 是否多场次 单场次次数限制(次) 总场次次数限制(次) 红包雨 是 1 N 糖果雨 是 1 N 打地鼠 是 N N 幸运大转盘(九宫格) 否 N...抽奖五要素 通过上面的分析我们已经得到了抽奖的三要素 活动 场次 奖品 那还有什么要素我们还没聊到呢？接下来来看。 第四要素：中奖概率 抽奖自然离不开奖品的中奖概率的设置。...关于中奖概率我们支持如下灵活的配置： 1. 手动设置奖品中奖概率 2....100%，否则剩余部分默认添加为空奖的中奖概率。

    6.4K20

    为什么网站中的CSS或JS会带有v或version参数

    在查看网页源码的时候经常会发现带有类似 ?v=13566 或者 ?version=15678 的 CSS 和 JS 文件。如下所示： js?...第二、客户端会缓存这些CSS或JS文件，每次更新了 JS 或 CSS 文件后，改变版本号，客户端浏览器就会重新下载新的JS或CSS文件，起到刷新缓存的作用。...大家有时候会发现修改了CSS样式或者JS文件，刷新页面的时候不变，是因为客户端缓存了 CSS 或者 JS 文件，导致修改不省心，这时候清一下缓存或者强制刷新一下就好了，因此加上参数还是有一定好处的！...原理： 例如 .htaccess 设置的 CSS、JS 缓存都有一个过期时间，如果在访客的浏览器中已经缓存了这些文件，在这些缓存未过期之前，浏览器只会优先从缓存中读取这些 CSS 和 JS 文件，如果你在服务器上修改了这些文件...总结： 其实CSS文件后面的问号起不到实际作用，仅能当作后缀，如果用问号加参数的方法，可以添加版本号等信息，同时可以刷新一下浏览器端的缓存。一个小小的细节，可以给我们带来很大的方便。

    4.3K10

    『组件』大转盘、刮刮乐、老虎机……

    什么是组件： 组件是视图层的基本组成单元。 组件自带一些功能与微信风格的样式。 一个组件通常包括开始标签和结束标签，属性来修饰这个组件，内容在两个标签之内。... 官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 本期给大家带来的是7个微信小程序精美组件。 大转盘组件 ?...//转动速度 awardNumer: 2, //中奖区域从1开始 mode: 1, //1是指针旋转，2为转盘旋转 callback: () => {...1～9 speed: 100, // 速度值 callback: () => { //结束回调 } }) 九宫格翻纸牌组件 ?.../utils/card.js' JS中实例调用： this.card = new Card(this,{ data: [ //宫格信息，内联样式、是否是反面、是否运动、对应奖项 {inlineStyle

    3.7K60

    不容忽视的JS敏感信息泄露

    而本文将要介绍的JS泄露敏感信息问题也是如此，攻击者不仅可以轻松收集用户手机号，姓名等隐私信息，更可以借此攻入企业后台甚至是getshell。...一些粗心的开发者将各式敏感信息存储在JavaScript脚本中，由于JS的特性，攻击者可以对这些信息一览无余，从而导致对WEB服务和用户隐私造成不同程度的威胁。...三、漏洞的分类及利用 根据泄露的内容、利用方式以及带来的危害不同，大致可以将JS敏感信息泄露分为以下三类： 1....下面这个某大型互联网服务提供商的房产后台页面引入的js文件泄露后台接口信息，就是非常典型的例子： （信息泄露源是房产管理登陆后台页面下的common.js） （js文件中的urlMap对象内容完整的泄露了后台所有功能实现的...页面内JS以及AJAX请求泄露用户敏感信息 经过以往测试经验的归纳，此类漏洞常见该类型的泄露常见于网站评论功能实现处。其实该类型的漏洞比通过收集用户敏感信息来的更加快捷容易。

    4.5K10

    一个基于 Js + Canvas 的【大转盘 & 九宫格 & 老虎机】抽奖库！

    大家好,我是前端实验室的小师妹！一名资深的互联网玩家，专注分享大前端领域技术、面试宝典、学习资料等~ 前言 在前端开发中，随机抽奖活动的需求大家一定都遇到过吧~ 那你还在使用Div写抽奖页面布局吗？...说多了都是泪，我们还是看看怎么实现吧~ 关于 lucky-canvas 一个基于 Js + Canvas 的【大转盘 & 九宫格 & 老虎机】抽奖， 致力于为 web 前端提供一个功能强大且专业可靠的组件...lucky-canvas 功能特点 自由配置 奖品 / 文字 / 图片 / 颜色 / 按钮均可自由配置；支持同步 / 异步抽奖；中奖概率前 / 后端可控 多端适配 支持 JS / TS / JQ / Vue...UniApp / Taro 等；并且多端使用 / 表现形式完全一致 响应式 自动根据设备 dpr 调整清晰度；并支持使用 百分比 / rem / rpx 属性来适配移动端布局 快速上手体验 1.在 Js...LuckyWheel, LuckyGrid } from '@lucky-canvas/vue' // 大转盘抽奖 Vue.components('LuckyWheel', LuckyWheel) // 九宫格抽奖

    3.5K30

    10分钟用Python做个微信朋友圈抽奖九宫格

    最近在朋友圈看到个好玩的抽奖九宫格： ? 随便点开一个： ? 哈哈，笑出猪叫！这个玩法利用了朋友圈发长图会显示中间局部的设定，搞笑之余也为朋友圈广告营销贡献了新思路。...制作图的过程也不复杂，长图对应部分设计好，最后整合到一起就 OK 了，就是一张张地重复操作略显麻烦。想到这，不禁嘴角一翘、微微一笑，用 Python 的 PIL 模块来批量生成九宫格图片，不就好了？...九句不同的广告语参考文章开头朋友圈图片，我们通过 Python 字典将表情图和广告语对应到不同的九宫格图片： content={ "back_img":"paper.jpg", "001..."ad": '老板，看面相，你应该买100盒月饼', "head": '005.jpg' }, "006": { "ad": '老板，恭喜你中奖了...既然我们是要用代码来批量生产图片，每个图片目前可变的是表情图和广告语，代码中我们就把完整生成一张图的过程封装成函数，这样每次给定相应参数调用该函数，即可批量生成我们需要的九宫格抽奖长图了。

    1.2K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券