Contraction Timer JS

Contraction.html

@model IEnumerable<DigiDou.Web.Models.Contraction>

@{
    ViewBag.Title = "Index";
}

<h2>Contraction Timer</h2>
<div>
    <div align="center"><button class="stopwatch hvr-pulse" value="stopped">00:00:00</button></div>
    <div class="col-md-offset-4">
    </div>
    
    <table class="table panel results hidden"></table>
</div>
<div align="center">
    <h1>Results Table</h1>
    <table class="table panel">
        <tr>
            <th>
                Contraction Duration
            </th>
            <th>Time between measured contractions</th>
            <th></th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Length.Minutes) Minutes @Html.DisplayFor(modelItem => item.Length.Seconds) Seconds
                </td>
                <td>@Html.DisplayFor(modelItem => item.TimeSinceLast.Hours) Hours @Html.DisplayFor(modelItem => item.TimeSinceLast.Minutes) Minutes @Html.DisplayFor(modelItem => item.TimeSinceLast.Seconds) Seconds</td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                </td>
            </tr>
        }

    </table>
</div>
@section scripts
{
    <script src="~/Scripts/Custom.js"></script>
    <script>
        $('.stopwatch').click(function () {
            var timer = $(this);
            if (timer.prop('value') == 'stopped') {
                Stopwatch.start();
                timer.prop('value', 'started');
                $.ajax({
                    method: "POST",
                    url: "/ContractionsMvc/StartTime",
                })
            }
            else {
                Stopwatch.restart();
                Stopwatch.stop();
                timer.prop('value', 'stopped');
                $.ajax({
                    method: "POST",
                    url: "/ContractionsMvc/EndTime",
                })
            }
        });

    </script>

Stopwatch.css

.stopwatch {
    font-size: 60px;
    text-align: left;
    width:300px;
    padding-left: 1%;
    padding-bottom: 8%;
    padding-top: 8%;
    padding-right: 2%;
    border-radius: 100%;
    border: 10px solid;
    overflow: hidden;
    background-color: darkgray;
    opacity: .5;
}

    .stopwatch:hover {
        background: #FF8080;
    }

@keyframes hvr-pulse {
    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    75% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

.hvr-pulse {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
}

    .hvr-pulse:active, .hvr-pulse:hover {
        -webkit-animation-name: hvr-pulse;
        animation-name: hvr-pulse;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

Stopwatch.js

var Stopwatch = (function () {
    var s;
    return {
        settings: {
            stop: 1,
            sw: document.querySelectorAll(".stopwatch")[0],
            results: document.querySelectorAll(".results")[0],
            mills: 0,
            secs: 0,
            mins: 0,
            i: 1,
            times: ["00:00:00"],
            clearButton: "<a href=\"#\" class=\"button\" onClick=\"Stopwatch.clear();\">Clear</a>"
        },
        init: function () {
            s = this.settings;
            setInterval(this.timer, 1);
        },
        clear: function () {
            s.i = 1,
            s.times = ["00:00:00"],
            s.results.innerHTML = s.clearButton;
        },

        lap: function () {
            if (s.i === 1) {
                s.results.innerHTML = s.clearButton;
            }
            s.times.push(("0" + s.mins).slice(-2) + ":"
                                 + ("0" + s.secs).slice(-2) + ":"
                                 + ("0" + s.mills).slice(-2));
            var diffTime = ("0" + Math.floor(s.times[s.i].split(":")[0]
                                     - s.times[s.i - 1].split(":")[0])).slice(-2)
                                     + ":"
                                     + ("0" + Math.floor(s.times[s.i].split(":")[1]
                                     - s.times[s.i - 1].split(":")[1])).slice(-2)
                                     + ":"
                                     + ("0" + (s.times[s.i].split(":")[2]
                                     - s.times[s.i - 1].split(":")[2])).slice(-2);
            s.results.innerHTML = s.results.innerHTML + "<tr><td>"
                                                    + s.times[s.i] + "</td><td>"
                                                    + diffTime + "</td></tr>";
            s.i++;
        },
        restart: function () {
            s.mills = 0,
            s.secs = 0,
            s.mins = 0;
            this.start();
        },
        start: function () {
            s.stop = 0;
        },
        stop: function () {
            s.stop = 1;
        },
        timer: function () {
            if (s.stop === 0) {
                if (s.mills === 100) {
                    s.secs++;
                    s.mills = 0;
                }
                if (s.secs === 60) {
                    s.mins++;
                    s.secs = 0;
                }
                s.sw.innerHTML = ("0" + s.mins).slice(-2) + ":"
                                             + ("0" + s.secs).slice(-2) + ":"
                                             + ("0" + s.mills).slice(-2);
                s.mills++;
            }
        }
    };
})();
Stopwatch.init();