微信小程序实战之打卡时钟的绘制
作者:失散多年的哥哥 时间:2024-04-17 10:35:32
一、项目展示
这是一款简单实用的小时钟工具
分为工作和休息两种状态
用户可以设置相应的时间
所有的时钟记录都会被保存下来
二、首页
首页由计时器、任务输入框和两个计时按钮组成
<view class="container timer {{isRuning ? 'timer--runing': ''}}">
<view class="timer_main">
<view class="timer_time-wrap">
<view class="timer_progress_mask"></view>
<view class="timer_progress timer_left">
<view class="timer_circle timer_circle--left" style="transform: rotate({{leftDeg}}deg);"></view>
</view>
<view class="timer_progress timer_right">
<view class="timer_circle timer_circle--right" style="transform: rotate({{rightDeg}}deg);"></view>
</view>
<text wx:if="{{!completed}}" class="timer_time">{{remainTimeText}}</text>
<text
wx:if="{{isRuning}}"
animation="{{nameAnimation}}"
class="timer_taskName">{{taskName}}{{completed ? '已完成!' : '中'}}</text>
<image
wx:if="{{completed}}"
class="timer_done"
src="../../image/complete.png"></image>
</view>
<input
type="text"
placeholder-style="text-align:center"
class="timer_inputname"
bindinput="changeLogName"
placeholder="给您的任务取个名字吧"/>
</view>
<view class="timer_footer">
<view
bindtap="startTimer"
data-type="work"
class="timer_ctrl {{isRuning && timerType == 'rest' ? 'hide' : ''}}" >{{isRuning ? '完成': '工作'}}</view>
<view
bindtap="startTimer"
data-type="rest"
class="timer_ctrl {{isRuning && timerType == 'work' ? 'hide' : ''}}" >{{isRuning ? '完成': '休息'}}</view>
</view>
</view>
效果图如下:
三、设置
用户在设置界面可以更改工作时长和休息时长
<view class="container">
<view class="section panel">
<text class="section_title">工作时长(分钟)</text>
<view class="section_body">
<slider
bindchange="changeWorkTime"
show-value="true"
min="1"
max="60"
value="{{workTime}}"
left-icon="cancel"
right-icon="success_no_circle"/>
</view>
</view>
<view class="section panel">
<text class="section_title">休息时长(分钟)</text>
<view class="section_body">
<slider
bindchange="changeRestTime"
show-value="true"
min="5"
max="60"
value="{{restTime}}"
left-icon="cancel"
right-icon="success_no_circle"/>
</view>
</view>
<view class="section panel">
<view class="section_title">
<text>主页背景</text>
</view>
<view class="section_body">
<text bindtab="" class="section_tip">选择背景 > </text>
</view>
</view>
<view class="section panel">
<view class="section_title">
<switch class="section_check" type="checkbox" size="mini" checked bindchange="switch1Change"/>
<text>启用铃声</text>
</view>
<view class="section_body">
<text bindtab="" class="section_tip">选择铃声 > </text>
</view>
</view>
</view>
效果图如下:
来源:https://blog.csdn.net/ws15168689087/article/details/124413017
标签:微信小程序,打卡,时钟
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
tensorflow多维张量计算实例
2022-02-05 00:43:48
![](https://img.aspxhome.com/file/2023/8/70198_0s.jpg)
Python函数装饰器实现方法详解
2023-08-10 12:33:16
vue2项目使用sass的示例代码
2024-04-26 17:39:16
![](https://img.aspxhome.com/file/2023/2/133162_0s.png)
python人民币小写转大写辅助工具
2022-02-10 15:28:19
Python Django框架单元测试之文件上传测试示例
2022-02-26 23:50:51
![](https://img.aspxhome.com/file/2023/0/75920_0s.png)
编写自定义的Django模板加载器的简单示例
2022-07-02 20:06:44
Oracle 随机数
2024-01-16 10:46:14
Spring + mybatis + mysql使用事物的几种方法总结
2024-01-22 02:01:25
简单的抓取淘宝图片的Python爬虫
2022-01-19 14:42:31
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2024-05-02 16:58:01
![](https://img.aspxhome.com/file/2023/7/130147_0s.png)
使用模板实现ASP代码与页面分离
2008-09-12 16:07:00
Oracle VM VirtualBox 虚拟机硬盘扩容
2024-01-14 13:58:59
![](https://img.aspxhome.com/file/2023/2/65252_0s.jpg)
发一个自己用的JS框架(试用版^_^)
2011-09-11 18:53:24
使用Python实现一个栈判断括号是否平衡
2022-01-04 02:20:29
Python数据报表之Excel操作模块用法分析
2023-09-24 22:16:59
![](https://img.aspxhome.com/file/2023/2/123662_0s.png)
判断Threading.start新线程是否执行完毕的实例
2023-06-18 16:43:25
![](https://img.aspxhome.com/file/2023/3/68383_0s.jpg)
Python运用于数据分析的简单教程
2023-08-14 07:49:13
![](https://img.aspxhome.com/file/2023/6/66286_0s.jpg)
分享MYSQL插入数据时忽略重复数据的方法
2024-01-17 15:04:49
flask-socketio实现WebSocket的方法
2022-09-25 17:26:24
Atom的python插件和常用插件说明
2022-11-29 00:46:08