作为一个热爱运动的程序员，自然而然地会把运动和程序联系在一起。最近发现有一套有氧运动动作很不错，奈何没有一个好的辅助提示工具，于是乎就想到自己写一个，很简单：动作共十组，每运动40秒休息20秒，持续10分钟。不多说，直接上代码：
Html代码：
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>有氧运动</title> <style> html,body {font-size: 62.5%;} .title {height: 160px;text-align: center;font-size: 6rem;line-height: 160px;} .btns {text-align: center;height: 80px;line-height: 80px;} .btns button {padding: 1rem 4rem;font-size: 2rem;border-radius: 0.4rem; font-weight: bold; display: inline-block;margin-bottom: 0;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle; -ms-touch-action: manipulation;touch-action: manipulation;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-image: none;border: 1px solid transparent;border-radius: 4px;color:#666;} .btns .success{ color: #fff ;background-color: #5cb85c;border-color: #4cae4c;} </style> </head> <body> <audio id="tloop"> <source src="MOTI,Nabiha%20-%20Turn%20Me%20Up%20-%20Jack%20Wins%20Remix.mp3" controls loop type="audio/mp3" /> </audio> <div id="zone" class="title"> <label id="begin">MOTI,Nabiha - Turn Me Up - Jack Wins Remix</label> <label id="end"></label> </div> <div class="btns"> <button class="success" onclick="doit()">开始</button> <button class="default" onclick="dopause()">停止</button> </div> </body> </html>
Js 代码：
function MusicLoop(tloop) { this.onOff = false; this.setStart = 0; this.setStop = 0; this.tloop = tloop; var that = this; MusicLoop.prototype.stop = function() { that.tloop.pause(); clearTimeout(that.setStop); that.setStart = setTimeout(that.start, 20000); } MusicLoop.prototype.start = function() { that.tloop.play(); clearTimeout(that.setStart); that.setStop = setTimeout(that.stop, 40000); } MusicLoop.prototype.destoryLoop = function(){ clearTimeout(that.setStart); clearTimeout(that.setStop); that.tloop.pause(); that.tloop.currentTime = 0; } } var tloop = document.getElementById("tloop"); var ml = new MusicLoop(tloop); var doit = function(){ if(ml.onOff) return false; ml.onOff = true; return ml.start(); } var dopause = function(){ ml.onOff = false; return ml.destoryLoop(); } tloop.addEventListener("ended",function(){ ml.tloop.currentTime = 0; ml.tloop.play(); })
最后是我个人觉得非常适合做运动听的歌曲：MOTI,Nabiha - Turn Me Up - Jack Wins Remix
最终效果就是：音乐响起开始运动，音乐停止就休息。超棒的！！！