Question

我的JavaScript计时器存在很大问题。一切正常，除了1个按钮：停止！我无法弄清楚如何阻止我的计数器上的所有东西（比如重置每个输入和计数器）。任何想法如何解决这个问题？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Feladat 5</title>
</head>
<body>

<form>
    <label>Indulás: </label><input type="number" id="n_start" placeholder="1000"/> <label> (4 számjegyű
    szám)</label><br /><br />
    <label>Megállás: </label><input type="number" id="n_end" placeholder="1008"/> <label> (4 számjegyű szám)</label><br/><br />
    <label>Számolás léptei: </label><input type="number" id="n_count" placeholder="1"/> <br /><br />
    <label>Időközönti számolás: </label><input type="number" id="n_timer" placeholder="1"/> <label> (másodpercben)</label><br /><br />
</form>
<label>Számláló: </label><span id="counter">0</span> <br /><br />
<button id="first" type="button" onclick="count()">Start</button>
<button id="pause" type="button" style="display:none;" onclick="show_resume()">Pause</button>
<button id="resume" type="button" style="display:none;" onclick="show_pause()">Resume</button>
<button id="stop" type="button" name="stop">Stop</button>

<script>
    function counterLoop(callback, delay)
    {
        var id
                ,start
                ,remaining = delay;
        this.pause = function()
        {
            window.clearTimeout(id);
            remaining -= new Date() - start;
        };

        var resume = function()
        {
            start = new Date();
            id = window.setTimeout(function()
            {
                remaining = delay;
                resume();
                callback();
            }, remaining);
        };
        this.resume = resume;
        this.resume();
    }

    function count()
    {
        var startValue = document.getElementById("n_start").value;
        var endValue = document.getElementById("n_end").value;
        var countValue = document.getElementById("n_count").value;
        var timerValue = document.getElementById("n_timer").value;
        var count = startValue;
        if (startValue == "" || endValue == "" || countValue == "" || timerValue == "")
        {
            alert("Minden mező kitöltése kötelező!");
        }
        else
            {
            if (startValue < 999 || endValue < 999)
            {
                alert("Legalább 4 számjegyű kell legyen az érték!")
            }

            else
                {
                var math_check = endValue - startValue;
                if (math_check % countValue != 0 )
                {
                    alert("A számlálás léptei túl lépnék a megállást.");
                }
                else
                    {
                    var counter = new counterLoop(function ()
                    {
                        if (startValue <= endValue)
                        {
                            if (countValue == 1)
                            {
                                ++count;
                                if (count == endValue )
                                {
                                    counter.pause();
                                    document.getElementById('pause').style.display = 'none';
                                    document.getElementById('resume').style.display = 'none';
                                    document.getElementById('first').style.display = 'inline';
                                    counter = 0;
                                }
                            }
                            else
                            {
                                count = +countValue + +count;
                                if (count == endValue)
                                {
                                    counter.pause();
                                    document.getElementById('pause').style.display = 'none';
                                    document.getElementById('resume').style.display = 'none';
                                    document.getElementById('first').style.display = 'inline';
                                    counter = 0;
                                }
                            }
                        }

                        document.getElementById('counter').innerHTML = count;
                    }, timerValue * 1000);
                    document.getElementById('pause').addEventListener('click', function () {
                        counter.pause()
                    }, false);
                    document.getElementById('resume').addEventListener('click', function () {
                        counter.resume()
                    }, false);

                    document.getElementById('pause').style.display = 'inline';
                    document.getElementById('first').style.display = 'none';
                }
            }
            }
    };

    function show_resume()
    {
        document.getElementById('resume').style.display = 'inline';
        document.getElementById('pause').style.display = 'none';
    }

    function show_pause()
    {
        document.getElementById('resume').style.display = 'none';
        document.getElementById('pause').style.display = 'inline';
    }
</script>
</body>
</html>

Answer 1

你想停止那个计时器并恢复或只是停止并重置所有字段吗？

Javascript计时器，带停止按钮

1 个答案: