位置: 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)(在树洞中休息的英语)

  • 年末是否结转本年利润
  • 资源税计入什么科目
  • 更正以前年度费用账务处理
  • 国外酒店打印的住宿单可以入账吗
  • 单一环节征税有哪些类型
  • 没有外币账户可以收外币吗
  • 城建税借贷方向
  • 费用已付发票未到的预算会计分录
  • 为什么生产车间地板是绿色的
  • 工会基金是扣个人还是扣企业的
  • 小规模纳税人销售收入会计分录
  • 建安企业无收入怎么结转成本?
  • 收到的出口退税款一直有余额吗
  • 公司利润不分配可以怎么处理
  • 企业缴纳的社保怎么查询
  • 专用发票红冲后可以退税吗?
  • 工业企业水电费如何分摊
  • 虚开进项税额转出会计分录
  • 个人所得税是次月申报上月的吗怎么填
  • 教资认定流程详细步骤2023
  • 商铺租金收入税是多少税率
  • 小微企业所得税优惠政策
  • 企业收到党建经费 所得税
  • 先预支后报销如何填写报销单需要老板签字吗
  • 在建工程产生废料收入的账务处理?
  • 工会上缴40%的经费法律依据
  • 公允价值变动损益在利润表哪里
  • 工程安装成本分录
  • 其他业务收入对方科目
  • thinkphp yii
  • 开发产品结转到哪个科目
  • 未签订租赁合同租金如何确定
  • 持有可转换债券的会计分录
  • 企业会计准则应付利息计入什么科目?
  • 小规模纳税人减半征收的六税两费
  • 增值税纳税人如何界定
  • 10分钟学会万用表
  • php array_merge_recursive 数组合并
  • yii框架教程
  • python里%s
  • 应收的货款
  • 安装sql server 2008提示重新启动计算机
  • 只收加工费
  • 公司分期付款购车怎么做账
  • 应收账款的注意要点
  • 增值税留抵退税的账务处理
  • 税前弥补以前年度亏损
  • 进项税额转出的几种情况
  • 员工外出培训报告范文
  • 不交社保如何在网上投诉
  • 加盟费收入需要纳税吗
  • 债券发行后在市场上交易时是怎么确定交易价格的
  • 哪些行为应作为证据
  • 未分配利润是什么会计科目
  • mysql5.7压缩包
  • Kaspersky Rescue Disk 2009.04.16 卡巴斯基救援盘
  • xp系统怎么新建桌面
  • 重装Windows11
  • linux文本模式无法打字
  • dropbox怎么在国内使用
  • msg是什么文件
  • win8.1怎么用
  • windows语音识别
  • 调整linux时间
  • jetcar.exe - jetcar是什么进程 有什么作用
  • css截图
  • nodejs websocket客户端
  • android入门视频教程
  • android开发中默认的数据库
  • jquery 列表控件
  • bootstrapping怎么做
  • js 数组处理
  • jquery有自定义选择器吗
  • 广州市地税
  • 福建省地方税务局杨静
  • 如何查询车辆购置税
  • 网上交了购置税你要打印出来吗
  • 出口退税的管理办法
  • 环保税征税范围44项
  • 小规模纳税人可以用专票抵扣税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设