网页版番茄时钟的制作—

番茄时钟的功能想必大家都熟悉，简单点说就是工作时间+休息时间。
该网页就实现了这两个功能，可以自定义工作时间与休息时间，且允许暂停。

先放张效果图：

效果演示：戳我进入演示
解释一下，session length表示工作时长，break length表示休息时长，若要看div填充效果则建议将session length改成1来观看，效果比较明显。

下面附上代码，里面关键部分有较详细的注释，可以直接粘贴拿去直接运行的。

html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>PomodoroClock</title><link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link href="https://fonts.googleapis.com/css?family=Bitter|Sedgwick+Ave+Display" rel="stylesheet"><link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body><h1>Yinyou PomodoroClock</h1><div class="main"><div class="control"><div class="break"><p>BREAK LENGTH</p><i class="fa fa-minus-square-o" aria-hidden="true" id="break-minus"></i><span id="break-length">5</span><i class="fa fa-plus-square-o" aria-hidden="true" id="break-plus"></i></div><div class="length"><p>SESSION LENGTH</p><i class="fa fa-minus-square-o" aria-hidden="true" id="session-minus"></i><span id="session-length">25</span><i class="fa fa-plus-square-o" aria-hidden="true" id="session-plus"></i></div></div><div class="clock"><h2 id="show-title">Session</h2><h2 id="show-time">25:00</h2><span id="per"></span></div></div><script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/clock.js"></script>
</body>
</html>

css

*{margin: 0;padding: 0;
}
html,body{height: 100%;width: 100%;background-color: #cb4042;overflow: hidden;
}
h1{text-align: center;margin-top: 5%;color: #fff;font-family: 'Sedgwick Ave Display', cursive;
}.main{margin-top: 5%;position: relative;left: 50%;transform: translateX(-50%);width: 100%;height: 70%;text-align: center;
}.control{width: 100%;display: flex;text-align: center;justify-content: center;
}.break{display: inline;padding: 0 30px;
}
.length{display: inline;padding: 0 30px;
}
span{font-size: 2em;color: #fff;font-family: 'Bitter', serif;
}
.fa{font-size: 1.4em;color: #fff;cursor: pointer;margin: 0 10px;
}.control p{color: #b5caa0;
}.clock{width: 300px;height: 300px;border-radius: 50%;border:4px solid #a8d8b9;text-align: center;position: relative;left: 50%;transform: translateX(-50%);margin-top: 30px;cursor: pointer;z-index: 20;overflow: hidden;
}.clock:before{content: '';position: absolute;border:4px solid #cb4042;border-radius: 50%;top: 0;left: 0;right: 0;bottom: 0;
}.clock h2{font-family: 'Bitter', serif;font-size: 2.5em;margin-top: 80px;color: #fff;
}#per{margin: 0;position: absolute;bottom: 0;right: 0;left: 0;height: 0%;width: 100%;background-color: #b5caa0; /* background-color: #3f2b36; */z-index: -1;
}

$(document).ready(function(){var session = 25;       //这个是默认工作时间，用在设置那儿显示的，这里以分钟为单位，且超过60也是分钟var breaklength = 5;            //设置break时长——休息时长,细节同sessionvar flag = 1;           //设置工作状态，1是工作的暂停，2是正在休息的暂停，3是在工作中，4是休息中var sec = session*60;   //用来记录变化中的时间，单位为秒var percent = 0;    //记录背景颜色显示的高度，0-100，是百分比$("#break-minus").on("click",function(){if(flag !== 1 && flag !== 2){return;         //如果非暂停状态，点击无效}breaklength--;if(breaklength < 1){breaklength = 1;}$("#break-length").html(breaklength);if(flag === 2){//如果是休息的暂停，一旦改了，就又对sec产生了修改sec = breaklength*60;}showHMS(breaklength,2);});$("#break-plus").on("click",function(){if(flag !== 1 && flag !== 2){return;         //如果非暂停状态，点击无效}breaklength++;$("#break-length").html(breaklength);if(flag === 2){//如果是休息的暂停，一旦改了，就又对sec产生了修改sec = breaklength*60;}showHMS(breaklength,2);});$("#session-minus").on("click",function(){if(flag !== 1 && flag !== 2){return;         //如果非暂停状态，点击无效}session--;if(session < 1){session = 1;}$("#session-length").html(session);if(flag === 1){//如果是工作的暂停，一旦改了，就又对sec产生了修改sec = session*60;}showHMS(session,1);});$("#session-plus").on("click",function(){if(flag !== 1 && flag !== 2){return;         //如果非暂停状态，点击无效}session++;$("#session-length").html(session);if(flag === 1){//如果是工作的暂停，一旦改了，就又对sec产生了修改sec = session*60;}showHMS(session,1);});//在时钟上显示时分秒，传两个参数，一个是分钟，一个是状态。//如果在工作的暂停中，修改休息的时长，不改变时钟上的显示，state有两个取值，取1时表示修改工作时长，取2表示修改休息时长var showHMS = function(min,state){if(state  !== flag){return;         //如果不是在对应的暂停状态，就不改变时钟上显示的值}var show = "";if(min >= 60){show += parseInt(min/60)+":";min = min%60;}if(min<10){show+="0";}show+=min+":00";$("#show-time").html(show);};//开始后时间的变化,参数是剩下的秒数function timeChange(){var temp = sec;if(flag === 1 || flag === 2){//如果是暂停中，就不变时间return;}if(sec === 0){if(flag === 3){flag = 4;sec = breaklength*60;$("#show-title").html("Break");}else{flag = 3;sec = session*60;$("#show-title").html("Session");}}var showHMS = "";if(temp>=3600){showHMS+=parseInt(second/360)+":";temp = temp%360;}if(temp<70){showHMS+="0";}showHMS+=parseInt(temp/60)+":";temp = temp%60;if(temp<10){showHMS+="0";}showHMS+=temp;//console.log(showHMS);$("#show-time").html(showHMS);if(flag === 3){//工作中$("#per").css('background-color','#b5caa0');if(sec === 0){percent = 100;}else{percent = (session*60-sec)/session/60*100;}$("#per").css('height',percent+'%');}if(flag === 4){//休息中$("#per").css('background-color',"#3f2b36");if(sec === 0){percent = 100;}else{percent = (breaklength*60-sec)/breaklength/60*100;}$("#per").css('height',percent+'%');}sec--;setTimeout(timeChange,1000);};//时钟点击事件——开始与暂停的转换，及开始后时间的变化$(".clock").on("click",function(){if(flag === 1){flag = 3;}else if(flag === 3){flag = 1;}else if(flag === 2){flag = 4;}else if(flag === 4){flag = 2;}//console.log(sec);timeChange();});});

欢迎大家加入QQ群一起交流讨论，「吟游」程序人生——YinyouPoet

网页版番茄时钟的制作——Pomodoro Clock相关推荐

制作网页版电子时钟特效
可以加我QQ1975728171代做一.语言和环境 A.实现语言 JavaScript B.环境要求 Dreamweaver.WebStorm.Sublime任选其一二.功能要求利用JavaSc ...
网页版时钟动画效果 html模板
即时时间展示,HTML模板,网页版时钟动画首先看图:在线演示然后看>>> <!doctype html> <html> <head> < ...
飞机大战HTML5游戏源码，基于Canvas制作的网页版飞机大战游戏+飞机大战手机端
简介: 飞机大战HTML5游戏源码是一款基于Canvas制作的网页版飞机大战游戏,画质精美的飞机大战手机端游戏源码网盘下载地址: http://kekewangLuo.net/W1S2LQcqAT2 ...
微信群控系统制作系列一——java模拟登录网页版微信
PS:很多人咨询我怎么做手机群控系统,因此我开了个制作群控系统的系列,准备分五期讲解群控系统的制作.前两篇是基础内容. 今天做个简单的java模拟登录网页版微信. 既然要做模拟登录,那么我们一定要了解 ...
Python3.6-Flask：制作一个语音对话问答机器人系统（网页版）
首先,本项目分为制作语音机器人后台部分和利用flask搭建网页部分. 制作语音机器人: 本系统的功能有:与图灵机器人进行对话:设置闹钟(计时器):播放本地音乐:机器写古诗: (1)与图灵机器人对话的部 ...
教程：简单几步制作出酷炫网页版简历
为你的求职加个分:手把手教你制作酷炫的简历网页又到了一年之中金秋招聘旺季.在求职时,一份精致的网页版简历能为自己加分不少,帮你全面地展示自己,在相似度较高的简历模板中脱颖而出,给面试官留下深刻的 ...
芜湖~FILAgiao小设计：系统强提醒番茄时钟（简易电脑版）
最近视力一直低迷去年准备法考和联考之后视力就一直不行我很需要一个:(小声giaogiao) 电脑版强提醒的番茄时钟了! 代码没有交互界面,主要是我喜欢simple的,同时,一个优美的UI费时费 ...
使用reveal.js制作精美的网页版PPT
前言最近在做季度总结和技术分享,所以需要做个PPT, 来回顾这半年来的技术贡献. 但苦于mac上运行PPT那感人的流畅度, 成功的激起了笔者的强迫症, 所以索性想办法通过技术的手段来做个网页版PPT ...
编程语言十二生肖查询网页版制作（php）
编程语言十二生肖查询网页版制作(php) 今天无聊做了一个十二生肖查询器: 预览网址效果:http://hongxing01.hktd02u.me48.com/03Sxcx 源代码下载:http:// ...

网页版番茄时钟的制作——Pomodoro Clock

网页版番茄时钟的制作——Pomodoro Clock相关推荐

最新文章

热门文章