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

Einfacher CSS-Textanimationseffekt

Ergebnisse erzielen Implementierungscode html <...

Vite2.0 Fallstricke

Inhaltsverzeichnis Optimierung des Vite-Projektau...

5 coole und praktische Einführung in HTML-Tags und -Attribute

Tatsächlich handelt es sich auch hier um einen Cl...

JavaScript implementiert Konstellationsabfragefunktion mit detailliertem Code

Inhaltsverzeichnis 1. Titel 2. Code 3. Ergebnisse...

Tutorial zur Verwendung des Frameset-Tags in HTML

Frameset-Seiten unterscheiden sich etwas von norm...

Detaillierte Erklärung der Funktionen jedes Ports von Tomcat

Aus der Tomcat-Konfigurationsdatei können wir ers...

InnerHTML verstehen

<br />Verwandte Artikel: innerHTML HTML DOM ...

Vue implementiert das gleichzeitige Einstellen mehrerer Countdowns

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Verwendung des Vue More Filter-Widgets

In diesem Artikelbeispiel wird die Implementierun...

Vue+video.js implementiert Video-Wiedergabelisten

In diesem Artikel wird der spezifische Code von v...

Detaillierte Erläuterung der grundlegenden Docker-Netzwerkkonfiguration

Externer Zugriff Ports nach dem Zufallsprinzip zu...