小程序实现筛子抽奖


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 相关文章推荐
又一个图片自动缩小的JS代码
Mar 10 Javascript
JavaScript关于select的相关操作说明
Jan 13 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 Javascript
vue中实现回车键登录功能
Feb 19 Javascript
react的hooks的用法详解
Oct 12 Javascript
javascript实现倒计时关闭广告
Feb 09 Javascript
详解vue身份认证管理和租户管理
ES6 解构赋值的原理及运用
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
js Proxy的原理详解
May 25 #Javascript
解析原生JS getComputedStyle
80行代码写一个Webpack插件并发布到npm
Ajax请求超时与网络异常处理图文详解
May 23 #Javascript
You might like
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
php中的静态变量的基本用法
2014/03/20 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
MSN消息提示类
2006/09/05 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python中几种导入模块的方式总结
2017/04/27 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
PyQt5实现下载进度条效果
2018/04/19 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
基于python代码批量处理图片resize
2020/06/04 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
英国儿童图书网站:Scholastic
2017/03/26 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
教师的实习鉴定
2013/12/15 职场文书
生日邀请函范文
2014/01/13 职场文书
村委会换届选举方案
2014/05/03 职场文书
2019个人工作总结
2019/06/21 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书