一,应用wx:if及wx:for数据绑定来实现输出乘法口诀表的编程
运行代码:
new.wxml
<view class="cheng" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="cheng">
<view class="fa" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="fa" wx:if="{{fa>=cheng}}">
<view class="biao">{{cheng}}*{{fa}}={{cheng*fa}}</view>
</view>
</view>
new.wxss
.cheng {
display: flex;
font-size: 10px;
margin-top: 20px;
}
.cheng .fa{
width: 35px;
text-align:left;
padding-left: 10px;
}
.biao{
margin-left: 10px;
}
运行效果
2、编写程序,在Console控制台输出水仙花数(水仙花数是指一个3位数的各位上的数字的3次幂之和等于它本身。)
js代码:
onLoad: function() {
this.findNarcissusNumbers();//页面加载时调用的函数
},
findNarcissusNumbers: function() {
console.log("水仙花数:")//打印文字
for (let i = 100; i <= 999; i++) {//进行遍历所有的3位数
if (this.isNarcissisticNumber(i)) {
//利用isNarcissisticNumber函数来对比,符合就进行打印
console.log(i);
}
}
},
isNarcissisticNumber: function(num) {//判断水仙花数的函数方法
const numStr = num.toString();
const len = numStr.length;
const sum = numStr.split('').reduce((sum, digit) => sum + Math.pow(digit, len), 0);
//进行数字的拆分、累加,在进行次幂计算,然后再进行对比
return sum === num;
},
运行效果:
3、编写程序,在页面中输出水仙花数
运行代码:
hua.wxml:
水仙花数:
<view class="container">
<view class="narcissistic-numbers">
<text wx:for="{{narcissisticNumbers}}" wx:key="*this">{{item}}</text></view>
</view>
hua.js:
Page({
data:{
narcissisticNumbers: []
},
onLoad: function () {
this.findNarcissisticNumbers();
},
findNarcissisticNumbers: function (){
const numbers =[];
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){
numbers.push(i);}}
this.setData({
narcissisticNumbers: numbers});}
});
hua.wxss
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.narcissistic-numbers {
margin-top: 20px;
}
.narcissistic-numbers text {
display: block;
margin-bottom: 10px;
}
运行结果:
4、编写程序,在页面中输出菱形图案
si.wxml
<view class="si">
<view> *</view>
<view> ***</view>
<view> *****</view>
<view> *******</view>
<view>*********</view>
<view> *******</view>
<view> *****</view>
<view> ***</view>
<view> *</view>
</view>
si.wxss
.si {
text-align: center;
margin-top: 20px;
font-size: 20px;
}
运行结果: