操作题:
1.利用wx:if和wx:for数据绑定来实现输出乘法口诀表的编程
如图1
先创建一个ersan的文件夹,创建4个页面文件:ersan.js、ersan.json、ersan.wxml、ersan.wxss。
ersan.wxml的代码如下:
<view class='er' wx:for="{{[1,2,3,4,5,6,7,8,9]}}"
wx:for-item="er">
<view class='san' wx:for="{{[1,2,3,4,5,6,7,8,9]}}"
wx:for-item="san" wx:if="{{er<=san}}">
{{er}}*{{san}}={{er*san}}
</view>
</view>
ersan.wxss的代码如下:
.er{
display: flex;/*元素会成为弹性容器*/
font-size: 9px; /*字体大小为9个像素*/
}
.er .san{
width: 40px;/*宽为40像素*/
}
运行结果如下:
第一题结束。Zz
2.编写程序,在Console控制台输出水仙花数(水仙花数是指一个3位数的各位上的数字的3次幂之和等于它本身。例如1^3+5^3+3^3=153。)
创建一个名为ersi的文件夹,创建4个页面文件:ersi.js、ersi.json、ersi.wxml、ersi.wxss。
ersi.js的代码如下:
// 定义一个函数,用于检查一个数是否是水仙花数
function isNarcissistic(num) {
// 确保是3位数
if (num < 100 || num > 999) {
return false;
}
// 将数字转换为字符串,然后分别取出每一位
let strNum = num.toString();
let digit1 = parseInt(strNum[0]);
let digit2 = parseInt(strNum[1]);
let digit3 = parseInt(strNum[2]);
// 计算各位数字的3次幂之和
let sumOfCubes = Math.pow(digit1, 3) + Math.pow(digit2, 3) + Math.pow(digit3, 3);
// 检查和是否等于原数
return sumOfCubes === num;
}
// 遍历100到999之间的所有数字,找出水仙花数并打印
for (let i = 100; i <= 999; i++) {
if (isNarcissistic(i)) {
console.log("水仙花数"+ i); // 在Console控制台输出水仙花数
}
}
运行结果如图
ZZzz
3.编写程序,在页面中输出水仙花数,如图
ersi.js的代码如下:
Page({
data: {
narcissisticNumbers: [] // 用于存储水仙花数的数组
},
onLoad: function() {
this.findNarcissisticNumbers();
},
findNarcissisticNumbers: function() {
let narcissisticNumbers = []; // 创建一个空数组来存储水仙花数
// 遍历100到999之间的所有数字
for (let i = 100; i <= 999; i++) {
if (this.isNarcissistic(i)) {
narcissisticNumbers.push(i); // 如果是水仙花数,则添加到数组中
}
}
// 将水仙花数数组设置到页面的data中,以便渲染到页面上
this.setData({
narcissisticNumbers: narcissisticNumbers
});
},
// 定义一个函数,用于检查一个数是否是水仙花数
isNarcissistic: function(num) {
let strNum = num.toString();
let sumOfCubes = 0;
for (let i = 0; i < strNum.length; i++) {
sumOfCubes += Math.pow(parseInt(strNum[i]), 3);
}
return sumOfCubes === num;
}
});
ersi.wxml的代码如下:
<view>水仙花数共有:{{narcissisticNumbers}}</view>
运行结果如下:
ZZZzzz
4.编写程序,在页面中输出菱形图案,如图所示。
创建一个名为erwu的文件夹,创建4个页面文件:erwu.js、erwu.json、erwu.wxml、erwu.wxss。
erwu.wxml的代码:
<view class="diamond-container">
<!-- 上半部分菱形 -->
<view class="diamond-row" wx:for="{{diamondSize}}" wx:key="index">
<view class="diamond-space" wx:for="{{diamondSize - index - 1}}" wx:key="space"></view>
<text class="diamond-item" wx:for="{{2 * index + 1}}" wx:key="item">*</text>
</view>
<!-- 下半部分菱形 -->
<view class="diamond-row" wx:for="{{diamondSize - 1}}" wx:key="index" wx:for-index="revIndex" style="margin-top: -{{diamondItemSize/2}}px;">
<text class="diamond-item" wx:for="{{2 * (diamondSize - revIndex - 2) + 1}}" wx:key="item">*</text>
</view>
</view>
erwu.wxss的代码:
/* index.wxss */
.diamond-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh; /* 占据整个视口高度 */
}
.diamond-row {
display: flex;
justify-content: center;
align-items: center;
}
.diamond-item {
font-size: 20px; /* 菱形内部字符的大小 */
color: black; /* 菱形内部字符的颜色 */
margin: 0 5px; /* 每个字符之间的间距 */
}
.diamond-space {
flex-grow: 1; /* 使空格占据剩余空间,保证菱形居中 */
}
erwu.js的代码:
// index.js
Page({
data: {
diamondSize: 5 // 菱形的大小,决定菱形的行数以及每行的“角”数
}
// ... 其他页面逻辑 ...
});
运行结果:
ZZZZzzzz