小程序两个按钮实现根据点击次数奇偶性实现颜色变换,并且点击不同按钮会出现不同的内容,再点击一次内容变换,两个都点击都会显示
时间: 2024-04-17 18:24:59 浏览: 15
要实现小程序中两个按钮根据点击次数的奇偶性实现颜色变换,并且点击不同按钮会出现不同的内容,再点击一次内容变换,同时两个按钮都会显示,您可以按照以下步骤进行操作:
1. 在小程序的wxml文件中,分别找到两个需要点击的按钮,并给它们设置唯一的id,如下所示:
```html
<button id="button1" bindtap="changeColor1" style="background-color:{{button1Color}};">按钮1</button>
<button id="button2" bindtap="changeColor2" style="background-color:{{button2Color}};">按钮2</button>
```
2. 在小程序的对应页面的js文件中,找到Page对象的data属性,在其中定义用于存储按钮颜色和内容的变量,例如:
```javascript
data: {
button1Color: 'red',
button2Color: 'blue',
content: '点击按钮显示的内容',
clickCount1: 0,
clickCount2: 0
},
```
3. 在同一个js文件中,编写两个对应按钮点击事件的处理函数(changeColor1和changeColor2),如下所示:
```javascript
changeColor1: function() {
let count = this.data.clickCount1;
let color = count % 2 === 0 ? 'blue' : 'red';
this.setData({
button1Color: color,
clickCount1: count + 1
});
},
changeColor2: function() {
let count = this.data.clickCount2;
let color = count % 2 === 0 ? 'green' : 'yellow';
this.setData({
button2Color: color,
clickCount2: count + 1
});
},
```
4. 最后,在wxml文件中通过data属性绑定按钮的颜色和内容,使其实时更新,如下所示:
```html
<button id="button1" bindtap="changeColor1" style="background-color:{{button1Color}};">按钮1</button>
<button id="button2" bindtap="changeColor2" style="background-color:{{button2Color}};">按钮2</button>
<view>{{content}}</view>
```
这样,当您点击按钮1时,它的背景颜色将根据点击次数的奇偶性变换为蓝色或红色;当您点击按钮2时,它的背景颜色将根据点击次数的奇偶性变换为绿色或黄色。同时,内容会显示在页面上,并且再次点击任意按钮,内容会进行变换。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)