微信小程序js 抽奖概率(小程序实现筛子抽奖)
类别:编程学习 浏览量:2366
时间:2022-01-23 02:35:02 微信小程序js 抽奖概率
小程序实现筛子抽奖本文实例为大家分享了小程序实现筛子抽奖的具体代码,供大家参考,具体内容如下
效果图
<!--pages/shaizi/index.wxml--> <view class="container"> <view class="shaizi_box {{activeTrue}}" style="transform: rotateX({{rotateX}}deg) rotateY({{rotateY}}deg) rotateZ({{rotateZ}}deg);"> <view class="shaizi">1</view> <view class="shaizi">2</view> <view class="shaizi">3</view> <view class="shaizi">4</view> <view class="shaizi">5</view> <view class="shaizi">6</view> </view> <text class="view"></text> <button bindtap="gamePlay">PLAY</button> </view>
// pages/shaizi/index.js var dingshiqi1 = 0; var dingshiqi2 = 0; var dingshiqi3 = 0; Page({ /** * 页面的初始数据 */ data: { activeTrue:"active1", rotateX:0, rotateY:0, rotateZ:0, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, gamePlay:function(){ let _that = this; this.setData({ activeTrue:"active2", rotateX:0, rotateY:0, rotateZ:0, }) clearInterval(dingshiqi3) let _posible = [ { value: 1, x: 0, y: 0 }, { value: 6, x: 180, y: 0 }, { value: 3, x: 0, y: -90 }, { value: 4, x: 0, y: 90 }, { value: 5, x: -90, y: 0 }, { value: 2, x: 90, y: 0 }, ] // 准备抽取的随机数 let _random = Math.floor(Math.random() * 6); dingshiqi1 = setTimeout(() => { _that.setData({ rotateX:360, rotateY:250, rotateZ:0, }) }, 0); dingshiqi2 = setTimeout(() => { _that.setData({ rotateX:_posible[_random].x, rotateY:_posible[_random].y, }) dingshiqi3 = setTimeout(() => { _that.setData({ activeTrue:"active1", }) }, 4500); }, 800); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } }) /* pages/shaizi/index.wxss */ @keyframes rotate { to { transform: rotateX(360deg) rotateY(250deg); } } @keyframes shaiziCss{ 20%{ transform: rotateX(20deg); } 60%{ transform: rotateX(20deg) rotateY(200deg); } 100%{ transform: rotateX(100deg) rotateY(1000deg) rotateZ(-100deg); } } .shaizi_box { width: 200rpx; height: 200rpx; margin: 200rpx auto; position: relative; transform-style: preserve-3d; animation-duration: 3s; animation-timing-function: linear; transition: all 1s; } .shaizi_box.active1{ animation: rotate 5s linear 0s infinite alternate !important; } .shaizi_box.active2{ animation: shaiziCss 2s !important; } .shaizi_box .shaizi { width: 200rpx; height: 200rpx; display: flex; position: absolute; left: 0; top: 0; border: 1px solid #000; background: rgb(253, 250, 250); border-radius: 20rpx; font-size: 100rpx; color: red; text-align: center; } .shaizi:nth-child(1) { justify-content: center; align-items: center; transform: translateZ(100rpx); } .shaizi:nth-child(2) { justify-content: space-around; align-items: center; transform: rotateX(-90deg) translateZ(100rpx); } .shaizi:nth-child(3) { justify-content: space-around; align-items: center; flex-wrap: wrap; transform: rotateY(90deg) translateZ(100rpx); } .shaizi:nth-child(4) { flex-wrap: wrap; justify-content: center; align-items: center; transform: rotateY(-90deg) translateZ(100rpx); } .shaizi:nth-child(5) { flex-wrap: wrap; justify-content: center; align-items: center; transform: rotateX(90deg) translateZ(100rpx); } .shaizi:nth-child(6) { flex-wrap: wrap; justify-content: center; align-items: center; transform: rotateX(-180deg) translateZ(100rpx); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 微信小程序接口返回数据怎么弄(微信小程序页面返回传值的4种解决方案汇总)
- h5打开小程序点允许(html5跳转小程序wx-open-launch-weapp踩坑)
- 微信小程序css使用技巧(微信小程序 CSS filter滤镜的使用示例详解)
- 微信小程序function怎么使用(微信小程序在{{ }}中直接使用函数的方法示例)
- 微信小程序计数器代码(微信小程序实现计算器案例)
- 微信小程序js 抽奖概率(小程序实现筛子抽奖)
- vue实现商品详情讲解(京东 Vue3 组件库支持小程序开发的详细流程)
- 小程序开发计算方法(小程序实现简单的计算器)
- 微信小程序简易计算器制作(微信小程序实现简单计算器功能)
- 微信小程序数学公式(微信小程序计算器实例详解)
- 微信小程序接入第三方支付的方法(小程序通过小程序云实现微信支付功能实例)
- thinkphp5开发小程序后台(PHP小程序支付功能完整版基于thinkPHP)
- 微信小程序引用模板的函数(微信小程序页面与组件之间信息传递与函数调用)
- 微信小程序的交通码(微信小程序中实现车牌输入功能)
- 小程序开发者代码工具(解析从小程序开发者工具源码看原理实现)
- 微信小程序中的代码怎么编辑(微信小程序新手入门之自定义组件的使用)
- 鞠婧祎和杨紫两种风格的女生,你心里谁比较美(鞠婧祎和杨紫两种风格的女生)
- 三千年第一美女鞠婧祎出演白素贞pk杨紫,颜值胜赵雅芝王祖贤(三千年第一美女鞠婧祎出演白素贞pk杨紫)
- 成都轨道交通13号线一期工程最新进展(成都轨道交通13号线一期工程最新进展)
- 越南没事(越南没事情做)
- 重庆旅游攻略(重庆旅游3-4天攻略最佳线路)
- 周杰伦演唱会门票(周杰伦演唱会门票多少钱一张2023)
热门推荐
- html的meta标签
- 微信公众号怎么开发页面(微信公众平台开发教程②微信端分享功能图文详解)
- sqlserver常用配置调整(sql server性能调优 I/O开销的深入解析)
- vue中什么时候需要set属性(Vue.set和this.$set使用和区别)
- table 细边框
- mysql云数据库数据恢复(MySQL 利用frm文件和ibd文件恢复表数据)
- mysql时间戳和datetime对比(mysql中 datatime与timestamp的区别说明)
- python面向对象的介绍(Python面向对象思想与应用入门教程类与对象)
- mysql架构图(深入了解Mysql逻辑架构)
- zabbix如何配置监控(zabbix监控mysql的实例方法)