乘法口诀表
index.wxml
<view class='one' wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="one">
<view class='two' wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="two" wx:if="{{one <= two}}">
{{one}}*{{two}} = {{one*two}}
</view>
</view>
idex.wxss
.one{
display: flex;
justify-content: flex-start;
font-size: 10px;
}
.one .two{
width:45px;
}
json
{
"navigationBarTitleText": "九九乘法表"
}
效果图
水仙花数
.js
Page({
data: {
result: ''
},
inputChange(e) {
this.setData({
number: e.detail.value
})
},
checkNumber() {
const number = this.data.number;
if (number.length !== 3) {
this.setData({
result: '请输入三位数'
})
return;
}
const digit1 = parseInt(number.charAt(0));
const digit2 = parseInt(number.charAt(1));
const digit3 = parseInt(number.charAt(2));
const sum = Math.pow(digit1, 3) + Math.pow(digit2, 3) + Math.pow(digit3, 3);
if (sum === parseInt(number)) {
this.setData({
result: '是水仙花数'
})
} else {
this.setData({
result: '不是水仙花数'
})
}
}
})
.json
{
"navigationBarTitleText": "水仙花数"
}
.wxml
<view class="container">
<view class="title">判断水仙花数</view>
<input class="input" placeholder="请输入三位数" bindinput="inputChange" />
<button class="button" bindtap="checkNumber">验证</button>
<view class="result">{{result}}</view>
</view>
效果图
页面中输入水仙花数
.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});}
});
.json
{
"navigationBarTitleText": "水仙花数共有"
}
wxml
<view class="one">
<view class="narcissistic-numbers">
<text wx:for="{{narcissisticNumbers}}" wx:key="*this">{{item}}</text></view>
</view>
wxss
.one {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
效果图
菱形
.wxml
<view class="one" wx:for="i">*</view>
<view class="two" wx:for="i">***</view>
<view class="three" wx:for="i">*****</view>
<view class="four" wx:for="i">*******</view>
<view class="five" wx:for="i">*********</view>
<view class="six" wx:for="i">*********</view>
<view class="seven" wx:for="i">*******</view>
<view class="eight " wx:for="i">*****</view>
<view class="nine " wx:for="i">***</view>
<view class="ten" wx:for="i">*</view>
.wxss
.one{
display: flex;
align-items: center;
justify-content: center;
}
.two{
display: flex;
align-items: center;
justify-content: center;
}
.three{
display: flex;
align-items: center;
justify-content: center;
}
.four{
display: flex;
align-items: center;
justify-content: center;
}
.five{
display: flex;
align-items: center;
justify-content: center;
}
.six{
display: flex;
align-items: center;
justify-content: center;
}
.seven{
display: flex;
align-items: center;
justify-content: center;
}
.eight{
display: flex;
align-items: center;
justify-content: center;
}
.nine{
display: flex;
align-items: center;
justify-content: center;
}
.ten{
display: flex;
align-items: center;
justify-content: center;
}
效果图