WeChat-Applet
Mini-Programmentwicklung
Eine kurze Diskussion darüber, wie man mit einem kleinen Programm einen gro?en Plattenspieler mit variabler Geschwindigkeit implementiert
Eine kurze Diskussion darüber, wie man mit einem kleinen Programm einen gro?en Plattenspieler mit variabler Geschwindigkeit implementiert
Dec 20, 2021 am 10:07 AM
怎么使用小程序?qū)崿F(xiàn)一個變速大轉(zhuǎn)盤？下面本篇文章給大家介紹一下使用小程序?qū)崿F(xiàn)一個變速大轉(zhuǎn)盤的方法，希望對大家有所幫助！
使用小程序來實現(xiàn)一個大轉(zhuǎn)盤吧！大轉(zhuǎn)盤都不陌生，開始抽獎，然后停止的位置就是獲得的獎品。
實現(xiàn)方法：setInterval
先來實現(xiàn)一下勻速大轉(zhuǎn)盤吧
先將轉(zhuǎn)盤設(shè)計好，比如3?x?3?的大轉(zhuǎn)盤，中間是個開始按鈕;
我這里設(shè)置的是背景顏色的變化，當抽獎到達某個位置時，這個位置的顏色發(fā)生變化；
先貼一下我的ttml頁面吧（不要在意我奇怪的配色~）
//?index.ttml
<view class="container">
????<view class="box">
????????<view class="item" style="background-color: {{ index == 4 ? 'red': (index == active ? 'rgb(229, 250, 250)' : 'rgb(236, 216, 135)')}};" tt:for="{{games}}" bindtap="{{index == 4 ? 'beginLottery' : ''}}">{{item}}</view>
????</view>
</view>
順便css也貼一下吧，看效果直接復(fù)制就好了嘛
//?index.ttss
.box{
????margin:?0?auto;
????width:?600rpx;
????display:?flex;
????flex-wrap:?wrap;
????border:?1px?solid?black;
}
.item{
????width:?200rpx;
????height:?200rpx;
????line-height:?200rpx;
????text-align:?center;
}
另起一行，只是換個位置貼js
- 先看data：games是轉(zhuǎn)盤上要顯示的內(nèi)容，轉(zhuǎn)盤的格式可以根據(jù)自己的需求自己來寫，我這個就是最基本的。active用來記錄旋轉(zhuǎn)到了什么位置,start用來記錄開始的位置
- 再來看全局定義的round和timer。round用來設(shè)置一個軌跡，相當于鋪路啦，里面是要走的下標，剛好是外圍一圈。timer是定時器
- 最后看begin方法吧
// index.js
const round = [0,1,2,5,8,7,6,3,0];
let timer ;
Page({
data: {
games:['$1','$2','$3','$4','開始','$5','$6','$7','$8'],
active: 0,
start: 0,
},
onLoad: function (options) {
},
beginLottery(){
this.begin();
},
// begin
begin(){
let start = this.data.start;
let random = Math.floor(Math.random()*9);
let num = 0;
timer = setInterval(() => {
start++;
start = start > 8 ? 0 : start;
this.setData({
start,
active: round[start]
})
num++;
if(num > 24 && this.data.active == random){//
clearInterval(timer)
}
}, 70);
}
})比較簡單，然后實現(xiàn)變速，其實速度的改變就是旋轉(zhuǎn)一圈時間的改變
我這里的設(shè)計是：每旋轉(zhuǎn)兩圈實現(xiàn)一次變速，每次變速的時間在上一次時間上+100s，在第五圈停止
//index.js
const round = [0, 1, 2, 5, 8, 7, 6, 3, 0];
let timer; // 定時器
let num = 0; // 用來記錄一共轉(zhuǎn)了幾次，方便判斷轉(zhuǎn)的圈數(shù)
let start = 0; // 記錄開始的位置下標
let random = ''; // 記錄停下來的隨機數(shù)（下標）
let time = 70; // 記錄定時器的時間
let count = 0; // 記錄圈數(shù)，用來判斷每2圈一次變速
Page({
data: {
games: ['$1', '$2', '$3', '$4', '開始', '$5', '$6', '$7', '$8'],
active: 0,
},
onLoad: function (options) {},
beginLottery() {
this.begin1();
},
begin1() {
if(num != 0){
// 防止用戶重復(fù)點擊
return
}
timer = setInterval(this.process, time);
},
// 旋轉(zhuǎn)的過程
process() {
start = start + 1;
if (start >= 8) {
start = 0;
// 當start = 8的時候，表示已經(jīng)轉(zhuǎn)過1圈了count+1
count = count + 1;
}
this.setData({
active: round[start]
})
num = num + 1;
// 實現(xiàn)兩圈一次變速
if (num % 8 === 0 && count === 2) {
count = 0;
clearInterval(timer);
time = time + 100;
timer = setInterval(this.process, time);
// 轉(zhuǎn)了4圈,即將在第五圈停止
if (Math.floor(num / 8) === 4) {
this.getRandom();
}
}
if (this.data.active === random) {
clearInterval(timer);
num = 0;
random = '';
time = 70;
count = 0;
}
},
getRandom(){
let n = Math.floor(Math.random() * 9);
if(n == 4){
this.getRandom();
}else{
random = n
return;
}
}
})示例代碼是根據(jù)旋轉(zhuǎn)的圈數(shù)來進行變速，也可以根據(jù)旋轉(zhuǎn)一定的時間來實現(xiàn)變速，這樣就需要使用setTimeout來實現(xiàn)。
好啦，這次記錄就到這里啦，有更好的解決方案，性能優(yōu)化 歡迎評論！
【相關(guān)學習推薦：小程序開發(fā)教程】
Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie man mit einem kleinen Programm einen gro?en Plattenspieler mit variabler Geschwindigkeit implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Entwickeln Sie ein WeChat-Applet mit Python
Jun 17, 2023 pm 06:34 PM
Mit der Popularit?t mobiler Internettechnologie und Smartphones ist WeChat zu einer unverzichtbaren Anwendung im Leben der Menschen geworden. Mit WeChat-Miniprogrammen k?nnen Benutzer Miniprogramme direkt verwenden, um einige einfache Anforderungen zu erfüllen, ohne Anwendungen herunterladen und installieren zu müssen. In diesem Artikel wird erl?utert, wie Sie mit Python ein WeChat-Applet entwickeln. 1. Vorbereitung Bevor Sie Python zum Entwickeln des WeChat-Applets verwenden, müssen Sie die entsprechende Python-Bibliothek installieren. Hier empfiehlt es sich, die beiden Bibliotheken wxpy und itchat zu verwenden. wxpy ist eine WeChat-Maschine
Implementieren Sie Kartenumdreheffekte in WeChat-Miniprogrammen
Nov 21, 2023 am 10:55 AM
Implementieren von Kartenumdreheffekten in WeChat-Miniprogrammen In WeChat-Miniprogrammen ist die Implementierung von Kartenumdreheffekten ein h?ufiger Animationseffekt, der die Benutzererfahrung und die Attraktivit?t von Schnittstelleninteraktionen verbessern kann. Im Folgenden wird detailliert beschrieben, wie der Kartenumdrehungseffekt im WeChat-Applet implementiert wird, und relevante Codebeispiele bereitgestellt. Zun?chst müssen Sie in der Seitenlayoutdatei des Miniprogramms zwei Kartenelemente definieren, eines für die Anzeige des vorderen Inhalts und eines für die Anzeige des hinteren Inhalts. Der spezifische Beispielcode lautet wie folgt: <!--index.wxml-. ->&l
Alipay hat das Miniprogramm ?Chinese Character Picking-Rare Characters' gestartet, um die Bibliothek seltener Charaktere zu sammeln und zu erg?nzen
Oct 31, 2023 pm 09:25 PM
Laut Nachrichten dieser Website vom 31. Oktober und 27. Mai dieses Jahres kündigte die Ant Group den Start des ?Chinese Character Picking Project“ an und leitete kürzlich neue Fortschritte ein: Alipay startete das Miniprogramm ?Chinese Character Picking – Uncommon Characters“. um Sammlungen der Gesellschaft zu sammeln. Seltene Charaktere erg?nzen die Bibliothek seltener Charaktere und bieten unterschiedliche Eingabeerlebnisse für seltene Charaktere, um die Eingabemethode für seltene Charaktere in Alipay zu verbessern. Derzeit k?nnen Benutzer das Applet ?Ungew?hnliche Zeichen“ aufrufen, indem sie nach Schlüsselw?rtern wie ?Aufnehmen chinesischer Zeichen“ und ?Seltene Zeichen“ suchen. Im Miniprogramm k?nnen Benutzer Bilder von seltenen Zeichen einreichen, die vom System nicht erkannt und eingegeben wurden. Nach der Best?tigung nehmen Alipay-Ingenieure zus?tzliche Eintr?ge in die Schriftartenbibliothek vor. Auf dieser Website wurde festgestellt, dass Benutzer im Miniprogramm auch die neueste Eingabemethode zur Wortteilung nutzen k?nnen. Diese Eingabemethode ist für seltene W?rter mit unklarer Aussprache konzipiert. Demontage durch den Benutzer
K?nnen kleine Programme reagieren?
Dec 29, 2022 am 11:06 AM
Miniprogramme k?nnen React verwenden. 1. Implementieren Sie einen Renderer basierend auf ?React-Reconciler“ und generieren Sie eine Miniprogrammkomponente zum Parsen und Rendern von DSL. 3. Installieren Sie npm und führen Sie den Entwickler-Build aus npm im Tool; 4. Führen Sie das Paket auf Ihrer eigenen Seite ein und verwenden Sie dann die API, um die Entwicklung abzuschlie?en.
Wie uniapp eine schnelle Konvertierung zwischen Miniprogrammen und H5 erreicht
Oct 20, 2023 pm 02:12 PM
Wie Uniapp eine schnelle Konvertierung zwischen Miniprogrammen und H5 erreichen kann, erfordert spezifische Codebeispiele. Mit der Entwicklung des mobilen Internets und der Popularit?t von Smartphones sind Miniprogramme und H5 zu unverzichtbaren Anwendungsformen geworden. Als plattformübergreifendes Entwicklungsframework kann Uniapp die Konvertierung zwischen kleinen Programmen und H5 basierend auf einer Reihe von Codes schnell realisieren und so die Entwicklungseffizienz erheblich verbessern. In diesem Artikel wird vorgestellt, wie Uniapp eine schnelle Konvertierung zwischen Miniprogrammen und H5 erreichen kann, und es werden konkrete Codebeispiele gegeben. 1. Einführung in uniapp unia
Bringen Sie Ihnen bei, wie Sie Vorlagennachrichten für ?ffentliche Konten in Miniprogrammen verwenden (mit detaillierten Ideen).
Nov 04, 2022 pm 04:53 PM
Dieser Artikel bringt Ihnen einige verwandte Themen zu WeChat-Miniprogrammen. Er stellt vor allem die Verwendung ?ffentlicher Kontovorlagennachrichten in Miniprogrammen vor. Ich hoffe, dass er für alle hilfreich ist.
Tutorial zum Schreiben eines einfachen Chat-Programms in Python
May 08, 2023 pm 06:37 PM
Implementierungsidee x01 Servereinrichtung Zun?chst wird auf der Serverseite ein Socket zum Empfangen von Nachrichten verwendet. Jedes Mal, wenn eine Socket-Anfrage angenommen wird, wird ein neuer Thread ge?ffnet, um die Verteilung und Annahme von Nachrichten zu verwalten Um alle Threads zu verwalten und damit die Verarbeitung verschiedener Funktionen des Chatrooms zu realisieren, ist die Einrichtung des x02-Clients viel einfacher als die des Servers. Die Funktion des Clients besteht lediglich darin, Nachrichten zu senden und zu empfangen und bestimmte Zeichen einzugeben Um die Verwendung unterschiedlicher Funktionen zu erreichen, müssen Sie daher auf der Clientseite nur zwei Threads verwenden, einen für den Empfang von Nachrichten und einen für das Senden von Nachrichten liegt daran, nur
Geografische Standortbestimmung und Kartendarstellung mittels PHP und Miniprogrammen
Jul 04, 2023 pm 04:01 PM
Geolocation-Positionierung und Kartenanzeige von PHP und Miniprogrammen Geolocation-Positionierung und Kartenanzeige sind zu einer der notwendigen Funktionen in der modernen Technologie geworden. Mit der Beliebtheit mobiler Ger?te steigt auch der Bedarf der Menschen an Ortung und Kartendarstellung. W?hrend des Entwicklungsprozesses sind PHP und Applets zwei g?ngige Technologien. In diesem Artikel werden Sie in die Implementierungsmethode der geografischen Standortpositionierung und Kartenanzeige in PHP und Miniprogrammen eingeführt und entsprechende Codebeispiele angeh?ngt. 1. Geolokalisierung in PHP In PHP k?nnen wir die Geolokalisierung von Drittanbietern verwenden
