番茄时钟代码,JS代码库,德仔网

代码语言
代码分类
【JS】番茄时钟
作者:倪闯 / 发布于2015/4/2/ 673

	<!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>
	 
	 
	 <input id="start" type="button" value="开始" onclick="control('start')" />
	 <input id="stop" type="button" value="休息" onclick="control('stop')" />
	 
	 <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>
	 
	 本日完成个数：<span id="count"></span>
	 
	 </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>
试试其它关键字
　番茄时钟　
同语言下
可能有用的
倪闯贡献的其它代码(4)