JavaScript怎么实现微信小程序打卡时钟

今天主机评测网小编给大家分享一下JavaScript怎么实现微信小程序打卡时钟的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

一、项目展示

这是一款简单实用的小时钟工具

分为工作和休息两种状态

用户可以设置相应的时间

所有的时钟记录都会被保存下来

二、首页

首页由计时器、任务输入框和两个计时按钮组成

<viewclass="containertimer{{isRuning?'timer--runing':''}}"><viewclass="timer_main"><viewclass="timer_time-wrap"><viewclass="timer_progress_mask"></view><viewclass="timer_progresstimer_left"><viewclass="timer_circletimer_circle--left"></view></view><viewclass="timer_progresstimer_right"><viewclass="timer_circletimer_circle--right"></view></view><textwx:if="{{pleted}}"class="timer_time">{{remainTimeText}}</text><textwx:if="{{isRuning}}"animation="{{nameAnimation}}"class="timer_taskName">{{taskName}}{pleted?'已完成！':'中'}}</text><imagewx:if="{pleted}}"class="timer_done"src="../../imageplete.png"></image></view><inputtype="text"placeholder-class="timer_inputname"bindinput="changeLogName"placeholder="给您的任务取个名字吧"/></view><viewclass="timer_footer"><viewbindtap="startTimer"data-type="work"class="timer_ctrl{{isRuning&&timerType=='rest'?'hide':''}}">{{isRuning?'完成':'工作'}}</view><viewbindtap="startTimer"data-type="rest"class="timer_ctrl{{isRuning&&timerType=='work'?'hide':''}}">{{isRuning?'完成':'休息'}}</view></view></view>

效果图如下：

三、设置

用户在设置界面可以更改工作时长和休息时长

<viewclass="container"><viewclass="sectionpanel"><textclass="section_title">工作时长(分钟)</text><viewclass="section_body"><sliderbindchange="changeWorkTime"show-value="true"min="1"max="60"value="{{workTime}}"left-icon="cancel"right-icon="success_no_circle"/></view></view><viewclass="sectionpanel"><textclass="section_title">休息时长(分钟)</text><viewclass="section_body"><sliderbindchange="changeRestTime"show-value="true"min="5"max="60"value="{{restTime}}"left-icon="cancel"right-icon="success_no_circle"/></view></view><viewclass="sectionpanel"><viewclass="section_title"><text>主页背景</text></view><viewclass="section_body"><textbindtab=""class="section_tip">选择背景></text></view></view><viewclass="sectionpanel"><viewclass="section_title"><switchclass="section_check"type="checkbox"size="mini"checkedbindchange="switch2Change"/><text>启用铃声</text></view><viewclass="section_body"><textbindtab=""class="section_tip">选择铃声></text></view></view></view>

效果图如下：

以上就是“JavaScript怎么实现微信小程序打卡时钟”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注主机评测网行业资讯频道。

上一篇：Java抽象类和接口如何使用

下一篇：Python在画图时怎么使用特殊符号

---