WeChat Mini-Programm Lotterienummerngenerator

WeChat Mini-Programm Lotterienummerngenerator

In diesem Artikel wird der spezifische Code des WeChat-Applet-Lotterienummerngenerators zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

1. Fallbeschreibung

Entwerfen Sie ein kleines Programm, um eine Notiz mit 7 Lottozahlen (1-31) zu generieren und diese auf einem kreisförmigen Symbol anzuzeigen, sowie einer Schaltfläche, die bei jedem Klicken neu generiert wird und ebenfalls kreisförmige Symbole in unterschiedlichen Farben generiert.

2. Fallcode

1) Datei index.wxml

<!--index.wxml-->
 
<image src="/image/caipiao.png" style="Breite: 750rpx; Höhe: 256rpx; Anzeige: Inline-Block; Box-Größe: Rahmenbox; links: NaNrpx; oben: NaNrpx"></image>
 
<Klasse anzeigen="Box">
  <view class="title">Lotteriegenerator</view>
  <view>Generierte Lotteriesequenz:</view>
  <view wx:for="{{rand}}">{{item}}</view>
</Ansicht>
 
<Ansichtsklasse="Kontext">
  <view class="item" style="background-color: {{color1}};">{{a}}</view>
  <view class="item" style="background-color: {{color2}};">{{b}}</view>
  <view class="item" style="background-color: {{color3}};">{{c}}</view>
  <view class="item" style="background-color: {{color4}};">{{d}}</view>
  <view class="item" style="background-color: {{color5}};">{{e}}</view>
  <view class="item" style="background-color: {{color6}};">{{f}}</view>
  <view class="item" style="background-color: {{color7}};">{{g}}</view>
</Ansicht>
==================================
<button type="primary" bindtap="newRand">Neue Lottozahlen generieren</button>

2) Datei index.wxss

/**index.wxss**/
 
.Kasten{
  Rand: 20 Rpx;
  Polsterung: 20rpx;
  Rand: 3px gestrichelt rgb(248, 72, 2);
  Hintergrundfarbe: rgba(110, 144, 216, 0);
}
 
.Titel{
  Schriftgröße: 30px;
  Textausrichtung: zentriert;
  Rand unten: 15px;
  Farbe: RGB (59, 15, 252);
}
 
.Kontext{
  Anzeige: Flex;
  Textausrichtung: zentriert;
  Zeilenhöhe: 100rpx;
  Schriftstärke: fett;
  Farbe: rgb(28, 3, 56);
}
 
.Artikel{
  Flex-Wachstum: 1;
  
  Rahmenradius: 50px; 
}

3) Datei index.js

// index.js
 
var rand;
 
Funktion createRand(){
  rand=[];
  
  für(var i=0;i<7;i++){
    var r=0;
 
    während(r==0){
      r = parseInt (Math.random() * 32);              
    } //Erzeuge eine Zahl ungleich Null r=(r/Math.pow(10,2)).toFixed(2).substr(2) //Kontrolliere die erzeugte Zahl auf zwei Ziffern und füge vor der einstelligen Zahl eine „0“ hinzu
    rand[i]=r;
 
    für (var j=0;j<i;j++){
      wenn (rand[j]==r){i=i-1;}
    } // Stellen Sie sicher, dass die zuvor generierte Zahl nicht wiederholt wird console.log(rand[i]);
  }
};
 
Seite({
  Farbe erstellen:Funktion(){
    var Farbe = [];
    var Buchstaben="0123456789ABCDEF";
    für(var i=0;i<7;i++){
      var c "=";
      für(var j=0;j<6;j++){
        c+=Buchstaben[Mathe.floor(Mathe.random()*16)]
      }
      color.push(c); //Farbe zufällig generieren}
    konsole.log(Farbe);
    dies.setData({
      Farbe1:Farbe[0],
      Farbe2:Farbe[1],
      Farbe3:Farbe[2],
      Farbe4:Farbe[3],
      Farbe5:Farbe[4],
      Farbe6:Farbe[5],
      Farbe7:Farbe[6]   
    })
  }, //Farbe wird geladen onLoad:function(){
    erstelleRand();
    dies.CreateColor();
    dies.setData({
      rand:rand,
      a:rand[0],
      b:rand[1],
      c:rand[2],
      d:rand[3],
      e:rand[4],
      f:rand[5],
      g:rand[6],
    })
  },
  neuerRand:Funktion(){
    erstelleRand();
    dies.CreateColor();
    dies.setData({
      rand:rand,
      a:rand[0],
      b:rand[1],
      c:rand[2],
      d:rand[3],
      e:rand[4],
      f:rand[5],
      g:rand[6],
    })
  },
 
})

Hinweis: In diesem Fall darf die generierte Lotterienummer nicht mit der vorherigen identisch sein und die generierte Nummer ist 1-31, sodass die Nummer „0“ nicht erscheinen kann.

3. Fall-Screenshots

4. Analyse und Zusammenfassung

Im Code der Datei index.wxml wird das Interface-Design von sieben „bunten Bällen“ durch die Verschachtelung von sieben Ansichtskomponenten in einer Ansicht implementiert. Und fügen Sie unten eine Schaltflächenkomponente hinzu, die das Klickereignis bindet, um neue Lottozahlen zu generieren.

In der Datei index.js ist die Funktion createRand() definiert, um eine Zufallszahlenfolge zu generieren. Die Funktion verwendet zunächst eine for-Schleife, um 7 Zufallszahlen zu generieren und fügt diese Daten einem Array hinzu. Mit der Funktion Math.random() wird eine Zufallszahl zwischen 0 und 1 generiert. Mit Math.random()*32 kann eine Zufallszahl zwischen 0 und 32 generiert werden. (r/Math.pow(10,2)).toFixed(2).substr(2) kann das zufällig generierte r so gesteuert werden, dass es eine zweistellige Zahl ist und vor der einstelligen Zahl eine „0“ hinzugefügt wird. Die definierten Funktionen onLoad und newRand rendern die Ergebnisse über die Methode this.sarData() in der Ansichtsebene.

Auch in diesem Fall geht es darum, in JavaScript zufällige Farben zu erstellen. Die Designidee zum Erstellen von Farben lautet: Verwenden Sie die Funktionen Math.random () und Math.floor (), um zufällig 6 Zeichen aus den 16 Hexadezimalzeichen (0 ~ F) zu finden, aus denen die Farbe besteht, um eine Farbe zu bilden. Wenn 7 Mal 6 Zeichen hintereinander gefunden werden, können 7 zufällige Farben generiert werden.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Automatischer Glückszahlengenerator für die Wohlfahrtslotterie

<<:  Implementierung der Nginx-Domänennamenweiterleitung für den HTTPS-Zugriff

>>:  Vue+Router+Element zur Implementierung einer einfachen Navigationsleiste

Artikel empfehlen

Reparaturlösung für inkonsistenten MySQL GTID-Master und -Slave

Inhaltsverzeichnis Lösung 1: Replikate neu erstel...

Tutorial zur MySQL-Datensicherungsmethode mit Multi-Master und One-Slave

Überblick Vorgänge, die auf einer Datenbank ausge...

Schritte zum Importieren von Millionen von Daten in MySQL mit .Net Core

Inhaltsverzeichnis Vorbereitende Vorbereitung Imp...

Fallstudie zur Übermittlung von HTML-Formularen

Um die Methode zur Formularübermittlung zusammenz...

So zeigen Sie den Rahmen an, wenn td leer ist

Zuvor habe ich zusammengefasst, wie man mit CSS di...

Verwenden Sie Elasticsearch, um Indexdaten regelmäßig zu löschen

1. Manchmal verwenden wir ES Aufgrund begrenzter ...

Websocket+Vuex implementiert eine Echtzeit-Chat-Software

Inhaltsverzeichnis Vorwort 1. Der Effekt ist wie ...