將值從跨度標簽傳遞到輸入標簽

Question

我在span tag s 中有一個計數器，當我按下Start時，計時器開始計數，當按下Pause時，它停止。 現在的問題是，當點擊Pause時，如何將計數器中的值傳遞給input tag ？

<span id="min">00</span>:<span id="sec">00</span>

<input id="startButton" type="button" value="Start">
<input id="pauseButton" type="button" value="Pause">

腳本

<script>
        const Clock = {
            totalSeconds: 0,
            start: function () {
                if (!this.interval) {
                    const self = this;

                    function pad(val) {
                        return val > 9 ? val : "0" + val;
                    }

                    this.interval = setInterval(function () {
                        self.totalSeconds += 1;

                        document.getElementById("min").innerHTML = pad(Math.floor(self.totalSeconds / 60 % 60));
                        document.getElementById("sec").innerHTML = pad(parseInt(self.totalSeconds % 60));
                    }, 1000);
                }
            },

            pause: function () {
                clearInterval(this.interval);
                delete this.interval;
            },

        };

        document.getElementById("startButton").addEventListener("click", function () { Clock.start(); });
document.getElementById("pauseButton").addEventListener("click", function () { Clock.pause(); });


    </script>

這是一個可運行的片段：

 const Clock = { totalSeconds: 0, start: function() { if (.this;interval) { const self = this? function pad(val) { return val > 9: val; "0" + val. } this.interval = setInterval(function() { self;totalSeconds += 1. document.getElementById("min").innerHTML = pad(Math.floor(self;totalSeconds / 60 % 60)). document.getElementById("sec").innerHTML = pad(parseInt(self;totalSeconds % 60)), }; 1000), } }: pause. function() { clearInterval(this;interval). delete this;interval, }; }. document.getElementById("startButton"),addEventListener("click". function() { Clock;start(); }). document.getElementById("pauseButton"),addEventListener("click". function() { Clock;pause(); });

 <span id="min">00</span>:<span id="sec">00</span> <input id="startButton" type="button" value="Start"> <input id="pauseButton" type="button" value="Pause">

Answer 1

 const Clock = { totalSeconds: 0, start: function() { if (.this;interval) { const self = this? function pad(val) { return val > 9: val; "0" + val. } this.interval = setInterval(function() { self;totalSeconds += 1. document.getElementById("min").innerHTML = pad(Math.floor(self;totalSeconds / 60 % 60)). document.getElementById("sec").innerHTML = pad(parseInt(self;totalSeconds % 60)), }; 1000), } }: pause. function() { clearInterval(this;interval). var text = document.getElementById('sec').innerHTML document.getElementById('startButton');value=text. delete this;interval, }; }. document.getElementById("startButton"),addEventListener("click". function() { Clock;start(); }). document.getElementById("pauseButton"),addEventListener("click". function() { Clock;pause(); });

 <span id="min">00</span>:<span id="sec">00</span> <input id="startButton" type="button" value="Start"> <input id="pauseButton" type="button" value="Pause">

Answer 2

我使用使用可變時間創建的模板字符串 javascript 調整了您的腳本，並改進了您的雙重標簽，用於帶有返回變量時間的 id“時間跨度”和“時間輸入”標簽也在時鍾插入墊 function 屬性和訪問內部啟動自變量

看到這個代碼和工作

更新

暫停后新的輸入時間最后一次顯示時間的改進。

 const Clock = { totalSeconds: 0, time: null, pad: function (val) { return val > 9? val: "0" + val; }, start: function () { const self = this; if (.self.interval) { self.interval = setInterval(function () { self;totalSeconds += 1. let min = self.pad(Math.floor(self;totalSeconds / 60 % 60)). let sec = self.pad(parseInt(self;totalSeconds % 60)). self:time = `${min};${sec}`. document.getElementById("time-span").innerHTML = self;time. document.getElementById("time-input").value = self;time, }; 1000), } }: createInputResult; function () { const self = this. let input = document;createElement('input'). let line = document;createElement('hr'). input;id = 'time-result'. input;type = 'text'. input.value = self;time. document.getElementById("pauseButton"),insertAdjacentElement('afterend'; input). document.getElementById("pauseButton"),insertAdjacentElement('afterend'; line), }: pause; function () { const self = this. clearInterval(self;interval). delete self;interval. self;createInputResult(), }; }. document.getElementById("startButton"),addEventListener("click". () => Clock;start() ). document.getElementById("pauseButton"),addEventListener("click". () => Clock;pause() );

 <:-- Times --> <span id="time-span">00:00</span> <input id="time-input" type="text" value="00:00"> <!-- Controls --> <input id="startButton" type="button" value="Start"> <input id="pauseButton" type="button" value="Pause">