WeChat Applet
Mini Program Development
A brief discussion on how to use a small program to implement a large variable speed turntable
A brief discussion on how to use a small program to implement a large variable speed turntable
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è)置的是背景顏色的變化，當(dāng)抽獎到達某個位置時，這個位置的顏色發(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è)置一個軌跡，相當(dāng)于鋪路啦，里面是要走的下標(biāo)，剛好是外圍一圈。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; // 記錄開始的位置下標(biāo)
let random = ''; // 記錄停下來的隨機數(shù)（下標(biāo)）
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;
// 當(dāng)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)學(xué)習(xí)推薦：小程序開發(fā)教程】
The above is the detailed content of A brief discussion on how to use a small program to implement a large variable speed turntable. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Develop WeChat applet using Python
Jun 17, 2023 pm 06:34 PM
With the popularity of mobile Internet technology and smartphones, WeChat has become an indispensable application in people's lives. WeChat mini programs allow people to directly use mini programs to solve some simple needs without downloading and installing applications. This article will introduce how to use Python to develop WeChat applet. 1. Preparation Before using Python to develop WeChat applet, you need to install the relevant Python library. It is recommended to use the two libraries wxpy and itchat here. wxpy is a WeChat machine
Implement card flipping effects in WeChat mini programs
Nov 21, 2023 am 10:55 AM
Implementing card flipping effects in WeChat mini programs In WeChat mini programs, implementing card flipping effects is a common animation effect that can improve user experience and the attractiveness of interface interactions. The following will introduce in detail how to implement the special effect of card flipping in the WeChat applet and provide relevant code examples. First, you need to define two card elements in the page layout file of the mini program, one for displaying the front content and one for displaying the back content. The specific sample code is as follows: <!--index.wxml-->&l
Alipay launched the 'Chinese Character Picking-Rare Characters' mini program to collect and supplement the rare character library
Oct 31, 2023 pm 09:25 PM
According to news from this site on October 31, on May 27 this year, Ant Group announced the launch of the "Chinese Character Picking Project", and recently ushered in new progress: Alipay launched the "Chinese Character Picking-Uncommon Characters" mini program to collect collections from the society Rare characters supplement the rare character library and provide different input experiences for rare characters to help improve the rare character input method in Alipay. Currently, users can enter the "Uncommon Characters" applet by searching for keywords such as "Chinese character pick-up" and "rare characters". In the mini program, users can submit pictures of rare characters that have not been recognized and entered by the system. After confirmation, Alipay engineers will make additional entries into the font library. This website noticed that users can also experience the latest word-splitting input method in the mini program. This input method is designed for rare words with unclear pronunciation. User dismantling
Can small programs use react?
Dec 29, 2022 am 11:06 AM
Mini programs can use react. How to use it: 1. Implement a renderer based on "react-reconciler" and generate a DSL; 2. Create a mini program component to parse and render DSL; 3. Install npm and execute the developer Build npm in the tool; 4. Introduce the package into your own page, and then use the API to complete the development.
How uniapp achieves rapid conversion between mini programs and H5
Oct 20, 2023 pm 02:12 PM
How uniapp can achieve rapid conversion between mini programs and H5 requires specific code examples. In recent years, with the development of the mobile Internet and the popularity of smartphones, mini programs and H5 have become indispensable application forms. As a cross-platform development framework, uniapp can quickly realize the conversion between small programs and H5 based on a set of codes, greatly improving development efficiency. This article will introduce how uniapp can achieve rapid conversion between mini programs and H5, and give specific code examples. 1. Introduction to uniapp unia
Teach you how to use public account template messages in mini programs (with detailed ideas)
Nov 04, 2022 pm 04:53 PM
This article brings you some related issues about WeChat mini programs. It mainly introduces how to use official account template messages in mini programs. Let’s take a look at them together. I hope it will be helpful to everyone.
Tutorial on writing a simple chat program in Python
May 08, 2023 pm 06:37 PM
Implementation idea: Establishing the server side of thread, so as to process the various functions of the chat room. The establishment of the x02 client is much simpler than the server. The function of the client is only to send and receive messages, and to enter specific characters according to specific rules. To achieve the use of different functions, therefore, on the client side, you only need to use two threads, one is dedicated to receiving messages, and the other is dedicated to sending messages. As for why not use one, that is because, only
Geographical positioning and map display using PHP and mini-programs
Jul 04, 2023 pm 04:01 PM
Geolocation positioning and map display of PHP and mini programs Geolocation positioning and map display have become one of the necessary functions in modern technology. With the popularity of mobile devices, people's demand for positioning and map display is also increasing. During the development process, PHP and applets are two common technology choices. This article will introduce you to the implementation method of geographical location positioning and map display in PHP and mini programs, and attach corresponding code examples. 1. Geolocation in PHP In PHP, we can use third-party geolocation
