按下按钮重新开始倒计时答案

【问题标题】：Restart countdown by button press按下按钮重新开始倒计时
【发布时间】：2018-08-05 17:29:07
【问题描述】：

我有一个倒计时的计时器，除非刷新页面，否则我无法重置它。我希望在按下按钮时重置计时器，但是我无法弄清楚或找到可以帮助我执行此操作的代码。

这是我控制器中的代码

Session["Rem_Time"] = null;
if (Session["Rem_Time"] == null)
{
    Session["Rem_Time"] = DateTime.Now.AddMinutes(1).ToString("dd-MM-yyyy h:mm:ss tt");
}
ViewBag.Rem_Time = Session["Rem_Time"];

return View();

这是视图中的代码：

<div class="float-left">
    <h2 id="timecountdown"></h2>
</div>
<input type="button" value="Reset" onclick="?" />

这是计时器（JS）的脚本：

var dt = '@ViewBag.Rem_Time';
var dateAr = dt.split('-')
var newDate = dateAr[1] + '/' + dateAr[0] + '/' + dateAr[2];

var end = new Date(dateAr[1] + '/' + dateAr[0] + '/' + dateAr[2]);

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

function showRemaining() {
    var now = new Date();
    var distance = end - now;
    if (distance < 0) {
        clearInterval(timer);
        alert('Countdown Complete!');
        document.getElementById('timecountdown').innerHTML = 'Countdown Ended!';
        return;
    }
    var days = Math.floor(distance / _day);
    var _hours = Math.floor((distance % _day) / _hour);
    var _minutes = Math.floor((distance % _hour) / _minute);
    var _seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('timecountdown').innerHTML = ' Hrs: ' + _hours;
    document.getElementById('timecountdown').innerHTML += ' Mins: ' + _minutes;
    document.getElementById('timecountdown').innerHTML += ' Secs: ' + _seconds;
}
timer = setInterval(showRemaining, 1000);

这里的任何帮助将不胜感激！

【问题讨论】：

创建另一个函数来重置您在其他方法中使用的相关值，并在按钮的onclick 上调用该方法（例如：onclick="clearTimer()"）如果要更新会话值，请创建ajax 调用来做到这一点
如果需要也可以clearInterval(timer)。

标签： javascript jquery asp.net asp.net-mvc

【解决方案1】：

您可以通过在单击按钮时注册事件并重置h2来做到这一点。

例子：

<div class="float-left">
    <h2 id="timecountdown"></h2>
</div>
<input type="button" value="Reset" onclick="reset_counter(5000)" />

现在您可以在脚本中添加类似...

function reset_counter(seconds) {
    // do something with the seconds/minutes/hours...
    document.getElementById("timecountdown").innerHTML = "whatever...";
}

即使查看您的代码，您也可能想要重置计时器而不是 h2（无论如何，您确实知道如何去做）。由于您的应用程序需要，我猜，从服务器的时间，你可能想通过使用 AJAX 检索它。

例子：

function updateTime() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("timecountdown").innerHTML = "";
            this.responseText;
       }
    };
    xhttp.open("GET", "http://myserver.com/foo.asp?time=", true);
    xhttp.send(); 
}

我希望这会有所帮助。

【讨论】：