第四章课后习题

叶仪景——星稼轩

已于 2024-03-31 22:46:13 修改

阅读量485

点赞数 1

文章标签： json 开发语言小程序前端微信小程序 javascript

于 2024-03-22 12:29:00 首次发布

本文链接：https://blog.csdn.net/m0_74203181/article/details/136937269

版权

第一题实现canvas画图

运行效果如下

实现步骤如下所示

先在.wxml中写下如下代码

<view class="whole">
<view class="hg">
<canvas canvas-id="myCanvas" class="hgh"></canvas>
</view>
<view class="hg2">
<canvas canvas-id="mywh" class="hgk"></canvas>
</view>
<view class="hg3">
<canvas canvas-id="myhs" class="hgd"></canvas>
</view>
<view class="hg4">
<canvas canvas-id="myys" class="hgs"></canvas>
</view>
<view class="hg5">
<canvas canvas-id="myls" class="hgq"></canvas>
</view>
</view>

在.js中代码如下

Page({
  onReady: function () {
    const ctx = wx.createCanvasContext('myCanvas');
    const centerX = 100; // 圆心x坐标
    const centerY = 100; // 圆心y坐标
    const radius = 45; // 圆的半径
    const lineWidth = 2; // 线条宽度

    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI); // 绘制圆形路径
    ctx.setLineWidth(lineWidth); // 设置线条宽度
    ctx.setStrokeStyle('red'); // 设置线条颜色
    ctx.stroke(); // 绘制空心圆形

    ctx.draw(); // 将绘制内容显示到Canvas上
    const ctx2 = wx.createCanvasContext('mywh');
    const X = 100; // 圆心x坐标
    const Y = 100; // 圆心y坐标
    const r = 45; // 圆的半径
    const l = 2; // 线条宽度

    ctx2.beginPath();
    ctx2.arc(X, Y, r, 0, 2 * Math.PI); // 绘制圆形路径
    ctx2.setLineWidth(l); // 设置线条宽度
    ctx2.setStrokeStyle('#22B14C'); // 设置线条颜色
    ctx2.stroke(); // 绘制空心圆形

    ctx2.draw(); // 将绘制内容显示到Canvas上
    const ctx3 = wx.createCanvasContext('myhs');
    const X1 = 100; // 圆心x坐标
    const Y1 = 100; // 圆心y坐标
    const r1 = 45; // 圆的半径
    const l1 = 2; // 线条宽度

    ctx3.beginPath();
    ctx3.arc(X1, Y1, r1, 0, 2 * Math.PI); // 绘制圆形路径
    ctx3.setLineWidth(l1); // 设置线条宽度
    ctx3.setStrokeStyle('#000000'); // 设置线条颜色
    ctx3.stroke(); // 绘制空心圆形

    ctx3.draw(); // 将绘制内容显示到Canvas上
    const ctx4 = wx.createCanvasContext('myys');
    const X2 = 100; // 圆心x坐标
    const Y2 = 100; // 圆心y坐标
    const r2 = 45; // 圆的半径
    const l2 = 2; // 线条宽度

    ctx4.beginPath();
    ctx4.arc(X2, Y2, r2, 0, 2 * Math.PI); // 绘制圆形路径
    ctx4.setLineWidth(l2); // 设置线条宽度
    ctx4.setStrokeStyle('#FFF200'); // 设置线条颜色
    ctx4.stroke(); // 绘制空心圆形

    ctx4.draw(); // 将绘制内容显示到Canvas上
    const ctx5 = wx.createCanvasContext('myls');
    const X3 = 100; // 圆心x坐标
    const Y3 = 100; // 圆心y坐标
    const r3 = 45; // 圆的半径
    const l3 = 2; // 线条宽度

    ctx5.beginPath();
    ctx5.arc(X3, Y3, r3, 0, 2 * Math.PI); // 绘制圆形路径
    ctx5.setLineWidth(l3); // 设置线条宽度
    ctx5.setStrokeStyle('#1422FF'); // 设置线条颜色
    ctx5.stroke(); // 绘制空心圆形

    ctx5.draw(); // 将绘制内容显示到Canvas上
  }
})

在.wxss中代码：

.whole{
  position:absolute;
}
.hgh{
  position: relative;
  top:30px;
  left: -30px;
}
.hgk{
  position: relative;
  top:-50px;
  left: 10px;
}
.hgd{
  position: relative;
  top:-260px;
  left: 40px;
}
.hgs{
  position: relative;
  top:-350px;
  left: 70px;
}
.hgq{
  position: relative;
  top:-560px;
  left: 80px;
}

在.json中代码如下:

{
  "navigationBarTitleText": "五个圆圈",
  "usingComponents": {
    
  }
}

第二题书单

实现书单效果如下

在img中目录如下

在.wxml中代码如下

<view>
   <view>
     <swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000">
       <swiper-item>
           <image src="/img/bjz.png" style="width: 100%;height: 150px;"></image>
       </swiper-item>
       <swiper-item>
           <image src="/img/ja.webp" style="width: 100%;height: 150px;"></image>
       </swiper-item>
       <swiper-item>
           <image src="/img/zhxs2.jpg" style="width: 100%;height: 150px;"></image>
       </swiper-item>
     
     </swiper>
   </view>

   <view style="border-bottom: 3px solid black;" class="ja">
   <image src="/img/ja.webp" style="height: 170px;width: 170px;"/>
   <view style="width: 140px;" class="jas">
    <view style="font-weight: bolder;">简爱</view>
    <view style="font-weight: bold;">夏洛蒂·勃朗特</view>
    <view style="font-size: 13px;">该小说讲述孤女简·爱自幼父母双亡，寄养于舅母家，备受虐待，后被舅母打发到洛伍德义塾（洛伍德学校）去......</view>
   </view>
   </view>
   <view class="zt">
   
   <image src="/img/zhxs2.jpg" style="height: 170px;width: 170px;"/>

    <view style="width: 140px;" class="zhxs">
    <view style="font-weight: bolder;">朝花夕拾 </view>
    <view style="font-weight: bold;">鲁迅</view>                         
 <view style="font-size: 13px;">
    此文集作为“回忆的记事”，多侧面地反映了作者鲁迅青少年时期的生活，形象地反映了他的性格和志趣的形成经过......</view>
  </view>
   </view>
 

</view>

在.json中代码如下

{
  "navigationBarTitleText": "书单",
  "usingComponents": {
   
  }
}

在.wxss中代码如下

.ja ,.zt{
  clear:right;
  height: 170px;
}
.jas,.zhxs{
  float:right;
  font-size: 20px;
  width: 100px;
}

第三西安找拼车（input）

实现效果如下：

在.wxml中代码如下:

<view style="background-color: wheat;height:700px;">
<view >
<view style="border-bottom: 1px solid black;">联系方式(手机和微信至少填一项)</view>
<view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
    <view>称呼*</view>
    <input model:value="{{inputValue}}" />
  </view>
  <view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
    <view>手机号</view>
    <input model:value="{{inputnumber}}" />
  </view>
  <view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
    <view style="font-size: 17px;">微信号       </view>
    <input value="               请输入微信号" style="font-size: 16px;" />
  </view>
</view> 
  <view  >
<view style="border-bottom: 1px solid black;">拼车信息</view>
<view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
    <view>出发地点*</view>
    <input value="     限7个字" />
  </view>
  <view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
    <view>目的地*</view>
    <input value="     限7个字" />
  </view>
  <view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
    <view>空座数*</view>
    <input value="    请输入空座数" />
  </view>
</view>
</view>

在.js中代码如下

Page({
  data: {
    inputValue: "                  请输入称呼", // 输入框
    inputnumber:"                请输入手机号"
   
  }

});

在.json中代码如下

{
  "navigationBarTitleText": "西安找拼车",
  "usingComponents": {
   
  }
}

第四题生长进度条

“人生进程”是一款极简的小程序，它只有一个功能:就是计算一个人从出生到现在已经度过了多少个月，如图4-31所示。请编写程序完成此功能。

在主项目中加入图片

在app.json中代码如下


{
  "pages": [
    "pages/index/index",
    "pages/nh/nh",
    "pages/wy/wy",
    "pages/qu/qu"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云开发 QuickStart",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/index/index",
      "iconPath": "/img/ps2.png",
      "selectedIconPath": "/img/ps2.png",
      "text": "首页"
    },
    {
      "pagePath":"pages/nh/nh",
      "iconPath": "/img/ps2.png",
      "selectedIconPath": "/img/ps2.png",
      "text": "年月日"
    },
    {
      "pagePath":  "pages/wy/wy",
      "iconPath": "/img/ps2.png",
      "selectedIconPath":"/img/ps2.png",
      "text": "静思"
    },
    {
      "pagePath": "pages/qu/qu",
      "iconPath":"/img/ps2.png",
      "selectedIconPath": "/img/ps2.png",
      "text": "关于"
    }]
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "lazyCodeLoading": "requiredComponents"

}

在index中

代码如下

<view style="text-align: center;">中国现阶段人均寿命900个月</view>
<view style="text-align: center;" > 2005年8月至今155个月</view>
<view style="display: flex;position: relative;">
<view style="border:1px solid black;position: absolute;top: 30px;left: 50px;">换一个日期</view>
<view  style="border:1px solid black;position: absolute;top:30px;left: 160px;">清除记录</view>
</view>
<view style="position: relative;">
<image style="position:absolute;top:70px;" src="/img/bjz.png"/>

<view style="position: absolute;top:340px;font-size: 18px;left:10px;">能把后面前行行走的机会抓住的人，十有八九都会成功</view>

</view>

在nh.wxml中如下：

<view style="text-align: center;">中国现阶段人均寿命900个月</view>
<form bindsubmit="bind" style="line-height: 60px;">
<view style="display: flex; font-size: 20px;">
<input type="text" name="time" placeholder="请输入时间" class="sj"/>至今：{{people}}个月</view>
<view style="display: flex;">
<button formType="submit" class="bt">请输入后再点击此按钮</button>
<button formType="reset" style="width: 160px;font-size: 15px;">清除记录</button>
</view>
</form>
<view style="margin-top:50px;">
<image src="" class="rp" style="width: 250px;" />
</view>
<view style="width: 350px;">
  <text bindtap="changetext1">{{ text1 }}</text>
</view>

在nh.js中代码如下

Page({
  data:{  
   text1: '点击',
       people:new Date().toLocaleDateString()
 
     },
   changeText1: function() {
     this.setData({
       text1: '能把在前面行走的机会抓住的人，十有八九都会成功。'
     });
   },
     bind:function(e){
       var time = new Date().toLocaleDateString()
       var year = time.substring(0,time.indexOf("/"))
       var mo = time.substring(time.indexOf("/")+1,time.lastIndexOf("/")) 
       
       var value = e.detail.value.time
       var year2 = value.substring(0,time.indexOf("/"))
       var mo2 = value.substring(time.indexOf("/")+1,time.lastIndexOf("/"))
   
       var m1 = (year - year2 -1)*12+12-(mo2-mo)
       this.setData({
         people : m1
       })
     }
})

在.wxss中代码如下

.sj{
  width: 110px;
  padding-top: 18px;
  padding-left: 30px;
}
.bt{
  padding-right: 20px;
  width: 175px;
  font-size: 13px;
  font-weight: bold;
}
.rp{
  width: 190px;
  height: 350px;
  margin-left: 80px;
 
}

运行效果如下：

叶仪景——星稼轩

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
第四章课后习题

实现书单、canvas画空心圆、拼车效果，生长进度条
复制链接

扫一扫