Miniprogramm zur Implementierung der Sieve-Lotterie

<!--pages/shaizi/index.wxml-->
<Klasse anzeigen="Container">
  <view class="shaizi_box {{activeTrue}}" style="transform: drehenX({{rotateX}}Grad) drehenY({{rotateY}}Grad) drehenZ({{rotateZ}}Grad);">
    <Ansicht Klasse="shaizi">1</Ansicht>
    <Ansicht Klasse="shaizi">2</Ansicht>
    <Ansicht Klasse="shaizi">3</Ansicht>
    <Ansicht Klasse="shaizi">4</Ansicht>
    <Ansicht Klasse="shaizi">5</Ansicht>
    <Ansicht Klasse="shaizi">6</Ansicht>
  </Ansicht>
  <text Klasse="Ansicht"></text>
  <button bindtap="gamePlay">SPIELEN</button>
</Ansicht>

// Seiten/shaizi/index.js
var dingshiqi1 = 0;
var dingshiqi2 = 0;
var dingshiqi3 = 0;
Seite({
 
  /**
   * Ausgangsdaten der Seite */
  Daten: {
    activeTrue:"aktiv1",
    drehenX:0,
    drehenY:0,
    drehenZ:0,
  },
 
  /**
   * Lebenszyklusfunktion - auf Seitenladen warten*/
  onLoad: Funktion (Optionen) {
    
  },
  Spiel:Funktion(){
    lass _das = dies;
    dies.setData({
      activeTrue:"aktiv2",
      drehenX:0,
      drehenY:0,
      drehenZ:0,
    })
    Intervall löschen(dingshiqi3)
    lass _möglich = [
      { Wert: 1, x: 0, y: 0 },
      { Wert: 6, x: 180, y: 0 },
      { Wert: 3, x: 0, y: -90 },
      { Wert: 4, x: 0, y: 90 },
      { Wert: 5, x: -90, y: 0 },
      { Wert: 2, x: 90, y: 0 },
     ]
    //Vorbereitung zum Ziehen einer Zufallszahl let _random = Math.floor(Math.random() * 6);
    dingshiqi1 = setTimeout(() => {
      _das.setData({
        drehenX:360,
        drehenY:250,
        drehenZ:0,
      })
     }, 0);
     dingshiqi2 = setTimeout(() => {
      _das.setData({
        rotateX:_posible[_random].x,
        drehenY:_möglich[_random].y,
      })
      dingshiqi3 = setTimeout(() => {
        _das.setData({
          activeTrue:"aktiv1",
        })
      }, 4500);
     }, 800);
  },
  /**
   * Lebenszyklusfunktion - wartet auf den Abschluss der ersten Darstellung der Seite*/
  onReady: Funktion () {
 
  },
 
  /**
   * Lebenszyklusfunktion - Seitenanzeige überwachen*/
  onShow: Funktion () {
 
  },
 
  /**
   * Lebenszyklusfunktion - Achten Sie auf das Ausblenden von Seiten */
  onHide: Funktion () {
 
  },
 
  /**
   * Lebenszyklusfunktion - Deinstallation der Seite überwachen*/
  beimEntladen: Funktion () {
 
  },
 
  /**
   * Seitenbezogene Ereignisverarbeitungsfunktion - Achten Sie auf die Pulldown-Aktion des Benutzers */
  onPullDownRefresh: Funktion () {
 
  },
 
  /**
   * Die Funktion, die das Bottoming-Ereignis auf der Seite behandelt*/
  onReachBottom: Funktion () {
 
  },
 
  /**
   * Der Benutzer klickt auf die obere rechte Ecke, um zu teilen*/
  beiShareAppMessage: Funktion () {
 
  }
})
/* Seiten/shaizi/index.wxss */
@keyframes drehen {
  Zu {
   transformieren: X-Drehung (360 Grad) Y-Drehung (250 Grad);
  }
 }
 @keyframes shaiziCss{
  20 %
   transformieren: rotiereX(20 Grad);
  }
  60 %
   transformieren: X-Drehung (20 Grad) Y-Drehung (200 Grad);
  }
  100 %{
   transformieren: X-Drehung (100 Grad) Y-Drehung (1000 Grad) Z-Drehung (-100 Grad);
  }
 }
 .shaizi_box {
  Breite: 200rpx;
  Höhe: 200rpx;
  Rand: 200 Rpx automatisch;
  Position: relativ;
  Transformationsstil: 3D bewahren;
  Animationsdauer: 3s;
  Animations-Timing-Funktion: linear;
  Übergang: alles 1en;
 }
.shaizi_box.active1{
  Animation: Rotieren 5 s linear 0 s unendlich alternativ !wichtig;
}
.shaizi_box.active2{
  Animation: shaiziCss 2s !wichtig;
}
.shaizi_box .shaizi {
  Breite: 200rpx;
  Höhe: 200rpx;
  Anzeige: Flex;
  Position: absolut;
  links: 0;
  oben: 0;
  Rand: 1px durchgezogen #000;
  Hintergrund: rgb(253, 250, 250);
  Randradius: 20rpx;
  Schriftgröße: 100rpx;
  Farbe: rot;
  Textausrichtung: zentriert;
 }
 .shaizi:ntes-Kind(1) {
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  transformieren: übersetzenZ(100rpx);
 }
 .shaizi:nth-child(2) {
  Inhalt ausrichten: Abstand herum;
  Elemente ausrichten: zentrieren;
  transformieren: rotierenX(-90 Grad) übersetzenZ(100rpx);
 }
 .shaizi:nth-child(3) {
  Inhalt ausrichten: Abstand herum;
  Elemente ausrichten: zentrieren;
  Flex-Wrap: Umwickeln;
  transformieren: Y drehen (90 Grad) Z verschieben (100rpx);
 }
 .shaizi:nth-child(4) {
  Flex-Wrap: Umwickeln;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  transformieren: Y drehen (-90 Grad) Z verschieben (100rpx);
 }
 .shaizi:nth-child(5) {
  Flex-Wrap: Umwickeln;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  transformieren: X drehen (90 Grad) Z verschieben (100rpx);
 }
 .shaizi:nth-child(6) {
  Flex-Wrap: Umwickeln;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  transformieren: X drehen (-180 Grad) Z verschieben (100rpx);
}