1、利用wx:if以及wx:for数据绑定来实现输出乘法口诀表。
.js
Page({
data:{
arr:[1,2,3,4,5,6,7,8,9]
}
})
.wxml
<view class="t1" wx:for="{{arr}}" wx:for-item="i">
<view class="t2" wx:for="{{arr}}" wx:for-item="j">
<view class="size" wx:if="{{i>=j}}">
{{i}}×{{j}}={{i*j}}
</view>
</view>
</view>
.wxss
.t1{
margin: 10px;
}
.size{
padding-right:1em;
}
.t2{
display: inline-block;
}
运行结果:
2、编写程序,在Console控制台输出水仙花数。
.js
Page({
data:{
txw: []
},
onLoad: function () {
this.findNarcissisticNumbers();
},
findNarcissisticNumbers: function (){
const numb =[];
for (let i=100;i<1000;i++){
const a = Math.floor(i / 100);
const b = Math.floor((i % 100) / 10); const c=i% 10;
if (a ** 3 + b** 3 +c**3===i){
numb.push(i);
}
}
this.setData({txw: numb});
console.log(numb);
}
});
.wxml
<view class="t1">
<view class="t2">
<text wx:for="{{txw}}" wx:key="*this">
{{item}}
</text>
</view>
</view>
.wxss
.t1 {
display: flex;
align-items: center;
justify-content: center;
height: 80vh;
}
.t2 text{
display: block;
}
运行结果:
3、编写程序、在页面中输出水仙花数。
.js
Page({
data:{
txw: []
},
onLoad: function () {
this.findNarcissisticNumbers();
},
findNarcissisticNumbers: function (){
const numb =[];
for (let i=100;i<1000;i++){
const a = Math.floor(i / 100);
const b = Math.floor((i % 100) / 10); const c=i% 10;
if (a ** 3 + b** 3 +c**3===i){
numb.push(i);
}
}
this.setData({txw: numb});
}
});
.wxml
<view class="t">
<text>水仙花数共有:</text>
<view wx:for="{{txw}}" wx:key="*this" >
{{item}}
</view>
</view>
.wxss
.t {
display: flex;
justify-content: flex-start;
}
view{
display: block;
margin: 10px;
}
运行结果:
4、编写程序,在页面输出菱形图案。
.js
Page({
data: {
diamondArray: [' * ',
' *** ',
' ***** ',
'*******',
' ***** ',
' *** ',
' * ']
}
})
.wxml
<view class="diamond">
<text>菱形图案</text>
<block wx:for="{{diamondArray}}" wx:for-item="item" wx:for-index="index">
<text class="diamond-item">{{item}}</text>
</block>
</view>
.wxss
.diamond {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 100px;
}
.diamond-item {
font-size: 20px;
margin-bottom: 10px;
}
运行结果: