今天读书学到个番茄时间，想用来治懒癌，但是不想下app，写了个html, 在手机上打开，横屏，是一样的计时效果。
学艺不精，方法很笨，问题很多，勉强能用。
因为很简陋，没有调，如果不按顺序按键，可能崩溃。
1.先选时间，30分钟或者25分钟。
2.选好时间，按开始键。
3.效果：
4.时间到：
5.番茄时间每小次休息5分钟。每4次休息半小时，就叫大次吧，所以1,2,3,4是记录次数的。旁边的两个圈是记录，左边，记录大次。右边，记录小次。
6.按下面的按钮，就可以5分钟休息啦！
7.因为这些按钮不小心点错了就乱了，所以在控制台有记录。
才知道 <input type="file">它返回路径的方法很复杂，这是返回的方法：
https://www.cnblogs.com/jamesping/archive/2011/07/26/2031016.html
本来想用更好听的网络音频，但是找不到。
懒癌，拖延症，我要打败你们！！ヾ(◍°∇°◍)ﾉﾞ
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>番茄时间</title> <style type="text/css"> .relax{ padding: 20px; margin: 80px 20px 5px; border-radius: 5px; border: deeppink 1px solid; background-color: lightblue; color:black; text-align: center; font: 15px "arial narrow"; } .begin{ padding: 30px; margin: 30px; border-radius: 7px; border:lightpink 1px solid; background-color: deeppink; color: ghostwhite; text-align: center; font: 20px "arial narrow"; } .re{ display: inline-block; height: 30px; width: 40px; background-color: lightblue; text-align: center; line-height: 30px; border: black 1px solid; border-radius: 7px; } .inner{ margin-left: -42px; } .over{ width: 150px; height: 50px; border: black 1px solid; margin: 35px 300px 0; border-radius: 20px; text-align: center; line-height: 50px; background-color: white; } .active{ background-color: greenyellow; color: red; } .wamp{ width: 800px; height: 400px; background-color: #f9dddd; margin: 90px auto; text-align: center; border: #000000 1px solid; border-radius: 30px; position: relative; } .p{ display: inline-block; position: absolute; color: steelblue; padding: 30px; font-size: 60px; border-radius: 100px; border: black 1px solid; } .nei{ left: 78px; top: 141px; } .wai{ left: 644px; top: 141px; } .text{ font-size: 13px; position: absolute; left: 200px; } input{ margin: 40px 0px 10px; } </style> </head> <body> <audio id="audio"> <source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mpeg"> <source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mpeg"> </audio> <div class="wamp"> <button id="t" name="t" type="button" value="25" class="relax">25分钟</button> <button id="e" name="t" type="button" value="30" class="relax">30分钟</button> <button id="bt" type="button" class="begin" >开 始</button> <div class="inner"> <span id="s1" class="re">1</span> <span id="s2" class="re">2</span> <span id="s3" class="re">3</span> <span id="s4" class="re">4</span> </div> <div id="ov" class="over">结束</div> <div> <p id="p1" class="p wai">0</p> <p id="p2" class="p nei">0</p> </div> </div> <script type="text/javascript"> var d = new Date() var count = 0; var val; var click=0; var myaudio = document.getElementById("audio"); var times = document.getElementsByName("t"); var spans = document.getElementsByTagName("span"); var begin = document.getElementById("bt"); var over= document.getElementById("ov"); function warning(){ console.log('第'+(count+1)+'个番茄时间结束！'); myaudio.play(); //播放音乐 over.className = "over active"; over.innerHTML = "第"+(count+1)+"次时间到了" begin.innerHTML = "开始"; }; window.onload = function ok(){ for(var i=0; i<2;i++){ times[i].onclick = function(){ val = this.value ; this.className = "relax active"; console.log("am ready!"+val+"秒"); } }; document.getElementById("bt").addEventListener("click",function(){ console.log("lets go! "+val+"秒"); begin.className = "begin active"; begin.innerText = "进行中..."; var timenow = d.getDate(); var timeover = val*60000 ; // setTimeout("warning()", timeover); // setTimeout("alert('时间到！')", timeover); spans[count].className = "re active"; }); document.getElementById("ov").addEventListener("click",function(){ myaudio.pause(); //暂停 myaudio.load(); spans[count].className = "re"; if(val == 25){ document.getElementById("t").className="relax"; }else{ document.getElementById("e").className = "relax"; } count ++ ; console.log("好的我知道了"); this.className = "over "; begin.className = "begin"; over.innerHTML = "结束"; if (count == 4 ){ count = 0 ; click++; } document.getElementById("p1").innerText = count; document.getElementById("p2").innerHTML = click; console.log('当前:'+count); }); } </script> </body> </html>