第四章作业

2301_76596115

已于 2024-03-31 17:55:50 修改

阅读量228

点赞数 3

文章标签：前端 java javascript

于 2024-03-31 16:57:58 首次发布

本文链接：https://blog.csdn.net/2301_76596115/article/details/137177184

版权

操作题

1．使用canvas组件五圈实现的绘制。

index.wxml:

<canvas canvas-id="myCanvas" style="height: 200px;"></canvas>

index.js:

Page({
  onReady:function(option){
      var ctx = wx.createCanvasContext('myCanvas')
      ctx.beginPath()
      ctx.setStrokeStyle('#0000ff')
      ctx.arc(70,100,40,0,2 * Math.PI)
      ctx.lineWidth=6
      ctx.stroke()

      ctx.beginPath()
      ctx.setStrokeStyle('#000')
      ctx.arc(160,100,40,0,2 * Math.PI)
      ctx.lineWidth=6
      ctx.stroke()

      ctx.beginPath()
      ctx.setStrokeStyle('#f00')
      ctx.arc(250,100,40,0,2 * Math.PI)
      ctx.lineWidth=6
      ctx.stroke()

      ctx.beginPath()
      ctx.setStrokeStyle('#ff0')
      ctx.arc(115,140,40,0,2 * Math.PI)
      ctx.lineWidth=6
      ctx.stroke()

      ctx.beginPath()
      ctx.setStrokeStyle('#0f0')
      ctx.arc(205,140,40,0,2 * Math.PI)
      ctx.lineWidth=6
      ctx.stroke()
      ctx.draw()
    }
})

运行结果：

2.使用相应组件，完成类似如图4-29所示的“书单”页面。

index.wxml:

<view class="textsize">⬅  书单</view>
<view class="top">
<view class="one">培养商业意识，走出生活，职场和事业的困境。</view>
<view class="two">创新者是如何思考问题的？本书单包括了互联网，思维方式，商业，文案，市场，营销等方方面面，是在思维方式上的创新，略去传统商学院的教条</view>
</view>

<image src="/image/hali.jpg" mode=""/>
<view class="last">
<view class="textsize">哈利波特</view>
<view class="writer"> J.K.罗琳 (J.K.Rowling) </view>
<view class="jian">2000年的一个深夜，在美国书店的烛光中，穿着黑斗篷的店员，也是在这一年，简体中从此哈利·波特系列图书席卷全球.</view>
</view>
<view class="hr"></view>
<image src="/image/tomorrow.jpg" mode=""/>
<view class="last">
<view class="textsize">明朝那些事儿</view>
<view class="writer"> 当年明月 </view>
<view class="jian">《明朝那些事儿》讲述从1344年到1644年，明朝三百年间的历史。作品以史料为基础，以年代和具体人物为主线，运用小</view>
</view>

index.wxss:

.textsize{
  font-weight: bolder;
  font-size: 20px;
}
.top{
  margin-top: 10px;
  width: 100%;
  height: 170px;
  background-color: black;
  color: aliceblue;
  font-size: 13px;
}
.one{
  margin-left: 60px;
  line-height: 30px;
  width: 220px;
  font-size: 20px;
}
.two{
  margin-top: 30px;
  margin-left:20px;
  width: 290px;
}
image{
  width: 70px;
  height: 110px;
  margin-top: 20px;
  margin-left: 10px;
  float: left;
}
.last{
  margin-top: 20px;
  margin-left: 100px;
}
.writer{
  font-size: 13px;
  font-weight: bolder;
}
.jian{
  font-size: 12px;
  margin-top: 10px;
  color: gray;
}
.hr{
  margin: 0px auto;
  background: #E0E3DA;
  width: 300px;
  height: 5rpx;
 margin-top: 30px;
}

运行结果：

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

index.wxml:

<view class="catalog">X 西安找拼车</view>
<view class="contact">联系方式（手机号和微信至少填一项）</view>
<view class="bighr"></view>
<view>
  <view class="firstcoumn">称呼*</view>
  <view class="placehold">请输入称呼</view>
</view>
<view class="hr"></view>
<view>
  <view class="firstcoumn">手机号</view>
  <view class="placehold">请输入手机号</view>
</view>
<view class="hr"></view>
<view>
  <view class="firstcoumn">微信号</view>
  <view class="placehold">请输入微信号</view>
</view>
<view style="border-bottom: 1px solid darkgrey;  padding: 10px;"></view>
<view  class="contact">拼车信息</view>
<view  class="bighr">
</view>
<view>
  <view  class="firstcoumn">出发地点*</view>
  <view class="placehold">限7个字</view>
</view>
<view class="hr"></view>
<view>
  <view  class="firstcoumn">目的地*</view>
  <view class="placehold">限7个字</view>
</view>
<view class="hr"></view>
<view>
  <view  class="firstcoumn">空座位*</view>
  <view class="placehold">请输入空座位</view>
</view>
<view class="hr"></view>

index.wxss:

.catalog{
  padding: 20px;
  line-height: 40px;
  background-color: black;
  color: white;
  height: 20px;
}
.contact{
  color:grey;
  height: 25px;
  line-height: 55px;
  margin-left: 20px;
}
.bighr{
  border-bottom: 4px solid rgba(228, 224, 224, 0.945);
  padding: 10px;
}
.firstcoumn{
  font-size: 20px;
  font-weight: bolder;
  position: relative;
  top: 18px;
  left: 20px;
}
.placehold{
 height: 15px;
  font-size: 20px;
  color: grey;
  position: relative;
  left: 140px;
  top: -10px;
}
.hr{
 margin-left: 20px;
 width: 280px;
 border-bottom: 1px solid darkgrey;
 padding: 10px;
}

index.json:

{
  "usingComponents": {},
  "navigationStyle": "custom"
}

运行结果：

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

index.wxml:


<view style="text-align: center;">中国现阶段人均寿命900个月</view>
<view class="t">{{year}}年 {{month}}月 {{day}}日 至今 {{(2024-year)*12+(3-month)}}个月</view>
<button style="width:40vw" class="dd" bindtap="bind">换一个日期</button>
<button style="width:40vw" class="cc" bindtap="clearcontext">清楚记录</button>
<picker-view indicator-style="height:50px;" style ="width:100%; height:280px;"
 value ="{{value}}" bindchange ="bindChange" class="w" hidden="{{hiddenName}}">
 <picker-view-column>
<view wx:for="{{years}}"style="line-height:50px">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" style ="line-height:50px">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" style="line-height:50px">{{item}}日</view>
</picker-view-column>
</picker-view>
<view class="pp">
<image src="/image/battery.png"/>
</view>
<view class="text">能把在前面行走的机会抓住的人,十有八九都会成功。</view> 
<view class="img">
</view>

index.js:

const date =new Date()
const years=[]
const months=[]
const days=[]
//定义年份
for(let i=1900;i<=2024;i++){
years.push(i)
}
//定义月份
for(let i=1;i<=12;i++){
months.push(i)
}
//定义日期
for(let i=1;i<=31;i++){
days.push(i)
}
parseInt(years)
Page({
data:{
years:years,
months:months,
days:days,
year:date.getFullYear(),
month:date.getMonth()+1,day:date.getDate(),value:[118,0,0],
hiddenName:true
},

//定位到2018年1月1日
bind:function(){
  this.setData({
    hiddenName:!this.data.hiddenName
})
},
clearcontext:function(){
  this.setData({
    year:date.getFullYear(),
    month:date.getMonth()+1,
    day:date.getDate(),  
  })
},
bindChange:function(e){
const val =e.detail.value 
console.log(val);
this.setData({
year:this.data.years[val[0]],
month:this.data.months[val[1]],
day:this.data.days[val[2]],
})
}
})

index.wxss:

.t{
  text-align: center;
  margin-top: 10px;
  font-size: 20px;
}
.dd{
  border: 1px solid #000;
  position: relative;
  font-size: 15px;
  left: 25px;
  top: 10px;
  float: left;
}
.cc{
  left: 5px;
  top: 10px;
  border: 1px solid #000;
  position: relative;
  font-size: 15px;
}
.pp image{
  height: 470px;
  width: 850px;
  margin-left: -220px;
  margin-top: -70px;
}
.text{
  width: 290px;
  font-size: 14px;
  margin-top: -120px;
  margin-left: 17px;
}
.w{
  position: absolute;
  margin-left: 40px;
  margin-top: 10px;
}
.img image{
  width: 80px;
  height: 60px;
  position: relative;
  top:20px;
}

运行结果：