第二章作业

zr-dhgd

已于 2024-03-10 16:07:22 修改

阅读量482

点赞数 11

文章标签：微信小程序

于 2024-03-10 16:00:48 首次发布

本文链接：https://blog.csdn.net/2301_78554783/article/details/136601643

版权

文章介绍了使用JavaScript在小程序中实现九九乘法表、水仙花数查找以及菱形图案的生成。通过index.js控制逻辑，index.wxml负责界面渲染，index.wxss处理样式，index.json配置页面布局。

摘要由CSDN通过智能技术生成

小题1：

1，在index.wxml中输入：

<!--index.wxml-->
<view class='con'>
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
<view class='inline' wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
<view wx:if="{{j<=i}}">
{{i}}*{{j}}={{i*j}}
</view>
</view>
</view>
</view>

2，在index.wxss输入：

/**index.wxss**/
.con{
  font-size: 10px;
  margin: 10px;
}
.inline{
  display: inline-block;
  width: 60px;
}

3，在index.json输入：

{
 "navigationBarBackgroundColor": "#ffffff",
 "navigationBarTitleText": "九九乘法表",
"navigationBarTextStyle":"white",
"backgroundTextStyle":"dark"
}

运行结果：

小题2：

1，在index.js中输入：

Page({
  data:{
    message: []
  },
    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);
  },
})

2，在index.wxml输入：

<view class="App">
<view class="app">
  <text wx:for="{{message}}" wx:key="*this">{{item}}</text>
</view>
</view>

运行结果：

小题3：

1，在index.js输入：

// index.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});
}
  });

2，在index.wxml输入：

<!--index.wxml-->

<view class="container">
<view class="narcissistic-numbers">
  <viem>水仙花数共有：</viem>
<text wx:for="{{narcissisticNumbers}}" wx:key="*this">{{item}}</text></view>
</view>

3，在index.json输入

<!--index.wxml-->

<view class="container">
<view class="narcissistic-numbers">
  <viem>水仙花数共有：</viem>
<text wx:for="{{narcissisticNumbers}}" wx:key="*this">{{item}}</text></view>
</view>

4，在index.wxss输入：

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
  width: 80%;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
}

.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.avatar {
  display: block;
  width: 56px;
  height: 56px;
}

.nickname-wrapper {
  display: flex;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-top: .5px solid rgba(0, 0, 0, 0.1);
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
  color: black;
}

.nickname-label {
  width: 105px;
}

.nickname-input {
  flex: 1;
}

运行结果：

小题4：

1，在index.wxml输入：

<!--index.wxml-->
<view class="diamond">
  <view>    *</view>
  <view>   ***</view>
  <view>  *****</view>
  <view> *******</view>
  <view>*********</view>
  <view> *******</view>
  <view>  *****</view>
  <view>   ***</view>
  <view>    *</view>
</view>

2，在index.wxss输入：

/**index.wxss**/
.diamond {
  text-align: center;
  margin-top: 30px;
  font-size: 30px;
}

3,在index.json输入：

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTitleText": "菱形",
  "navigationBarTextStyle": "black",
  "backgroundTextStyle": "dark"
}