微信小程序制作学习计划打卡记录页面包含前几天的学习时间代码
时间: 2023-06-26 17:10:02 浏览: 330
基于微信小程序的日常学习打卡系统
以下是一个简单的微信小程序制作学习计划打卡记录页面的代码示例,其中包含了前几天的学习时间:
```
<view class="container">
<view class="header">
<text>学习计划打卡记录</text>
</view>
<view class="content">
<view class="card">
<view class="card-header">
<text>今天</text>
<text>2021-07-01</text>
</view>
<view class="card-body">
<view class="card-row">
<text>学习时间:</text>
<input type="number" placeholder="请输入学习时间(分钟)"/>
</view>
</view>
</view>
<view class="card">
<view class="card-header">
<text>昨天</text>
<text>2021-06-30</text>
</view>
<view class="card-body">
<view class="card-row">
<text>学习时间:</text>
<input type="number" placeholder="请输入学习时间(分钟)"/>
</view>
<view class="card-row">
<text>已学习:</text>
<text>120分钟</text>
</view>
</view>
</view>
<view class="card">
<view class="card-header">
<text>前天</text>
<text>2021-06-29</text>
</view>
<view class="card-body">
<view class="card-row">
<text>学习时间:</text>
<input type="number" placeholder="请输入学习时间(分钟)"/>
</view>
<view class="card-row">
<text>已学习:</text>
<text>90分钟</text>
</view>
</view>
</view>
</view>
</view>
```
在上面的代码中,我们使用了三个 `card` 元素来展示前几天的打卡记录。每个 `card` 元素都包含一个 `card-header` 元素和一个 `card-body` 元素。`card-header` 元素中包含了日期信息,而 `card-body` 元素中包含了输入框和已学习时间的显示。
在实际开发中,你需要将上面的代码替换成你自己的样式和数据。同时,你还需要编写处理用户输入和计算已学习时间的逻辑代码。
阅读全文