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

Detaillierte Erklärung zur Verwendung des Schlüsselworts ESCAPE in MySQL

MySQL-Escape Escape bedeutet die ursprüngliche Se...

Karusselleffekte mit JavaScript implementieren

In diesem Artikel wird der spezifische Code für J...

So verwenden Sie Zeit als Beurteilungsbedingung in MySQL

Hintergrund: Während des Entwicklungsprozesses mü...

Beispielmethode zum Anzeigen von IP in Linux

Die Kenntnis der IP-Adresse eines Geräts ist wich...

Vue+Rem benutzerdefinierter Karusselleffekt

Die Implementierung eines benutzerdefinierten Kar...

Der Prozess der Installation von SVN auf Ubuntu 16.04.5LTS

Dieser Artikel stellt kurz den Prozess der Einric...

Analyse eines MySQL-Deadlock-Szenariobeispiels

Vorwort Kürzlich stieß ich auf ein Deadlock-Probl...

Kodierungsprobleme und -lösungen, wenn MySQL zwei Tabellen verknüpft

Wenn Mysql zwei Tabellen verknüpft, wird eine Feh...

Nginx Reverse Proxy Springboot JAR-Paket-Prozessanalyse

Die übliche Methode zum Bereitstellen eines Sprin...

CSS float (float, clear) beliebte Erklärung und Erfahrungsaustausch

Ich bin schon vor langer Zeit mit CSS in Berührun...