demo1:番茄时钟

项目描述（需求分析）：使用原生JS加JQery实现下面效果

1. 通过点击Break Length或者Session Length下面的- 、+按钮设置倒计时时间;

2. 点击改变时钟状态，点击Break显示为Break、点击Session显示为Session;

3. 设置时间后，进入倒计时状态，并且显示为00: 00：00 的显示模式；

4. Session状态结束后，倒计时转为Break，如此反复；

5. 时钟背景颜色在Session时设置为一种颜色，Break时设置为另一种颜色，并且高度随着时间变化。

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/index.css">
<title>tomato clock</title>
</head>
<body>
<div class="container"><div class="tomato">Tomato Clock</div><div class="setNum"><div class="break"><div class="break-title">Break Length</div><div class="break-minute">-</div><div class="break-num"></div><div class="break-add">+</div></div><div class="session"><div class="session-title">Session Length</div><div class="session-minute">-</div><div class="session-num"></div><div class="session-add">+</div></div></div><div class="circle"><div class="model"><div class="bg"></div><div class="title"></div><div class="time"></div></div></div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

js:http://libs.baidu.com/jquery/2.0.0/jquery.min.js JQuery百度CDN；

js自撰部分

var breakTime = 5,sessionTime = 25,model = 'Session',current = sessionTime * 60,flag = false,timer;function init(){$('.break-num').text(breakTime);$('.session-num').text(sessionTime);$('.title').text(model);$('.time').text(sessionTime);clickEvent();
}
init();function clickEvent(){$('.break-minute').click(function(){changeNum('b',-1);})$('.break-add').click(function(){changeNum('b',1);})$('.session-minute').click(function(){changeNum('s',-1);})$('.session-add').click(function(){changeNum('s',1);})$('.model').click(function(){if(flag){clearInterval(timer);}else{timer = setInterval(function(){changeTime();},1000)}flag = !flag;})
}function changeTime(){current --;
if( model == 'Session' ){if( current < 0 ){current = breakTime * 60;model = 'Break';$('.title').text(model);}$('.bg').css('background','orange');}else{if( current < 0 ){current = sessionTime * 60;model = 'Session';$('.title').text(model);}$('.bg').css('background','green');}if( model == 'Session' ){// 高度百分比换算公式：(1-current/(breakTime*60))*100 + '%'$('.bg').height((1-current/(sessionTime*60))*100 + '%')}else if( model == 'Break'){$('.bg').height((1-current/(breakTime*60))*100 + '%')}$('.time').text(seversion(current));
}
function seversion(time){current = parseInt(time);var h = parseInt(current/3600),m = parseInt(current%3600/60),s = parseInt(current%3600%60);return double(h) + ':' + double(m) + ':' + double(s);
}
function double(num){if( num < 10 ){return num = '0' + num;}else{return num = '' + num;}
}function changeNum(str,num){if(!flag){if( str=='b' ){breakTime += num;if( breakTime < 1 ){breakTime = 1;}current = breakTime*60;model = 'Break';$('.title').text(model);$('.break-num').text(breakTime);$('.time').text(breakTime);}else{sessionTime += num;if( sessionTime < 1){sessionTime = 1;}current = sessionTime*60;model = 'Session';$('.title').text(model);$('.session-num').text(sessionTime);$('.time').text(sessionTime);}}
}

css部分：

body{margin: 0;padding: 0;user-select: none;background: #222;
}
.container{width: 800px;margin: 0 auto;text-align: center;color: #fff;
}
.tomato{font-size: 6em;margin: 80px 0;font-weight: bold;
}
.setNum{width: 100%;height: 120px;
}
.break{float: left;
}
.session{float: right;
}
.break-title,.session-title{font-size: 36px;
}
.break-minute,.break-num,.break-add,.session-minute,.session-num,.session-add{font-size: 24px;padding: 15px;display: inline-block;
}
.break-minute,.break-add,.session-minute,.session-add{cursor: pointer;
}
.circle{margin: 0 auto;height: 400px;width: 400px;border: 5px solid orange;border-radius: 50%;
}
.model{position: relative;margin: 8px;width: 384px;height: 384px;border-radius: 50%;overflow: hidden;
}
.bg{position: absolute;z-index: -1;bottom: 0;height: 0;width: 100%;background: orange;
}
.title{font-size: 72px;margin: 60px 0;
}
.time{font-size: 64px;margin-top: 40px;
}

JavaScript笔记：

1、换算时、分、秒：var h = parseInt(current/3600),

m = parseInt(current%3600/60),

s = parseInt(current%3600%60);

return h + ':' + m + ':' + s;

转载于:https://my.oschina.net/u/4036426/blog/2961877

demo1:番茄时钟相关推荐

网页版番茄时钟的制作——Pomodoro Clock
番茄时钟的功能想必大家都熟悉,简单点说就是工作时间+休息时间. 该网页就实现了这两个功能,可以自定义工作时间与休息时间,且允许暂停. 先放张效果图: 效果演示:戳我进入演示解释一下,session ...
android番茄时钟代码,一种实现极简番茄时钟的思路
概述最近跟着扔物线的自定义View教程重新复习了一波基础,但是API这种东西如果不用很容易就忘了,趁大脑还没触发GC之前,最好的记忆方式就是撸个Demo出来.iOS上有一款个人很喜欢的简约TODO应 ...
番茄时钟（提升专注力，减少中断）- 番茄工作法
番茄时钟(提升专注力,减少中断)- 番茄工作法 APP 推荐工作或者学习过程中,我们常常会被其它任务打断,被一些通知消息吸引,转而停下手头上的事情去忙其它的事情,导致工作被切来切去,很难专注去完成一 ...
适合微信小程序作品的极简番茄时钟
如果觉得有用,可以点赞关注我哦结果图: 微信公众号新白者回复番茄闹钟可以得到源码一.作品设计小程序的理念是所见即所得,这是未来应用程序的理念;小程序是场景化的,核心场景在于线下的服务载体.纯线上 ...
我的app JustDoIt 番茄时钟
好吧,现在来介绍一下我的一个app吧,名字叫JustDoIt.是一款番茄时钟类型的app.我想很快就要把它发布了.说不上开心或者不开心.首先它并非我的第一个app,之所以拿出来介绍,可能是想以后做得更 ...
视频教程-微信小程序开发实战之番茄时钟开发-微信开发
微信小程序开发实战之番茄时钟开发 4年web前后端开发经验,熟悉PHP,Python后端技术,熟悉基于Lnmp环境的项目开发和部署,擅长Yii,ThinkPHP,CI,Django,Flask等国内外 ...
番茄钟怎么调_番茄时钟响铃提醒设置方法
大家在工作或者是在学习的过程当中,肯定会达到一个忘我的境界,比如什么时候吃饭,什么时候该休息一下了,有的时候真的会忘记了,不过,这时候,需要一个小工具来提醒你啦,就是番茄时钟啦, 看看怎么使用吧. 番 ...
摸鱼写了一个番茄时钟vscode插件来摸鱼(劳逸结合)
想法想找一个番茄时钟的vscode插件来劳逸结合,有规律摸鱼,翻了很多vscode 插件都不太满意,干脆自己撸了一个. 特性遵循番茄时钟的工作方式–每1个番茄时钟有一个短休息时间,4个番茄时钟后有 ...
简易番茄时钟web实现
番茄时钟WEB实现工作都会存在效率问题,小番茄25分钟专注后休息的理论很好的帮助在职人员以及在校学生规划自己一天的生活. 可以利用基本的web知识开发一个简单的25分钟倒计时并提示的小网页. 实现结 ...

demo1:番茄时钟

demo1:番茄时钟相关推荐

最新文章

热门文章