第四章作业

一. 使用 canvas 组件实现 “奥运五环” 的绘制

运行代码:

<!-- //wxml -->
<canvas canvas-id="canvasProgressbg" style="border: 3px solid red;"/>

//js
Page({
  onLoad:function(options){
    var ctx =wx.createCanvasContext('canvasProgressbg',this)
    ctx.setLineWidth(1)
    ctx.setFillStyle('green')
    ctx.setFillStyle('blue')
    ctx.setFillStyle('red')
    ctx.setLineCap('round')
    ctx.arc(40,40,35,0,2*Math.PI,false)
    ctx.stroke();
    ctx.draw()
    for (let i = 0; i < 5; i++) {
      ctx.beginPath()
 
      ctx.arc(40,40,35,0,2*Math.PI,false)
      ctx.setStrokeStyle('red')
      ctx.stroke()}
      ctx.beginPath()
     ctx.arc(60,60,35,0,2*Math.PI)
     ctx.setStrokeStyle('green')
      ctx.stroke()
      ctx.beginPath()
      
      ctx.arc(80,40,35,0,2*Math.PI)
     ctx.setStrokeStyle('blue')
      ctx.stroke()
      ctx.beginPath()
      
      ctx.arc(40,100,35,0,2*Math.PI)
     ctx.setStrokeStyle('yellow')
      ctx.stroke()
      ctx.beginPath()
    
    ctx.arc(80,100,35,0,2*Math.PI)
    ctx.setStrokeStyle('pink')
     ctx.stroke()
 
      ctx.setFontSize(20)
ctx.fillText('五环', 50, 50)
ctx.draw()
    }
})

 

运行结果:

二. 使用相应组件，完成如图所示的 “书单” 页面

运行代码:

<!--Page/zysi/zysi.wxml-->
<view>
<image src="/image/zy1.jpg"/>
</view>
<view style="display: flex;flex-direction:row;">
  <image class="a" src="/image/zy3.jpg"/>
<view>
  <view style="size:80px;">林徽因</view>
  <view style="size: 40px;">中国现代建筑师，诗人，作家</view>
  <p>民国二十年（1931年）10月，林徽因在《诗刊》第3期上首次以“林徽因”发表诗作，从此，林徽音成为"林徽因"</p >
</view>
</view>
<view style="display: flex;flex-direction:row;">
  <image class="a" src="/image/zy2.jpg"/>
<view>
  <view style="size:80px;">苏东坡传</view>
  <view style="size: 40px;">林语堂作家，翻译家</view>
  <p>通过诗词、书画等形式，展现一代文豪苏东坡的坎坷人生。书中不仅描述其文学成就，还展现其多才多艺与豁达的人生观</p >
</view>
</view>

运行结果:

三.使用相应组件，完成如图 4 - 30 所示的“西安找拼车小程序部分界面

运行代码:

<!-- //wxml -->
<view style="background-color: black;height: 60px;"><view style="color: white;padding-top: 20px;">西安找拼车</view>
</view>
<view style="color:grey;padding-top: 10px;background-color: darkgray;height: 35px;">
联系方式（手机号和微信至少填一项）</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 0px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top: 115px;">称呼*</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:115px">请输入称呼</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 20px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top:150px">手机号</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:150px">请输入手机号</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 20px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top: 195px;">微信号</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:195px">请输入微信号</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 23px;"></view>
<view style="color:grey;padding-top: 10px;background-color: darkgray;height: 35px;">
拼车信息</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 0px;">
</view>
<view>
  <view style="font-size: 20px;position: absolute;top: 290px;">出发地点*</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:290px">限7个字</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 25px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top: 340px;">目的地*</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:340px">限7个字</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 25px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top: 390px;">空座位*</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:390px">请输入空座位</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 25px;">
</view>

运行结果:

四. "人生进程" 是一款极简的小程序，它只有一个功能：就是计算一个人从出生到现在已经度过了多少个月，请编写程序完成此功能

运行代码:

<view style="text-align:center">中国现阶段人均寿命900各月</view>
<view class="riqi" style="text-align: center;">{{n}}年{{y}}月{{r}}日至今{{e}}个月</view>
<view>
<picker mode="date" start="{{startdate}}" end="{{enddate}}" value="{{date}}" bindchange="changedate">
 <button style="width: 140px;"> 换一个日期</button>
</picker>
<button  style="width: 120px;" bind:tap="clean">清除记录</button>
</view>
<image src="/image/zy5.jpg" mode=""/>
<view class="wz">能把在前面行走的机会抓住的人，十有八九都会成功。</view>

//js
Page({
  data: {
    startdate:2000,
    enddate:2050,
    date:'2004',
    n:"2004",
    y:"10",
    r:"24",
    e:"233"
  },
  changedate(e){
this.setData({date:e.detail.value});
console.log(e.detail.value);
 // 将字符串转换为Date对象
 let date = new Date(e.detail.value);
 // 创建一个Date对象
let sjc=new Date()//当前的时间
let newyear = sjc.getFullYear();  // 获取年份
 let newmonth = sjc.getMonth() + 1;  // 获取月份，需要+1因为月份是从0开始的
 // 获取年、月、日
 let year = date.getFullYear();  // 获取年份
 let month = date.getMonth() + 1;  // 获取月份，需要+1因为月份是从0开始的
 let day = date.getDate();  // 获取日
let yue=(newyear-year-1)*12+12-(month-newmonth)
console.log(yue);
 this.setData({n:year,y:month,r:day});
 this.setData({e:yue});
 
 // 打印结果
 console.log("年: " + year + ", 月: " + month + ", 日: " + day);
  },
  clean(){
this.setData({
  n:"",
  y:"",
  r:"",
  e:""
})
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
 
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
 
  }
})

/* Page/zysi/zysi.wxss */
.riqi{
  text-align: center;font-size: 20px; margin-top: 10px;
}
picker{
    float: left;
}
.dd{
margin: 25px 0 0 40px;
}
image{
  width: 200px;
  height: 380px; margin-left: 85px;
}
.wz{
  font-size: 16px;margin: 0 15px;font-weight: bold;
}

 运行结果: