- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>番茄时钟</title>
- <style>
- #body {
- display: block;
- width: 600px;
- margin: 0 auto;
- text-align: center;
- color: #fff;
- background-color: #FF4500;
- border: 2px solid #FF4500;
- box-shadow: 10px 10px 5px #888888;
- border-radius: 96px;
- -moz-border-radius: 96px;
- -webkit-border-radius: 96px;
- -o-border-radius: 96px;
- background-color: #FF4500;
- }
- #timeP {
- padding-bottom: 20px;
- border-bottom: 1px solid #FF4500;
- font: normal 30px "Helvetica Neue", sans-serif;
- }
- #setDetail {
- display: block
- }
- #stop {
- margin-left: 10px;
- }
- </style>
- </head>
- <body>
- <div id="body">
- <p id="timeP">
- 剩余时间:<span id="minute"></span>:<span id="seconds"></span>
- </p>
- <p>
- <input id="start" type="button" value="开始" onclick="control('start')" />
- <input id="stop" type="button" value="休息" onclick="control('stop')" />
- </p>
- <div id="setDetail">
- 工作时长(分钟):<input type="text" value="" id="workTimeSet">
- 休息时长(分钟):<input type="text" value="" id="restTimeSet"> <input
- id="save" type="button" value="保存" onclick="location.reload()">
- </div>
- <audio controls="controls" autoplay="autoplay" id="audio">
- </audio>
- <p>
- 本日完成个数:<span id="count"></span>
- </p>
- </div>
- </body>
- <script type="text/javascript">
- var workTime = '25';
- var restTime = '5';
- //var count = document.cookie = '0;expires=85400';
- // 查找配置时长
- var workTimeSet = document.getElementById('workTimeSet').value;
- var restTimeSet = document.getElementById('restTimeSet').value;
- if (workTimeSet == '') {
- workTimeSet = workTime;
- }
- if (restTimeSet == '') {
- restTimeSet = restTime;
- }
- document.getElementById("minute").innerHTML = workTimeSet;
- document.getElementById("seconds").innerHTML = '00';
- //document.getElementById("count").innerHTML = document.cookie;
- // 点击开始或停止的控制
- function control(method) {
- var s = document.getElementById("seconds").innerHTML;
- var m = document.getElementById("minute").innerHTML;
- if (method == 'start') {
- if (m == '0') {
- var timeLong = 0;
- } else {
- var timeLong = workTimeSet;
- }
- } else if (method == 'stop') {
- var timeLong = '0';
- }
- if (s == '00' && m == timeLong) {
- countDown(method);
- } else {
- alert("请继续坚持");
- }
- }
- function countDown(method) {
- if (method == 'stop') {
- document.getElementById("minute").innerHTML = restTimeSet;
- } else if (method == 'start') {
- document.getElementById("minute").innerHTML = workTimeSet;
- }
- var s = document.getElementById("seconds").innerHTML;
- var m = document.getElementById("minute").innerHTML;
- // 如果没有完成时间则不能够停止 按钮置为不可点击状态
- if (s == '00') {
- s = 60;
- m -= 1;
- }
- s -= 1;
- s = checkTime(s);
- if (m == '0' && s == '00') {
- document.getElementById("minute").innerHTML = m;
- document.getElementById("seconds").innerHTML = s;
- document.getElementById('audio').innerHTML = '<source id="audio" src="phone.ogg" type="audio/ogg" />';
- alert("完成一个番茄时间");
- return false;
- }
- document.getElementById("minute").innerHTML = m;
- document.getElementById("seconds").innerHTML = s;
- setTimeout("countDown()", 1000);
- }
- function checkTime(i) {
- if (i < 10) {
- i = "0" + i;
- }
- return i
- }
- </script>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/1304201512224.html
来源: http://www.codesnippet.cn/detail/1304201512224.html