小程序实现筛子抽奖


Posted in Javascript onMay 26, 2021

本文实例为大家分享了小程序实现筛子抽奖的具体代码,供大家参考,具体内容如下

效果图

小程序实现筛子抽奖

<!--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);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门之基本函数详解
Oct 21 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
详解javascript遍历方式
Nov 11 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
详解vue身份认证管理和租户管理
ES6 解构赋值的原理及运用
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
js Proxy的原理详解
May 25 #Javascript
解析原生JS getComputedStyle
80行代码写一个Webpack插件并发布到npm
Ajax请求超时与网络异常处理图文详解
May 23 #Javascript
You might like
php FPDF类库应用实现代码
2009/03/20 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
php DES加密算法实例分析
2019/09/18 PHP
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
javascript中Object使用详解
2015/01/26 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
Python反转序列的方法实例分析
2018/03/21 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
python实现tail -f 功能
2020/01/17 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
护士个人自我鉴定
2014/03/24 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
商场消防安全责任书
2014/07/29 职场文书
奖学金个人总结
2015/03/04 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript
vue实现滑动解锁功能
2022/03/03 Vue.js