微信php喝酒转盘小程序,微信小程序 转盘

2023-10-10 00:30
文章标签 程序 微信 php 转盘 喝酒

本文主要是介绍微信php喝酒转盘小程序,微信小程序 转盘,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

c59da2b9553d

1.html

{{item.award}}

抽奖

2.css

/* 转盘 */

.canvas-container ul,

.canvas-container li{

margin: 0 ;

padding: 0;

list-style: none;

}

.canvas-container{

margin: 0 auto;

position: relative;

width: 300px;

height: 300px;

border-radius: 50%;

border: 2px solid #E44025;

box-shadow: 0 2px 3px #333,0 0 2px #000;

}

.canvas-content{

position: absolute;

left: 0;

top: 0;

z-index: 1;

display: block;

width: inherit;

height: inherit;

border-radius: inherit;

background-clip: padding-box;

background-color: #ffcb3f;

}

.canvas-element{

width: inherit;

height: inherit;

border-radius: 50%;

}

.canvas-list{

position: absolute;

left: 0;

top: 0;

width: inherit;

height: inherit;

z-index: 2;

}

.canvas-item{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

color: #e4370e;

font-weight: bold;

text-shadow: 0 1px 1px rgba(255,255,255,.6);

}

.canvas-item-text{

position: relative;

display: block;

padding-top: 20px;

/* width: 50px; */

margin: 0 auto;

text-align: center;

-webkit-transform-origin: 50% 150px;

transform-origin: 50% 150px;

}

.canvas-btn{

position: absolute;

left: 110px;

top: 110px;

z-index: 3;

width: 80px;

height: 80px;

border-radius: 50%;

color: #F4E9CC;

background-color: #E44025;

line-height: 80px;

text-align: center;

font-size: 20px;

text-shadow: 0 -1px 1px rgba(0,0,0,.6);

box-shadow: 0 3px 5px rgba(0,0,0,.6);

text-decoration: none;

}

.canvas-btn::after{

position: absolute;

display: block;

content: ' ';

left: 10px;

top: -46px;

width: 0;

height: 0;

overflow: hidden;

border-width: 30px;

border-style: solid;

border-color: transparent;

border-bottom-color: #E44025;

}

.canvas-btn.disabled{

pointer-events: none;

background: #B07A7B;

color: #ccc;

}

.canvas-btn.disabled::after{

border-bottom-color: #B07A7B;

}

.gb-run{

-webkit-transition: all 6s ease;

transition: all 6s ease;

}

/* 查看中奖 */

.main-container{

margin: 1rem 2rem;

}

.main-container-rule{

padding: 1rem 0;

}

.main-rule-title{

display: block;

padding: 4px 0;

font-size: 16px;

font-weight: bold;

}

.main-rule-item{

display: block;

padding: 2px 0;

}

.main-container-btn{

display: flex;

justify-content: center;

}

3.js

data: {

awardsList: {},

animationData: {},

btnDisabled: '',

awards:[],

prob:[],

}

c59da2b9553d

图1

c59da2b9553d

图2

onReady: function (e) {

var that = this;

// 获取数据,如图1,

app.util.request({

url: xxxxxxxxxx",

cachetime: "0",

data: {},

success: function(n) {

// 把获取出来的概率数据循环复制一份到prob,概率数据保持整数,如图2

let prob=[];

for(let i=0;i

if (n.data.data[i].prob!=0) {

for(let k=0;k

prob.push(n.data.data[i].prob)

}

}

};

// 打乱prob数组,

prob.sort(function() {

return (0.5-Math.random());

});

that.setData({

awards:n.data.data,

prob:prob,

});

// 绘制转盘

var awardsConfig = that.data.awards,len = awardsConfig.length,rotateDeg = 360 / len / 2 + 90,html = [],turnNum = 1 / len  // 文字旋转 turn 值

that.setData({

btnDisabled: that.data.chance ? '' : 'disabled'

})

var ctx = wx.createContext()

for (var i = 0; i 

// 保存当前状态

ctx.save();

// 开始一条新路径

ctx.beginPath();

// 位移到圆心,下面需要围绕圆心旋转

ctx.translate(150, 150);

// 从(0, 0)坐标开始定义一条新的子路径

ctx.moveTo(0, 0);

// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。

ctx.rotate((360 / len * i - rotateDeg) * Math.PI/180);

// 绘制圆弧

ctx.arc(0, 0, 150, 0,  2 * Math.PI / len, false);

// 颜色间隔

if (i % 2 == 0) {

ctx.setFillStyle('#ffb820');

}else{

ctx.setFillStyle('#ffcb3f');

}

// 填充扇形

ctx.fill();

// 绘制边框

ctx.setLineWidth(0.5);

ctx.setStrokeStyle('#e4370e');

ctx.stroke();

// 恢复前一个状态

ctx.restore();

// 奖项列表

html.push({turn: i * turnNum + 'turn', award: awardsConfig[i].name});

}

that.setData({

awardsList: html

});

wx.drawCanvas({

canvasId: 'lotteryCanvas',

actions: ctx.getActions()

})

}

});

},

// 点击抽奖

getLottery: function () {

var that = this

// 随机prob数组的下标拿到prob的值

let Snum = Math.floor(Math.random()*that.data.prob.length);

that.query(that.data.prob[Snum]);

},

// 获取奖品数据以及下标,

query(snum){

let that=this;

let arr=[];

for(let i=0;i

if (that.data.awards[i].prob==snum) {

arr.push(that.data.awards[i])

}

};

// 判断arr的数组是否含有相同概率的元素,然后根据name来匹配awards奖品数组中的name,返回awards数组的下标,如需判断根据奖品数量是否被抽完,则需要在加一层if,重新执行一边getLottery()方法即可,

if (arr.length==1) {

// console.log(arr[0].name);

for (let i in that.data.awards) {

if (that.data.awards[i].name==arr[0].name) {

this.Statr(i)

}

};

} else {

let Snum = Math.floor(Math.random() * arr.length);

// console.log(arr[Snum].name);

for (let i in that.data.awards) {

if (that.data.awards[i].name==arr[Snum].name) {

this.Statr(i)

}

};

}

},

// 开始抽奖

Statr(Snum){

let that=this;

var awardIndex = Snum;

// var awardIndex = Math.random() * 6 >>> 0;

// 获取奖品配置

var awardsConfig = that.data.awards

if (awardIndex 

// console.log(awardIndex)

// 初始化 rotate

var animationInit = wx.createAnimation({

duration: 1

})

this.animationInit = animationInit;

animationInit.rotate(0).step()

this.setData({

animationData: animationInit.export(),

// btnDisabled: 'disabled'

})

// 旋转抽奖

setTimeout(function() {

var animationRun = wx.createAnimation({

duration: 4000,

timingFunction: 'ease'

})

that.animationRun = animationRun

animationRun.rotate(360 * 8 - awardIndex * (360 / 6)).step()

that.setData({

animationData: animationRun.export()

})

}, 100)

// 中奖提示

setTimeout(function() {

wx.showModal({

title: '恭喜',

content: '获得' + (awardsConfig[awardIndex].name),

showCancel: false

})

if (that.data.chance) {

that.setData({

btnDisabled: ''

})

}

}, 4100);

},

这篇关于微信php喝酒转盘小程序,微信小程序 转盘的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/176664

相关文章

W外链微信推广短连接怎么做?

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时,首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值,还要能够激起人们的分享欲望。对于许多企业和个人来说,尤其是那些缺乏创意和写作能力的人来说,这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大,不同用户的需求和兴趣各异。因此,制作推广链接时需要精准定位目标受众,以便更有效地吸引他们点击并分享链接

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟 开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚 第一站:海量资源,应有尽有 走进“智听

EMLOG程序单页友链和标签增加美化

单页友联效果图: 标签页面效果图: 源码介绍 EMLOG单页友情链接和TAG标签,友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样,如果自适应就填写100%,TAG文件不用修改 安装方法:把Links.php和tag.php上传到网站根目录即可,访问 域名/Links.php、域名/tag.php 所有模板适用,代码就不粘贴出来,已经打

跨系统环境下LabVIEW程序稳定运行

在LabVIEW开发中,不同电脑的配置和操作系统(如Win11与Win7)可能对程序的稳定运行产生影响。为了确保程序在不同平台上都能正常且稳定运行,需要从兼容性、驱动、以及性能优化等多个方面入手。本文将详细介绍如何在不同系统环境下,使LabVIEW开发的程序保持稳定运行的有效策略。 LabVIEW版本兼容性 LabVIEW各版本对不同操作系统的支持存在差异。因此,在开发程序时,尽量使用

CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

一、题目阅读 (最大值之和)给定整数序列 a0,⋯,an−1,求该序列所有非空连续子序列的最大值之和。上述参数满足 1≤n≤105 和 1≤ai≤108。 一个序列的非空连续子序列可以用两个下标 ll 和 rr(其中0≤l≤r<n0≤l≤r<n)表示,对应的序列为 al,al+1,⋯,ar​。两个非空连续子序列不同,当且仅当下标不同。 例如,当原序列为 [1,2,1,2] 时,要计算子序列 [

这些心智程序你安装了吗?

原文题目:《为什么聪明人也会做蠢事(四)》 心智程序 大脑有两个特征导致人类不够理性,一个是处理信息方面的缺陷,一个是心智程序出了问题。前者可以称为“认知吝啬鬼”,前几篇文章已经讨论了。本期主要讲心智程序这个方面。 心智程序这一概念由哈佛大学认知科学家大卫•帕金斯提出,指个体可以从记忆中提取出的规则、知识、程序和策略,以辅助我们决策判断和解决问题。如果把人脑比喻成计算机,那心智程序就是人脑的

uniapp设置微信小程序的交互反馈

链接:uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗: title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon:'error'是设置我们失败的logo 设置的文字上限是7个文字,如果需要设置的提示文字过长就需要设置icon并给

基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

系列文章目录 1.基于SSM的洗衣房管理系统+原生微信小程序+LW参考示例 2.基于SpringBoot的宠物摄影网站管理系统+LW参考示例 3.基于SpringBoot+Vue的企业人事管理系统+LW参考示例 4.基于SSM的高校实验室管理系统+LW参考示例 5.基于SpringBoot的二手数码回收系统+原生微信小程序+LW参考示例 6.基于SSM的民宿预订管理系统+LW参考示例 7.基于

Spring Roo 实站( 一 )部署安装 第一个示例程序

转自:http://blog.csdn.net/jun55xiu/article/details/9380213 一:安装 注:可以参与官网spring-roo: static.springsource.org/spring-roo/reference/html/intro.html#intro-exploring-sampleROO_OPTS http://stati

PHP原理之内存管理中难懂的几个点

PHP的内存管理, 分为俩大部分, 第一部分是PHP自身的内存管理, 这部分主要的内容就是引用计数, 写时复制, 等等面向应用的层面的管理. 而第二部分就是今天我要介绍的, zend_alloc中描写的关于PHP自身的内存管理, 包括它是如何管理可用内存, 如何分配内存等. 另外, 为什么要写这个呢, 因为之前并没有任何资料来介绍PHP内存管理中使用的策略, 数据结构, 或者算法. 而在我们