运动小插件（有氧运动）

作为一个热爱运动的程序员，自然而然地会把运动和程序联系在一起。最近发现有一套有氧运动动作很不错，奈何没有一个好的辅助提示工具，于是乎就想到自己写一个，很简单：动作共十组，每运动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

 

最终效果就是：音乐响起开始运动，音乐停止就休息。超棒的！！！

 

posted @ 2017-02-12 10:10  ChickenTang  阅读(376)  评论(0)  编辑  收藏  举报