第四章页面组件作业

最新推荐文章于 2024-10-30 16:06:51 发布

m0_74079618

最新推荐文章于 2024-10-30 16:06:51 发布

阅读量208

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_74079618/article/details/137139721

版权

本文介绍了如何使用WXML和JavaScript在微信小程序中实现圆环交错效果、书单页面展示以及西安找拼车界面的设计，同时展示了编程题中日期选择器的用法和数据绑定。

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

一.使用canvas组件实现"圆环交错"的绘制

.xml

<view class="container">
  <canvas canvas-id="olympic" style="width: 300px; height: 300px;"></canvas>
</view>

.js

Page({
  onReady: function () {
    const ctx = wx.createCanvasContext('olympic');

    // 绘制蓝色圆环
    ctx.beginPath();
    ctx.arc(100, 100, 40, 0, 2 * Math.PI);
    ctx.setFillStyle('#0073e6');
    ctx.fill();
    ctx.closePath();

    // 绘制黄色圆环
    ctx.beginPath();
    ctx.arc(140, 140, 40, 0, 2 * Math.PI);
    ctx.setFillStyle('#ffd700');
    ctx.fill();
    ctx.closePath();

    // 绘制黑色圆环
    ctx.beginPath();
    ctx.arc(180, 100, 40, 0, 2 * Math.PI);
    ctx.setFillStyle('#000');
    ctx.fill();
    ctx.closePath();

    // 绘制绿色圆环
    ctx.beginPath();
    ctx.arc(220, 140, 40, 0, 2 * Math.PI);
    ctx.setFillStyle('#008000');
    ctx.fill();
    ctx.closePath();

    // 绘制红色圆环
    ctx.beginPath();
    ctx.arc(260, 100, 40, 0, 2 * Math.PI);
    ctx.setFillStyle('#ff0000');
    ctx.fill();
    ctx.closePath();

    ctx.draw();
  }
})

效果图

二.使用相应组件,完成"书单"的页面

.xml

 
<view style="font-size: 30px;"> ⬅书单</view>
<view>
<view class="ig1">
<image src="../image/screenshot-1711853909887.png" mode="tu1" class="tou"/>
</view></view>
<view class="yi">
<view class="zi1">荷马史诗</view>
<view class="zi2">荷马</view>
<view class="zi3">《荷马史诗》以扬抑格六音步写成，集古希腊口述文学之大成。它是古希腊最伟大的作品，也是西方文学中最伟大的作品</view>
</view>
<view class="ig2">
<view class="ig2"><image src="../image/screenshot-1711683417492.png" mode=""class="tu1"/></view></view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 10px;"></view>
<view class="ig3">
<view><image src="../image/p853427696.jpg" mode=""class="tu2"/></view></view>
<view class="er">
<view class="zi1">雾都孤儿</view>
<view class="zi2">查尔斯·狄更斯</view>
<view class="zi3">该作以雾都伦敦为背景，讲述了一个孤儿悲惨的身世及遭遇。主人公奥利弗在孤儿院长大，经历学徒生涯，艰苦逃难，误入贼窝，又被迫与狠毒的凶徒为伍，历尽无数辛酸，最后在善良人的帮助下，查明身世并获得了幸福。</view>
</view>

.xss

 
 .tou{
  float: left;
  margin-top: 8px;
  width: 450px; 
  height: 220px;
}
.tu1{
  margin: 0 auto;
  float: left;
  display: block;
  width: 180px; 
  height: 160px;
}
.yi{
  margin-top: 10px;
}
.ig1{
  margin-top: 5px;
}
.ig2 {
  position: absolute; 
 
}
.ig2 image{
  position: relative;
  top: 303px;
  left: 2px;
}
 
.ig3{
  margin-top: 30px;
  position: absolute;
}
.ig3 image{
  position: relative;
  top: 400px;
}
.yi{
  margin-top: 5px;
  float: right;
}
.er{
  margin-top: 5px;
  float: right;
}
.tu2{
  margin: 0 auto;
  float: left;
  display: block;
  width: 180px; 
  height: 160px;
  margin-top: 60px;
}
.zi1{
  margin: 0 auto;
  display: block;
  font-size: 30px;
  float: none;
  display: block;
  margin-left: 200px;
  margin-top: 310px; 
}
.ww{
  position: absolute;
  left: 195px;
  top: 500px;
  font-size: 30px;
}
.m{
  color: black;
  position: absolute;
  left: 200px;
  top:540px;
  font-size: 15px;
 
}
.j{
  position: absolute;
  left: 200px;
  top:570px;
  font-size: 12px;
color: gray;
}
.zi2{
  display: block;
  font-size: 15px;
 float: none;
  display: block;
  margin-left: 200px;
  margin-top: 10px;
}
.zi3{
  display: block;
  font-size: 10px;
  float: right;
  display: block;
  margin-left: 200px;
  margin-top: 10px;
  color: grey;
}

效果图

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

.xml

<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>

效果图

四.编程题

.xml


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

.xss

.f1{
  text-align: center;
}
.rq{
  text-align: center;font-weight: bold;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;
}

.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() {
 
  }
})

效果图