小程序实现筛子抽奖


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 相关文章推荐
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 Javascript
详解vue身份认证管理和租户管理
ES6 解构赋值的原理及运用
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
js Proxy的原理详解
May 25 #Javascript
解析原生JS getComputedStyle
80行代码写一个Webpack插件并发布到npm
Ajax请求超时与网络异常处理图文详解
May 23 #Javascript
You might like
生成sessionid和随机密码的例子
2006/10/09 PHP
PHP 中的批处理的实现
2007/06/14 PHP
php数组去除空值函数分享
2015/02/02 PHP
PHP正则验证Email的方法
2015/06/15 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
js分页工具实例
2015/01/28 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
python脚本监控docker容器
2016/04/27 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python文件操作函数用法实例详解
2019/12/24 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
Python语言异常处理测试过程解析
2020/01/08 Python
Python如何输出警告信息
2020/07/30 Python
大学同学聚会邀请函
2014/01/29 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js