1.乘法口诀表
利用 wx : if 及 wx : for 数据绑定来实现输出乘法口诀表的编程
第一步:新建文件夹
我们先点开utils文件夹下的app.json,在pages输入你喜欢的英文命名,我的是"pages/qq/qq",
我的是放在第四个,但是如果要运行显示的话,要把文件夹放到第一个噢,页面显示我这里运行的是"pages/lx/lx",
第二步:配置文件内容
qq.js(是ts,可以重命名为js)
qq.json
qq.wxml
qq.wxss
运行结果:
2.控制台水仙花数
编写程序,在Console控制台输出水仙花数(水仙花数是指一个3位数的各位上的数字的3次幂之和等于它本身。例如,1的3次方+5的3次方+3的3次方=153)
第一步:新建文件夹
我的是"pages/sxh/sxh",
第二步:配置文件内容
sxh.js
Page({
data: {
messagez:[]
},
onLoad: function () {
this.findmessage();
},
findmessage: function (){
const num =[];
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){
num.push(i);}}
this.setData({
message: num});
console.log("水仙花数:"+num);
},
})
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});}
});
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});}
});
sxh.josn
sxh.wxml
运行结果:
3.页面水仙花数
编写程序,在页面中输出水仙花数
第一步:新建文件夹
我的是"pages/shuixianhua/shuixianhua",
第二步:配置文件内容
shuixianhua.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});}
});
shuixianhua.json
{
"navigationBarBackgroundColor": "#B5E61D",
"navigationBarTitleText": "水仙花数",
"navigationBarTextStyle":"black",
"usingComponents": {}
}
shuixianhua.wxml
<view class="sxhs">
<view class="narcissistic-numbers">
<text wx:for="{{narcissisticNumbers}}" wx:key="*this">{{item}}</text></view>
</view>
shuixianhua.wxss
.sxhs {
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.页面菱形图案
编写程序,在页面中输出菱形图案
第一步:新建文件夹
我的是"pages/lx/lx",
第二步:配置文件内容
lx.json
{
"navigationBarBackgroundColor": "#FFFE91",
"navigationBarTitleText": "菱形图案",
"navigationBarTextStyle":"black",
"usingComponents": {}
}
lx.wxml
<view class="diamond">
<view> *</view>
<view> ***</view>
<view> *****</view>
<view> *******</view>
<view>*********</view>
<view> *******</view>
<view> *****</view>
<view> ***</view>
<view> *</view>
</view>
lx.wxss
.diamond {
text-align: center;
margin-top: 20px;
font-size: 20px;
}
运行结果: