小程序实现筛子抽奖


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类(纯JS, Ajax模式)
Mar 12 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
详解vue身份认证管理和租户管理
ES6 解构赋值的原理及运用
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
js Proxy的原理详解
May 25 #Javascript
解析原生JS getComputedStyle
80行代码写一个Webpack插件并发布到npm
Ajax请求超时与网络异常处理图文详解
May 23 #Javascript
You might like
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
js读写json文件实例代码
2014/10/21 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
解决Python requests 报错方法集锦
2017/03/19 Python
一份python入门应该看的学习资料
2018/04/11 Python
python地震数据可视化详解
2019/06/18 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
pytorch中图像的数据格式实例
2020/02/11 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
工厂仓管员岗位职责
2014/01/01 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
投标承诺书范本
2014/03/27 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
2015年公务员工作总结
2015/04/24 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
贷款收入证明范本
2015/06/12 职场文书
工作经历证明范本
2015/06/15 职场文书
2016年教师节慰问信
2015/12/01 职场文书