第二章作业

最新推荐文章于 2024-05-30 11:27:58 发布

聿奚攵殳

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量345

点赞数 8

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/2302_81909561/article/details/136602679

版权

1.利用wx:if及wx:for数据绑定来实现输出乘法口诀表(图2-21)的编程

{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "九九乘法表(dtq)",
  "navigationBarTextStyle": "black",
  "backgroundTextStyle": "light"
}

//bh.wxml
<view class="AV" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="row">
<view class="av" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:if="{{col<=row}}" wx:for-item="col">
                  {{col}}*{{row}}={{col*row}}
</view>
</view>



/** bh.wxss **/
 

.AV{
  display: flex;           
  justify-content: left;
  font-size: 8px;
}
.AV.av{
  width: 40px;
}

2.编写程序，在Console 控制台输出水仙花数(水仙花数是指一个3位数的各位上的数字的3次幂之和等于它本身。

//bh.js
Page({
  data: {
Numbers:[]
  },
onLoad:function(){
  this.findNumbers();
},
findNumbers: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({
        Numbers:numbers
      });
    }
  });


//bh.json
{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "水仙花数",
  "navigationBarTextStyle": "black",
  "backgroundTextStyle": "light"
}


//bh.wxml
<text> 水仙花数共有：</text>
<view class="cj">
<view class="cj2">
<text wx:for="{{Numbers}}" wx:key="*this">{{item}}
</text>
</view>
</view>

/** bh.wxss **/

.cj{
  display: flex;
  flex-direction: column;
  align-items: column;
  justify-content: center;
  height: 100vh;
}
.cj2{
  margin-top:20px;
}
.cj2 text{
  display: block;
  margin-bottom: 20px;
}

3.编写程序，在页面中输出水仙花数

//bh.js
Page({
  data: {
Numbers:[]
  },
onLoad:function(){
  this.findNumbers();
},
findNumbers: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({
        Numbers:numbers
      });
    }
  });


//bh.json
{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "水仙花数",
  "navigationBarTextStyle": "black",
  "backgroundTextStyle": "light"
}


//bh.wxml
<text> 水仙花数共有：</text>
<view class="cj">
<view class="cj2">
<text wx:for="{{Numbers}}" wx:key="*this">{{item}}
</text>
</view>
</view>

/** bh.wxss **/

.cj{
  display: flex;
  flex-direction: column;
  align-items: column;
  justify-content: center;
  height: 100vh;
}
.cj2{
  margin-top:20px;
}
.cj2 text{
  display: block;
  margin-bottom: 20px;
}

4.编写程序，在页面中输出菱形图案

//bh.js
Page({
  data: {
cnmArray:['*','***','*****','*******','*********','*********','*******','*****','***','*']
  },
  onLoad() {
 
  },
  onReady() {
 
  },
  onShow() {
 
  },
  onHide() {
 
  },
  onUnload() {
 
  },
  onPullDownRefresh() {
 
  },
  onReachBottom() {
 
  },
  onShareAppMessage() {
 
  }
})


//bh.json
{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "菱形",
  "navigationBarTextStyle": "black",
  "backgroundTextStyle": "light"
}



//bh.wxml
<view class="cnm">
<block wx:for="{{cnmArray}}" wx:for-item="item" wx:for-bh="bh">
<text class="cnm-item">{{item}}</text></block></view>


/** bh.wxss **/
.cnm{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cnm-item{
  font-size: 20px;
}