本站消息

站长简介/公众号


站长简介:高级工程师,爱好交友,无偿辅导python和前端,技术交流,面试指导,找工作指导,瞎聊都可加我微信i88811i哈,欢迎欢迎!也欢迎加入程序员交流群,专属程序员的圈子,加我微信拉你进群.欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-05(14)

2021-06(93)

2021-07(2)

2021-08(60)

2021-09(65)

微信小程序项目实例——打卡时钟

发布于2022-05-07 20:11     阅读(345)     评论(0)     点赞(20)     收藏(0)


微信小程序项目实例——打卡时钟

项目代码见文字底部


一、项目展示


这是一款简单实用的小时钟工具
分为工作和休息两种状态
用户可以设置相应的时间
所有的时钟记录都会被保存下来

在这里插入图片描述


二、首页


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

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

效果图如下:

在这里插入图片描述


文末:项目代码

点击下载

在这里插入图片描述


站长简介:高级工程师,爱好交友,无偿辅导python和前端,技术交流,面试指导,找工作指导,瞎聊都可加我微信i88811i哈,欢迎欢迎!也欢迎加入程序员交流群,专属程序员的圈子,加我微信拉你进群
欢迎关注我的公众号:程序员总部,关注公众号回复前端,免费领取 全套前端视频教程,关注公众号回复前端充值+你的账号,免费为您充值1000积分



所属网站分类: 技术文章 > 博客

作者:大师兄

链接:http://www.qianduanheidong.com/blog/article/355880/151e720124814f3fee49/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

20 0
收藏该文
已收藏

评论内容:(最多支持255个字符)