Question

我的网站上有一个秒表，我想在单击停止按钮后获取结果并将其转换为秒。

是否有可能仅使用javascript或jquery计算给定时间并将其转换为秒？

转换后，我想将值发送到我的数据库中

我可以在控制台中看到结果

var ss = document.getElementsByClassName('stopwatch');

[].forEach.call(ss, function (s) {
    var currentTimer = 0,
        interval = 0,
        lastUpdateTime = new Date().getTime(),
        start = s.querySelector('button.start'),
        stop = s.querySelector('button.stop'),
        reset = s.querySelector('button.reset'),
        mins = s.querySelector('span.minutes'),
        secs = s.querySelector('span.seconds'),
        cents = s.querySelector('span.centiseconds');

    start.addEventListener('click', startTimer);
    stop.addEventListener('click', stopTimer);
    reset.addEventListener('click', resetTimer);

    function pad (n) {
        return ('00' + n).substr(-2);
    }

    function update () {
        var now = new Date().getTime(),
            dt = now - lastUpdateTime;

        currentTimer += dt;

        var time = new Date(currentTimer);

        mins.innerHTML = pad(time.getMinutes());
        secs.innerHTML = pad(time.getSeconds());
        cents.innerHTML = pad(Math.floor(time.getMilliseconds() / 10));

        lastUpdateTime = now;
    }

    function startTimer () {
        if (!interval) {
            lastUpdateTime = new Date().getTime();
            interval = setInterval(update, 1);
        }
    }

    function stopTimer () {
        clearInterval(interval);
        interval = 0;
    }

    function resetTimer () {
        stopTimer();

        currentTimer = 0;

        mins.innerHTML = secs.innerHTML = cents.innerHTML = pad(0);

    }
});


$(document).ready(function(){
    $(".stop").click(function(){
        var m = $('#min').html();
        var s = $('#sec').html();
        var ms = $('#msec').html();
        console.log(m,s,ms);
        
    });
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Stopwatch</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<div class="stopwatch">
    <div class="controls">
        <button class="start">Start</button>
        <button id="stp" class="stop">Stop</button>
        <button class="reset">Reset</button>
    </div>
    <div class="display">
        <span id="min" class="minutes" value="">00</span><span id="sec" class="seconds" value="">00</span><span id="msec" class="centiseconds" value="">00</span>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="watch/stopwatch.js"></script>

<script>

</script>
</body>
</html>

Answer 1

如果我对您的理解正确，那么有两个问题： 1）如何计算时间并显示时间？而且您已经以秒为单位计算了时间，因此要正确显示它，只需将HTML更改为：

<span>Min: </span><span id="min" class="minutes" value="">00</span><span> Sec: </span><span id="sec" class="seconds" value="">00</span><span> Msec: </span><span id="msec" class="centiseconds" value="">00</span>

2）要将数据从js传递到“数据库”（假定您实际上是指服务器端），可以使用ajax（https://api.jquery.com/category/ajax/） Pass variable string from javascript to php using ajax

Answer 2

使用第二个函数（一个记录值的函数），您可以执行一些简单的数学运算来获得总秒数：

$(document).ready(function(){
    $(".stop").click(function(){
        var m = $('#min').html();
        var s = $('#sec').html();
        var ms = $('#msec').html();
        console.log(m,s,ms);
        var total = (parseInt(m) * 60) + parseInt(s);
        console.log(total + "." + ms);
    });
});

将秒表时间转换为秒

2 个答案: