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

这篇具有很好参考价值的文章主要介绍了微信小程序项目实例——打卡时钟。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

项目代码见文字底部


一、项目展示


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

微信小程序时钟,微信小程序项目实例,微信小程序,小程序,css,android,ios


二、首页


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

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

效果图如下:

微信小程序时钟,微信小程序项目实例,微信小程序,小程序,css,android,ios


三、设置


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

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

效果图如下:

微信小程序时钟,微信小程序项目实例,微信小程序,小程序,css,android,ios


文末:项目代码

点击下载

微信小程序时钟,微信小程序项目实例,微信小程序,小程序,css,android,ios文章来源地址https://www.toymoban.com/news/detail-596340.html

到了这里,关于微信小程序项目实例——打卡时钟的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • (赠源码)java+SSM+MySQL诗词打卡微信小程序44669-计算机毕业设计项目选题推荐

    摘要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,诗词打卡微信小程序被用户普遍使用,为方便用户能够可以随时进行在线查看诗词打卡的数据信息管理,

    2024年02月06日
    浏览(50)
  • 微信小程序项目实例——备忘录

    项目代码见文字底部,点赞关注有惊喜 项目是一个备忘录,拥有记录文字、计时和提醒的基本功能 项目只有一个页面,整体简约便捷 用户可以输入相关事件,并设立时间,便可完成备忘 当完成或未按期完成时,可以自行确认或删除 项目已上传,点击下载(关注可私聊拿代

    2024年02月11日
    浏览(41)
  • 微信小程序项目实例——幸运大转盘

    项目代码见文字底部,点赞关注有惊喜 幸运大转盘是一个简单的抽奖小程序 参与用户点击抽奖便可抽取轮盘的奖品 抽奖页是一个大轮盘和活动规则 页面形式简单 主要核心在于轮盘 核心代码【轮盘旋转】如下: 其他相关代码见文章底部 效果如下: 领奖页是对获奖的信息进

    2024年02月11日
    浏览(45)
  • 微信小程序项目实例——别踩白块

    项目代码见文字底部,点赞关注有惊喜 别踩白块是一款微信小游戏 分为无尽模式、计时模式、急速模式三种模式 用户需要点击不断移动的黑色方块 若点击到白色方块则游戏结束 无尽模式下可以一直进行游戏 直到失败为止 其中方块的生成和点击计数代码如下: 具体的代码

    2024年02月09日
    浏览(44)
  • 微信小程序项目实例源码——本地电商平台小程序

    该微信小程序项目使用了 vant ui 组件库,项目页面完整、功能全部有效! 本项目为小程序前端项目,可以直接导入微信开发者工具中打开,可用于计算机专业的课程设计、毕设项目,也可作为商用小程序的前端页面模板。 2.1 首页 在首页中使用了轮播图作为头部 banner 广告,

    2024年02月10日
    浏览(49)
  • 微信小程序项目实例——双人五子棋

    项目代码见文字底部,点赞关注有惊喜 微信小程序项目实例——双人五子棋 双人五子棋是一款游戏小程序 两位选手可以在15x15的棋盘上 进行五子棋竞技 同时小程序设置了悔棋功能 点击落子 判断胜负 胜利效果 重新开始 悔棋 具体的介绍就到这里了 有兴趣的同学可以继续研

    2024年02月12日
    浏览(47)
  • 狼人杀微信小程序项目实例(附源码)

    狼人杀是一款多人参与的,通过语言描述推动、较量口才和分析判断能力的策略类桌面游戏。 玩家人数适于4-18人参与 主要角色有:狼人 、预言家 、平民 、女巫 、猎人 、白痴 、守卫 、骑士等 “我自己是一名从事了6年python开发的老程序员,今年年初我花了一个月整理了一

    2024年02月11日
    浏览(47)
  • 微信小程序项目实例SSM项目小程序运动减肥+后台管理系统

     🍅文末获取联系🍅 目录 一、项目介绍  3.1可行性分析 3.1.1技术可行性 3.1.2经济可行性 3.1.3操作可行性 3.2网站性能需求分析 3.3网站功能分析 3.4系统流程的分析 3.4.1 用户管理的流程 二、截图  三、源码获取 计算机毕业设计微信小程序毕设项目之运动减肥+后台管理系统_哔

    2024年02月06日
    浏览(61)
  • 微信小程序项目实例——图片处理小工具(自制低配版美图秀秀)

    项目代码见文字底部,点赞关注有惊喜 这是一款实用的工具型小程序 共有滤镜、效果图和动态滤镜三个功能 用户可以选择想要处理的图片,设置模糊、怀旧、复古、美白以及其他效果 同时程序还增设了效果图功能 用户可以自行调整饱和度、亮度和对比度 此外程序还有动态

    2024年02月09日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包