微信小程序之第四章作业

一、奥运五环

代码

<canvas canvas-id="olympic-rings" style="width: 300px; height: 200px;margin: auto;"></canvas>

Page({
  onReady() {
    const ctx = wx.createCanvasContext('olympic-rings');

    // 绘制蓝色圆环
    ctx.beginPath();
    ctx.arc(60, 60, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle('#0072bb');
    ctx.stroke();

    // 绘制黄色圆环
    ctx.beginPath();
    ctx.arc(110, 60, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle('#f4d942');
    ctx.stroke();

    // 绘制黑色圆环
    ctx.beginPath();
    ctx.arc(160, 60, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle('#000000');
    ctx.stroke();

    // 绘制绿色圆环
    ctx.beginPath();
    ctx.arc(85, 100, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle('#009e52');
    ctx.stroke();

    // 绘制红色圆环
    ctx.beginPath();
    ctx.arc(135, 100, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle('#ff6319');
    ctx.stroke();

    ctx.draw();
  }
})

结果

二、图书清单

代码

结果

三、西安找车

代码

xml

<!-- carpool.wxml -->
<view>
  <form bindsubmit="submitForm">
    <!-- 联系方式表单 -->
    <view class="form-section">
      <view class="section-title">联系方式</view>
      <view class="input-group">
        <text>姓名：</text>
        <input placeholder="请输入姓名" name="name" />
      </view>
      <view class="input-group">
        <text>手机号：</text>
        <input placeholder="请输入手机号" name="phone" type="number" />
      </view>
      <view class="input-group">
        <text>微信号：</text>
        <input placeholder="请输入微信号" name="wechat" />
      </view>
    </view>
    
    <!-- 拼车信息表单 -->
    <view class="form-section">
      <view class="section-title">拼车信息</view>
      <view class="input-group">
        <text>出发地点：</text>
        <input placeholder="限制7个字" name="departure" />
      </view>
      <view class="input-group">
        <text>目的地：</text>
        <input placeholder="限制7个字" name="destination" />
      </view>
      <view class="input-group">
        <text>空座数：</text>
        <input placeholder="请输入空座数" name="seats" type="number" />
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <button form-type="submit">提交</button>
  </form>
</view>

wxss

/* carpool.wxss */
.gray-bg {
  background-color: #635b5b; /* 设置背景颜色为灰色 */
}

.section-title {
  height: 50rpx;
  line-height: 50rpx;
  color: #333; /* 设置标题行的文字颜色 */
  font-weight: bold; /* 设置标题行的文字加粗 */
  font-size: 16px; /* 设置标题行的文字大小 */
  margin-bottom: 10px; /* 设置标题行与输入框之间的间距 */
  background-color: #c7bdbd; /* 设置背景颜色为灰色 */
}

.input-group {
  display: flex; /* 将文字和输入框放在同一行 */
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 10px; /* 设置输入框之间的间距 */
}

.input-group text {
  width: 80px; /* 设置文字的宽度 */
  text-align: left; /* 文字右对齐 */
  margin-right: 10px; /* 设置文字与输入框之间的间距 */
}

结果

四、人生进程

代码

<!-- index.wxml -->
<view class="container">
  <view class="header">
    <text>2005至今已经度过的{{ months }}个月</text>
  </view>
  <view class="buttons">
    <button bindtap="changeDate">更换日期</button>
    <button bindtap="clearRecords">清空记录</button>
  </view>
  <view class="battery">
    <image src="/pages/life/pictrue/lj4j3z5h.png" class="im"/>
    <text class="battery-icon">
   
    </text>
    <text class="battery-percentage">{{ batteryPercentage }}%</text>
  </view>

</view>

<!-- index.wxml -->
<view class="container">
  <view class="header">
    <text>2005至今已经度过的{{ months }}个月</text>
  </view>
  <view class="buttons">
    <button bindtap="changeDate">更换日期</button>
    <button bindtap="clearRecords">清空记录</button>
  </view>
  <view class="battery">
    <image src="/pages/life/pictrue/lj4j3z5h.png" class="im"/>
    <text class="battery-icon">
   
    </text>
    <text class="battery-percentage">{{ batteryPercentage }}%</text>
  </view>

</view>

js

// index.js
Page({
  data: {
    startDate: '', // 用户输入的起始日期
    months: 0, // 已经度过的月数
    batteryPercentage: 0 // 电池百分比
  },

  onLoad: function () {
    // 获取当前日期
    const currentDate = new Date();
    const currentYear = currentDate.getFullYear();
    const currentMonth = currentDate.getMonth() + 1;
    const currentDay = currentDate.getDate();
    const currentDateStr = `${currentYear}-${currentMonth}-${currentDay}`;

    // 默认起始日期为当前日期
    this.setData({
      startDate: currentDateStr
    });

    // 计算已经度过的月数
    this.calculateMonths(currentDateStr);
  },

  // 更换日期
  changeDate: function () {
    wx.showModal({
      title: '更换日期',
      content: '请输入新的日期（YYYY-MM-DD）',
      success: res => {
        if (res.confirm) {
          const newDate = res.inputValue;
          if (this.isValidDate(newDate)) {
            this.setData({
              startDate: newDate
            });
            this.calculateMonths(newDate);
          } else {
            wx.showToast({
              title: '日期格式不正确',
              icon: 'none'
            });
          }
        }
      }
    });
  },

  // 清空记录
  clearRecords: function () {
    this.setData({
      startDate: '',
      months: 0,
      batteryPercentage: 0
    });
  },

  // 计算已经度过的月数
  calculateMonths: function (startDate) {
    const start = new Date(startDate);
    const current = new Date();
    const months = (current.getFullYear() - start.getFullYear()) * 12 + (current.getMonth() - start.getMonth());
    this.setData({
      months: months
    });

    // 计算电池百分比
    const totalMonths = 100 * 80; // 假设人类平均寿命为80年
    const batteryPercentage = (months / totalMonths) * 100;
    this.setData({
      batteryPercentage: Math.min(100, batteryPercentage) // 限制最大值为100
    });
  },

  // 验证日期格式是否正确
  isValidDate: function (dateString) {
    const regex = /^\d{4}-\d{1,2}-\d{1,2}$/;
    if (!regex.test(dateString)) {
      return false;
    }
    const parts = dateString.split("-");
    const year = parseInt(parts[0], 10);
    const month = parseInt(parts[1], 10);
    const day = parseInt(parts[2], 10);
    if (year < 1000 || year > 3000 || month == 0 || month > 12) {
      return false;
    }
    const monthLength = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)) {
      monthLength[2] = 29;
    }
    return day > 0 && day <= monthLength[month];
  }
});

结果