第四章作业

实现五环：

.js:

Page({
  onLoad:function(options){
    var ctx = wx.createCanvasContext('myCanvas')

    ctx.beginPath()
    ctx.arc(90, 100, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('#0000FF')
    ctx.stroke()

    ctx.beginPath()
    ctx.arc(170, 100, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('#FF00FF')
    ctx.stroke()
    
    ctx.beginPath()
    ctx.arc(250, 100, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('#000000')
    ctx.stroke()
    
    ctx.beginPath()
    ctx.arc(130, 170, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('#00FF00')
    ctx.stroke()
    
    ctx.beginPath()
    ctx.arc(210, 170, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('#FFFF00')
    ctx.stroke()
    ctx.draw()
  }
})

结果：

实现小说书单： 

.wxml

<view>
  <image class="head" src="../img/1.jpg" mode=""/>
</view>

<view class="body">
  <image src="../img/2.jpg" alt=""/>
  <view class="info">
    <view class="one">朝花夕拾</view>
    <view class="twe">鲁迅</view>
    <view class="three">《朝花夕拾》原名《旧事重提》，是现代文学家鲁迅的散文集，收录鲁迅于1926年创作的10篇回忆性散文，1928年由北京未名社出版，现编入《鲁迅全集》第2卷</view>
  </view>
</view>

<view class="body">
  <image src="../img/3.jpg" alt=""/>
  <view class="info">
    <view class="one">不忘初心</view>
    <view class="twe">白居易</view>
    <view class="three">白居易是唐代最高产的诗人之一，其诗歌题材广泛，语言平易通俗，富有情味，现存有3000首。代表作《琵琶行》《长恨歌》等经典作品得到了广泛传播和流传，对后世产生了深远的影响。</view>
  </view>
</view>

.wxss:

.head{
  display: block;
  height: 150px;
}
.body{
  height: 120px;
  border-bottom: 1px solid darkgray;
}
.body image{
  display: block;
  width: 80px;
  height: 110px;
  float: left;
  margin-top: 5px;
  margin-left: 2px;
}
.info{
  height: 120px;
  width: 230px;
  float: left;
  margin-left: 4px;
}
.one{
  font-size: 20px;
}
.twe{
  font-size: 17px;
}
.three{
  font-size: 10px;
}

结果：

实现旅游拼车：

.wxml
 

<view class="head">联系方式（手机号和邮箱至少填一项）</view>
<view class="div">
  <view>称呼 *</view>
  <input type="text" placeholder="请输入昵称"/>
</view>
<view class="div">
  <view>手机号</view>
  <input type="text" placeholder="请输入手机号"/>
</view>
<view class="div">
  <view>微信号</view>
  <input type="text" placeholder="请输入微信号"/>
</view>

<view class="head">拼车信息</view>
<view class="div">
  <view>出发地点</view>
  <input type="text" placeholder="限七个字"/>
</view>
<view class="div">
  <view>目的地</view>
  <input type="text" placeholder="限七个字"/>
</view>
<view class="div">
  <view>空座数</view>
  <input type="text" placeholder="请输入空座数"/>
</view>

.wxss

.head{
  height: 27px;
  padding-top: 3px;
  color: darkslategrey;
  background-color: darkgray;
}
.div{
  height: 27px;
  padding-top: 3px;
  border-bottom: 1px solid darkgray;
}
.div view{
  float: left;
  padding-left: 10px;
  width: 82px;
}
.div input{
  display: block;
  float: left;
}

结果：

实现极简小程序：

.wxml

<form bindsubmit="bind">
  <input type="text" name="time" placeholder="请输入时间"/>
  <button formType="submit">提交</button>
  <button formType="reset">清除</button>
</form>
你出生至今：{{people}}个月

.js

Page({
  data:{
    people:new Date().toLocaleDateString()
  },
  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
    })
  }
})

结果：