位置: IT常识 - 正文

【JavaScript】制作一个抽奖转盘页面(javascript生成器)

编辑:rootadmin
【JavaScript】制作一个抽奖转盘页面

推荐整理分享【JavaScript】制作一个抽奖转盘页面(javascript生成器),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript生成器,javascript制作,javascript制作,javascriptz,运用javascript制作网页,javascript怎么弄,javascript生成器,javascript怎么弄,内容如对您有帮助,希望把文章链接给更多的朋友!

开发H5项目,有时会遇到一个需求,需要制作抽奖转盘的网页,这个实现步骤,如果拿现成的改来做是容易的,但是想着全靠自己做是不容易的,下面会讲,全靠自己做,能掌握到吗

目录一览1.设计网页2. 编写脚本3. 编写模块4. 实现方法1. 绘制转盘2. 开始抽奖4.运行效果1.设计网页

首先创建一个网页文件,例如index.html,制作抽奖转盘页面,源代码如下,通过修改样式<style>里设置好背景色,还有转盘组件的位置,再加一个抽奖按钮,写好大概逻辑,还有需要调用的一些方法

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Turntable 转盘</title><style>body{background-color: #333;}.box{text-align: center;}.box #box{width: 280px;height: 280px;}.box button{margin-top: 20px;padding: 0.6em 2.5em;font-size: 1em;border-radius: 10px;border-color: rgba(0, 0, 0, 0.4);color: #fff;background: linear-gradient(#eee,#f50);}</style></head><body><div class="box"><div id="box"></div><div><button id="btnStart">抽奖</button></div></div><script type="module">import Turntable from './turntable.js';//引用模块window.onload = () => {//...加载脚本}</script></body></html>2. 编写脚本

接着,写一个加载脚本的处理逻辑,代码如下,使用Turntable对象创建前,需要先引用一个模块

const t = new Turntable({window,elemId: 'box',});//TODO: 最多7个const resouce = [{image: './img/e7b2e38c8d66613d1dd869b199031d8e.jpeg',title: '特等奖'},{image: './img/b5ff4601d9679f502f8f9e737bdd7049.jpeg',title: '谢谢惠顾'},{image: './img/e7b2e38c8d66613d1dd869b199031d8e.jpeg',title: '一等奖'},{image: './img/b5ff4601d9679f502f8f9e737bdd7049.jpeg',title: '谢谢惠顾'},{image: './img/e7b2e38c8d66613d1dd869b199031d8e.jpeg',title: '二等奖'},{image: './img/e7b2e38c8d66613d1dd869b199031d8e.jpeg',title: '三等奖'},{image: './img/b5ff4601d9679f502f8f9e737bdd7049.jpeg',title: '谢谢惠顾'},];//加载图片资源可能有延迟,通过异步处理Promise.all(resouce.map((item)=>{return new Promise((resolve,reject)=>{let img = new Image();img.onload = () => {item.image = img;resolve(item);};img.onerror = reject;img.src = item.image;});})).then((res)=>{t.draw({// mode:1,goods:res,});});//设置按钮点击事件document.getElementById('btnStart').onclick = () => {t.onStart({// index: 3,//抽奖概率自己写,传入预定奖品的indexsuccess:(res)=>{// console.log('ok', res);const good = res.goods[res.index];if (good.title) {if (good.title.indexOf('奖')>=0) alert(`🙂恭喜恭喜您!抽到奖品${good.title}.`)else alert('🙆‍很遗憾!未中奖.')}else {alert(`🙂恭喜恭喜您!抽到奖品${res.index+1}.`)}}});}3. 编写模块

接下来,看上面有引用的一个模块文件turntable.js,没有的就把它新建好,在一个模块中去实现上面未实现的调用方法,代码如下

export default class Turntable {//定义私有属性#elemBgImg;#elemPointerImg;#bgImgCanvas;#pointerImgCanvas;/** * 构造函数 * */constructor(e){const { document } = e.window;// 获取占位元素(盒子)const elemBox = document.getElementById(e.elemId);// 创建元素const elemBgImg = document.createElement('img');const elemPointerImg = document.createElement('img');const size = elemBox.offsetWidth;// 设置元素样式elemBox.style.display = 'inline-block';elemBox.style.position = 'relative';elemBgImg.style.transform = `rotate(0deg)`;elemBgImg.style.pointerEvents = 'none';//屏蔽触摸点击elemPointerImg.style.pointerEvents = 'none';elemBgImg.style.position = 'absolute';elemPointerImg.style.position = 'absolute';elemPointerImg.style.margin = 'auto';elemBgImg.style.margin = 'auto';elemBgImg.style.left = 0;elemBgImg.style.top = 0;elemBgImg.style.right = 0;elemBgImg.style.bottom = 0;elemPointerImg.style.left = 0;elemPointerImg.style.top = 0;elemPointerImg.style.right = 0;elemPointerImg.style.bottom = 0;elemBgImg.width = size;elemBgImg.height = size;elemPointerImg.width = size*0.3;elemPointerImg.height = size*0.3;//将元素添加到占位元素(盒子)组件中elemBox.appendChild(elemBgImg);elemBox.appendChild(elemPointerImg);this.#elemBgImg = elemBgImg;this.#elemPointerImg = elemPointerImg;//转盘const bgImgCanvas = document.createElement('canvas');bgImgCanvas.width = size;bgImgCanvas.height = size;this.#bgImgCanvas = bgImgCanvas;//指针const pointerImgCanvas = document.createElement('canvas');pointerImgCanvas.width = elemPointerImg.width;pointerImgCanvas.height = elemPointerImg.height;this.#pointerImgCanvas = pointerImgCanvas;}/** * 销毁 * */destory(){this.#bgImgCanvas.remove();this.#pointerImgCanvas.remove();}/** * 绘制转盘组件 * */draw(config){//...}/** * 开始抽奖 * */onStart(config){//...}}4. 实现方法【JavaScript】制作一个抽奖转盘页面(javascript生成器)

接下来,写方法的实现细节要复杂得多,如果看着比较吃力,就需要补充数学知识哦,关键点是三角图形学中的勾股定理,请慢慢摸索,边学边做

1. 绘制转盘

先实现绘制转盘组件方法draw(),其中用到了数学的一个知识点:三角函数,代码如下

class Turntable {//定义私有属性#goods=[];#pointerDeg = 0;#mode = 0;//.../** * 绘制转盘组件 * */draw(config){const data = {padding: 5,//组件内边距goods: ['#f00','#0f0','#00f'],//默认三基色填充礼品区pointerColor: '#fa0',//指针色borderWidth: 10,//边框大小borderColor: '#fa0',//边框色imgSize: 40,//礼品图片大小mode:0,//工作模式: 0:转动转盘;1:转动指针};Object.assign(data,config);this.#mode = data.mode==0 ? 0 : 1;const bgImgCanvas = this.#bgImgCanvas;const bgImgCtx = bgImgCanvas.getContext('2d');const coodrinte = {padding: data.padding,r: bgImgCanvas.width/2-data.padding};coodrinte.centerO = coodrinte.padding + coodrinte.r;//先绘制转盘底座bgImgCtx.strokeStyle = data.borderColor;bgImgCtx.lineWidth = data.borderWidth;bgImgCtx.fillStyle = '#eee';bgImgCtx.beginPath();bgImgCtx.arc(coodrinte.centerO,coodrinte.centerO,coodrinte.r,0,Math.PI*2);bgImgCtx.fill();bgImgCtx.stroke();//再绘制转盘上的bgImgCtx.strokeStyle = 'rgba(255,255,255,0.3)';bgImgCtx.lineWidth = Math.max(1,data.borderWidth/3);bgImgCtx.textAlign = 'center';const r = coodrinte.r-bgImgCtx.lineWidth;//转盘角度(弧边)let startAngle = 0;let endAngle = 0;data.goods.forEach((item,index)=>{let good = {proportion: Math.round(1000/data.goods.length)/1000,//默认平分概率};switch(typeof item){case 'string':if (item.charAt(0)=='#') good.bgColor=item;else good.title=item;break;case 'object':Object.assign(good,item);break;default:throw new Error('定义参数goods有误');}good.startAngle = startAngle;good.endAngle = good.startAngle+Math.PI*2*good.proportion;//计算角度let angle = (good.endAngle-good.startAngle)/2-Math.PI*0.5+(index*good.proportion*Math.PI*2);//余弦函数cosA:表示在一个直角三角形中,∠A(非直角)的邻边与三角形的斜边的比let x = Math.cos(angle)*(r/2);//正弦函数sinA:表示在一个直角三角形中,∠A(非直角)的对边与三角形的斜边的比let y = Math.sin(angle)*(r/2);// console.log('angle '+angle, 'x='+x+',y='+y);good.center = {x:coodrinte.centerO+x,y:coodrinte.centerO+y,};data.goods[index] = good;startAngle = good.endAngle;});//绘制分布在转盘中的图案data.goods.forEach((item,index)=>{if (item.bgColor){bgImgCtx.fillStyle = item.bgColor;}//画划分的区域(弧边)bgImgCtx.beginPath();bgImgCtx.moveTo(coodrinte.centerO,coodrinte.centerO);bgImgCtx.arc(coodrinte.centerO,coodrinte.centerO,r,item.startAngle-Math.PI*0.5,item.endAngle-Math.PI*0.5);bgImgCtx.closePath();if (!item.bgColor) {bgImgCtx.stroke();bgImgCtx.fillStyle = '#f50';}else{}bgImgCtx.fill();//是否是转动底盘if (this.#mode==0) {bgImgCtx.save();let cX = item.center.x;let cY = item.center.y;let angle = Math.round(Math.atan(Math.abs(coodrinte.centerO-cY)/Math.abs(coodrinte.centerO-cX))*180/Math.PI);// console.log(index+'. angle > '+angle)//TODO: 暂时适配最多7个switch(angle){case 0:if (cX<coodrinte.centerO) angle+=90;else angle-=90;break;case 90:angle=0;break;default:if (cX<coodrinte.centerO){if (cY<coodrinte.centerO){angle+=90;}else if (angle<20) {angle+=45;}else if (angle<38) {angle-=25;}else if (angle<=40) {angle+=10;}else if (angle==45) {}else if (angle<=60) {angle-=30;}else {angle+=10;}}else{if (cY<coodrinte.centerO){angle=270-angle;}else{angle-=90;}}}if (angle!=0){//旋转角度,以转盘中心点对齐angle=Math.PI*(angle/180);bgImgCtx.translate(cX,cY);bgImgCtx.rotate(angle);bgImgCtx.translate(-cX,-cY);}}if (item.image) {bgImgCtx.drawImage(item.image,item.center.x-data.imgSize*0.5,item.center.y-data.imgSize*0.5,data.imgSize,data.imgSize);}if (item.title) {bgImgCtx.fillStyle = '#fff';bgImgCtx.fillText(item.title,item.center.x,item.image ? (item.center.y+data.imgSize*0.9) : item.center.y);}if (this.#mode==0){bgImgCtx.restore();}//画辅助线// bgImgCtx.beginPath();// bgImgCtx.moveTo(coodrinte.centerO,coodrinte.centerO);// bgImgCtx.lineTo(item.center.x,item.center.y);// bgImgCtx.stroke();});this.#goods = data.goods;this.#elemBgImg.src = bgImgCanvas.toDataURL();//绘制指针const pointerImgCanvas = this.#pointerImgCanvas;const pointerImgCtx = pointerImgCanvas.getContext('2d');const pointerData = {r: pointerImgCanvas.width/2};pointerData.r1 = pointerData.r*0.36;pointerData.r2 = pointerData.r*0.60;pointerImgCtx.fillStyle = data.pointerColor;startAngle = Math.PI*1.58;endAngle = startAngle + Math.PI*1.86;pointerImgCtx.lineWidth = 2;pointerImgCtx.beginPath();pointerImgCtx.arc(pointerData.r,pointerData.r,pointerData.r2,startAngle,endAngle);pointerImgCtx.lineTo(pointerData.r,0);pointerImgCtx.closePath();pointerImgCtx.fill();pointerImgCtx.stroke();//将绘制的图形设置到图片元素this.#elemPointerImg.src = pointerImgCanvas.toDataURL();}}2. 开始抽奖

实现开始抽奖方法onStart(),可通过传入参数对象config,修改默认配置,代码如下,抽奖结果会通过回调方法succes()返回

class Turntable {//定义私有属性#animing = false;//.../** * 开始抽奖 * */onStart(config){if (this.#animing) return;//防止双击(误操作)this.#animing = true;const data = {minRotationNum: 3,//至少转动圈数duration:3,//转动耗时3ssuccess(res){},//结束时回调index: -1,//抽得预定奖品,默认随机};Object.assign(data,config);const goods = this.#goods;if (data.index<0 || data.index>=goods.length) {//抽得随机奖品data.index = Math.trunc(Math.random()*10%goods.length);}const elemActive = this.#mode==0 ? this.#elemBgImg : this.#elemPointerImg;const style = elemActive.style;const pointerDeg = this.#pointerDeg;const index = data.index;//定义动画结束监听const listener = (event) => {event.preventDefault();elemActive.removeEventListener('transitionend', listener);//重置动画样式style.transition = 'none';style.transform = `rotate(${this.#pointerDeg}deg)`;//结束和回调this.#animing = false;data.success({goods,index});};elemActive.addEventListener('transitionend', listener, false);//处理过渡动画let inDeg = Math.round(goods[index].startAngle/Math.PI*180);let outDeg = Math.round(goods[index].endAngle/Math.PI*180);let deg = (Math.round(Math.random()*(outDeg-inDeg)))+inDeg;// console.log('rand '+index, `${inDeg}°~${outDeg}° ${deg}° current:${pointerDeg}`);//转盘是反向旋转的if (this.#mode==0) deg = 360-deg;deg += (Math.round(Math.random()*10)+data.minRotationNum)*360;//简化角度this.#pointerDeg = deg%360;//修改完样式,就可开始动画style.transition = `all ${data.duration}s ease-out`;style.transform = `rotate(${deg}deg)`;}}4.运行效果

讲到最后,用浏览器打开网页index.html浏览看看,正常的话,运行效果图如下

💡小提示

试试修改传入的参数,例如

t.draw({//...mode:1,//改变为指针转动/...});//...t.onStart({index: 3,//抽奖概率自己写,传入预定奖品的indexsuccess:(res)=>{ //...}});

可根据其它的需求改

到此结束,如阅读中有遇到什么问题,请在文章结尾评论处留言,ヾ( ̄▽ ̄)ByeBye

本文链接地址:https://www.jiuchutong.com/zhishi/292337.html 转载请保留说明!

上一篇:【爬坑之路一】windows系统下更新升级node版本【亲测有效】(爬坑图片卡通)

下一篇:在树洞中休息的鸣角鸮,纽约马萨皮夸保护区 (© Vicki Jauron, Babylon and Beyond Photography/Getty Images)(在树洞中休息的英语)

  • 增值税专用发票使用规定 最新
  • 增值税专用发票怎么开
  • 购固定资产需要交什么税
  • 采购商品的会计分录料未到票到
  • 金税盘税务申报
  • 资产处置损益属于当期损益吗
  • 预计销售收入增长是什么意思
  • 金蝶系统如何设置套打
  • 累计折旧贷方余额是负数表示什么
  • 奖金做预发年底结算缴税怎么做?
  • 应收帐款从工资里扣税吗
  • 去年多做销售费用今年冲回该如何做会计分录?
  • 小规模纳税人代理记账一般多少钱
  • 服务费返还
  • 技术转让所得减半征收计算
  • 个人非货币性资产投资的税务筹划
  • 递延收益现金流量附表项目
  • 拆迁安置土地的补偿标准
  • 研发企业退税
  • 进口应税消费品的组成计税价格公式
  • 工会经费申报表的应税项应该怎样填写
  • 出口退税申报时间限制
  • 买车预付款怎么记账
  • win10 100g不够
  • 权益法下对投资者的要求
  • kb4592438安装失败
  • 现金流量表中收入是含税收入还是不含税
  • 个税手续费会计分录
  • PHP:Memcached::addServers()的用法_Memcached类
  • Linux Kernel 4.5在3月15日发布最终版
  • 增值税专用发票有几联?
  • 消防工程改造方案
  • 4月满月是几号
  • php模板引擎原理
  • php的运算符主要包括哪些?
  • 税负太高会预警吗
  • php邮件发送类
  • 猿厂猿作设计机构招聘
  • html导航栏边框
  • echarts快速上手
  • 长期待摊费用为负数怎么调整
  • 进出口额等于进口额加出口额吗
  • 公司房租收据怎么写
  • python wordcloud库
  • 资产负债表的编制原理
  • 小规模企业每月收入多少可以不纳税
  • 申请电子发票需要什么条件
  • 土增尾盘销售应该如何申报收入
  • 认缴股权的转让
  • 一般纳税人劳务费税率是多少2023
  • 留抵抵欠税附加税需要交嘛
  • 关税完税价格如何计算消费税
  • 造价咨询费计入固定资产吗
  • 收到工程进度款怎么做分录
  • 委托加工存货收回后直接用于销售的账务处理
  • 应付职工薪酬都要报个税吗
  • 发票上有银行流水号吗
  • 分包工程是什么意思
  • 企业为什么一定要给员工缴纳社保
  • 收据能作为抵减成本吗
  • 非流动资产处置利得计入什么科目
  • 公对公转账必须签合同吗
  • 项目完工后员工工作总结
  • 对会计人员继续教育的目的包括了保障
  • 关于数据库连接池,下列说法错误的是
  • mysql修改版本号
  • CentOS中httpd源代码安装与测试步骤分享
  • 安装windows7之前,应该做好准备工作
  • win10 19043.1237
  • 开发环境配置是干嘛
  • ubuntu用root运行
  • Linux修改tomcat默认端口号8080
  • linux命令sed的用法
  • 分页jsp
  • 基于python的游戏
  • jquery 修改
  • Android boot.img制作
  • 静海去天津的公交
  • 梦幻西游新区绿色通道多少钱
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设