简易番茄时钟web实现

番茄时钟WEB实现

工作都会存在效率问题，小番茄25分钟专注后休息的理论很好的帮助在职人员以及在校学生规划自己一天的生活。
可以利用基本的web知识开发一个简单的25分钟倒计时并提示的小网页。
实现结果：

代码：

<!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"><title>TomatoClock</title>
</head>
<body><!-- <input type="text" id="hour" value="0">Hour -->Min:<input type="text" id="min" value="25">Sec:<input type="text" id="sec" value="0"><br/><input type="button" id="btnStart" value="Start"><input type="button" id="btnPause" value="Pause"><input type="button" id="btnCancel" value="Cancel"><script>// var n=0;var btnStart=document.getElementById("btnStart");var btnPause=document.getElementById("btnPause");var btnCancel=document.getElementById("btnCancel");var min=document.querySelectorAll("input")[0];var is_cal=false;// console.log(min-1);var sec=document.querySelectorAll("input")[1];var timer;btnStart.onclick=count;btnPause.onclick=pause;btnCancel.onclick=Cancel;var box=document.getElementsByTagName("div")[0];var audio= new Audio("E:/CloudMusic/童话镇.mp3");function count(){is_cal=true;   }function pause(){is_cal=false;}function Cancel(){is_cal=false;min.value=25;sec.value=0;audio.pause();}timer=setInterval(function(){// alert("ddd");if(is_cal){if(sec.value>=1 && min.value>=0){sec.value--}else if(min.value>0){sec.value=59;min.value--}else{is_cal=false;sec.value=min.value=0;audio.play();}}else{min.value=min.value;}},1000);</script>
</body>
</html>

用之前可以吧Audio里面的路径选择成25分钟计时完成后自己想用的音乐。

简易番茄时钟web实现相关推荐

芜湖~FILAgiao小设计：系统强提醒番茄时钟（简易电脑版）
最近视力一直低迷去年准备法考和联考之后视力就一直不行我很需要一个:(小声giaogiao) 电脑版强提醒的番茄时钟了! 代码没有交互界面,主要是我喜欢simple的,同时,一个优美的UI费时费 ...
视频教程-微信小程序开发实战之番茄时钟开发-微信开发
微信小程序开发实战之番茄时钟开发 4年web前后端开发经验,熟悉PHP,Python后端技术,熟悉基于Lnmp环境的项目开发和部署,擅长Yii,ThinkPHP,CI,Django,Flask等国内外 ...
python动态时钟代码_python实现简易动态时钟
本文实例为大家分享了python实现简易动态时钟的具体代码,供大家参考,具体内容如下 from turtle import * from datetime import * #移动到指定位置 def ...
一个简易实用的web权限管理模块的应用与实现
本文介绍一个简易实用的web权限管理模块的应用与实现. 先介绍数据模型和应用界面,后继对实现细节做选择性阐述. 数据表关系如下: 该图标明了登陆用户.角色.部门(机构).用户组.角色和模块功能之间的关 ...
python web server_Python实现简易版的Web服务器(推荐)
下面给大家介绍python实现简易版的web服务器,具体内容详情大家通过本文学习吧! 1.请自行了解HTTP协议 2.创建Socket服务,监听指定IP和端口 3.以阻塞方式等待客户端连接 4.读取客 ...
简易有WEB文件服务器,Python实现简易版的Web服务器(推荐).pdf
Python实实现现简简易易版版的的Web服服务务器器(推推荐荐) 下面给大家介绍python实现简易版的web服务器,具体内容详情大家通过本文学习 ! 1.请自行了解HTTP协议 /article/ ...
简易数字时钟软件详细制作过程
这是我自己用VS2010制作的简易数字时钟小软件,在制作过程中收获知识不少,希望和初学MFC编程的朋友分享一下. 一.其功能有一下三点: 1.打开软件后,其程序自动获取当前电脑系统的日期.时间和周次, ...
动态加载子节点_简易数据分析 10 | Web Scraper 翻页—抓取「滚动加载」类型网页...
这是简易数据分析系列的第 10 篇文章. 原文首发于博客园:简易数据分析 10. 友情提示:这一篇文章的内容较多,信息量比较大,希望大家学习的时候多看几遍. 我们在刷朋友圈刷微博的时候,总会强调一个『 ...
div自动滚动_简易数据分析 10 | Web Scraper 翻页——抓取「滚动加载」类型网页
这是简易数据分析系列的第 10 篇文章. 原文首发于博客园:简易数据分析 10. 友情提示:这一篇文章的内容较多,信息量比较大,希望大家学习的时候多看几遍. 我们在刷朋友圈刷微博的时候,总会强调一个『 ...

简易番茄时钟web实现

番茄时钟WEB实现

简易番茄时钟web实现相关推荐

最新文章

热门文章