小程序实现筛子抽奖

 更新时间:2021年05月26日 10:07:30   作者:MrLi-2018  
这篇文章主要为大家详细介绍了小程序实现筛子抽奖,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

效果图

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

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

您可能感兴趣的文章:

相关文章

  • 解决 window.onload 被覆盖的问题方法

    解决 window.onload 被覆盖的问题方法

    这篇文章主要介绍了解决 window.onload 被覆盖的问题方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • js 数组随机字符串(广告不重复)

    js 数组随机字符串(广告不重复)

    今天一个网友想让他的广告随机显示,每次刷新广告的内容都不一样,经过参考源码网站分析就是通过下面代码实现,特分享下方便需要的朋友
    2013-08-08
  • JavaScript利用构造函数和原型的方式模拟C#类的功能

    JavaScript利用构造函数和原型的方式模拟C#类的功能

    这篇文章主要介绍了JavaScript利用构造函数和原型的方式模拟C#类的功能。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • 微信小程序使用 vant Dialog组件的正确方式

    微信小程序使用 vant Dialog组件的正确方式

    这篇文章主要介绍了微信小程序使用 vant Dialog组件的正确方式,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • three.js修改物体的位置代码实例

    three.js修改物体的位置代码实例

    在Three.js中物体通常是通过创建"网格"(Mesh)对象来描述的,下面这篇文章主要给大家介绍了关于three.js修改物体位置的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 提升页面加载速度的插件InstantClick

    提升页面加载速度的插件InstantClick

    本篇文章主要介绍了提升页面加载速度的插件InstantClick,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • bootstrap-treeview自定义双击事件实现方法

    bootstrap-treeview自定义双击事件实现方法

    这篇文章主要介绍了bootstrap-treeview自定义事件双击事件实现方法,需要的朋友可以参考下
    2016-01-01
  • JavaScript 微任务和宏任务讲解

    JavaScript 微任务和宏任务讲解

    这篇文章主要分享了JavaScript 微任务和宏任务讲解,在js中,我们一般将所有的任务都分成两类,一种是同步任务,另外一种是异步任务。而在异步任务中,又有着更加细致的分类,那就是微任务和宏任务,下面来一起学习js中的微任务和宏任务吧
    2021-12-12
  • xmlplus组件设计系列之网格(DataGrid)(10)

    xmlplus组件设计系列之网格(DataGrid)(10)

    xmlplus 是一个JavaScript框架,用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之xmlplus网格,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Bootstrap Img 图片样式(推荐)

    Bootstrap Img 图片样式(推荐)

    Bootstrap提供了四种用于<img>类的样式,在本文给大家详细介绍,需要的朋友可以参考下
    2016-12-12

最新评论