Question

我是Javascript的新手，并使用一些Asp.net控件创建了倒数计时器

Probelm是倒数计时器以隐藏字段中的给定时间开始，直至00:00:00，现在工作正常，但是当我刷新浏览器计时器重置并使用隐藏字段中给出的默认值再次启动时。

我搜索了我的问题，并使用localStorage获得了sollution但由于缺乏javascript知识而无法应用。而且我想格式化我的计时器时间01:03:40 1：3：40

这是我的代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        var Second = 60;
        var Hour, Minute, Time;
        var PreviousSelectedPage = '';

        function CountDown() {            
            var CurrentTime = Hour + ':' + Minute + ':' + Second;           
            if (CurrentTime == '00:00:00') {
                clearInterval(Time);               
            }
            document.getElementById('lblDuration').innerHTML = CurrentTime;
            Second--;
            if (Second == -1) {
                Second = 59;
                Minute--;
            }
            if (Minute == -1) {
                Minute = 59;
                Hour--;
            }
        }



        $(document).ready(function () {
            Hour = document.getElementById('<%=Hour.ClientID%>').value;
            Minute = document.getElementById('<%=Minute.ClientID%>').value;            
            Time = setInterval(function () { CountDown(); }, 1000);
        });
    </script>

和HTML

<div>
    <asp:HiddenField ID="Hour" runat="server" Value="3" />
    <asp:HiddenField ID="Minute" runat="server" Value="25" />
        <label id="lblDuration"></label>
    </div>

请有人帮助我吗？

Answer 1

希望这对你的两个问题都有所帮助。

为了在刷新时保存值，如果您对了解localStorage感到满意，我会查看有关该主题的W3 School's article。

实现这一目标的最简单方法是使用

localStorage.setItem("time", CurrentTime);   // Note that CurrentTime must be a string!

设置CurrentTime var。

后，在代码的每次迭代中

启动应用程序时，只需一个简单的if语句

if (localStorage.getItem("time") {
    CurrentTime = localStorage.getItem("time");
} else {
    // do what you are already doing to set default values
}

如果值不存在（或者您手动将值设置为localStorage.getItem），则{p}将返回null，

将正常工作。

（对于localStorage，您也可以使用null，并且可能会在最常见的示例中看到这一点）

[bracket notation]

对于您的格式问题，当转换为Number对象时，您的值将丢失前导零，但是当您将它们输出为字符串时，您可以使用自己的填充函数。

This response有一个解决这个问题的简单方法，我认为这是一个非常优雅的方法。

如果你这样延伸localStorage["foo"] = "value"; // is the same as: localStorage.setItem("foo", "value") // and var bar = localStorage["foo"]; // is the same as: var bar = localStorage.getItem("foo"); ......

Number

然后你就可以了

Number.prototype.pad = function(size) {
  var s = String(this);
  while (s.length < (size || 2)) {s = "0" + s;}
  return s;
}

如果您的对象是字符串而不是数字，请使用

var second = 3     // or any Number object
var minute = 9;
var hour = 4;
var time = hour.pad() + ':' + minute.pad() + ':' + second.pad();
// time will be: 04:09:03

如果您有任何问题，意见或疑虑，请随时联系！

Answer 2

不是一个完整的答案，但这里有一些建议：

每次时间更改时都会使用local storage存储时间，以便您可以在重新加载页面时将其选中并从中断处继续。
如果您使用的是PHP或ASP.NET，您可以在服务器上完成倒计时，只需将其挂钩即可，但这可能会更加困难和不必要。

如何在浏览刷新时继续我的倒数计时器？

2 个答案: