如何在asp.net(Master Page概念)中修复Javascript Timer

时间:2014-12-02 10:00:35

标签: javascript c# asp.net

我正在尝试在我的asp.net项目中添加Javascript计时器,它是按照我的需要实现和运行的,但如果按任何键,那对我来说是消失的。但是Timer正在运行。

的js。代码

function myTimer(startVal, interval, outputId, dataField) {
         this.value = startVal;
         this.OutputCntrl = document.getElementById(outputId);
         this.currentTimeOut = null;
         this.interval = interval;
         this.stopped = false;
         this.data = null;
         var formEls = document.documentElement;
         if (dataField) {
             for (var i = 0; i < formEls.length - 1; i++) {
                 if (formEls[i].name == dataField) {
                     this.data = formEls[i];
                     i = formEls.length + 1;
                 }
             }
         }

         myTimer.prototype.go = function () {
             if (this.value > 0 && this.stopped == false) {
                 this.value = (this.value - this.interval);
                 if (this.data) {
                     this.data.value = this.value;
                 }
                 var current = this.value;
                 this.OutputCntrl.innerHTML = this.Hours(current) + ':' + this.Minutes(current) + ':' + this.Seconds(current);
                 this.currentTimeOut = setTimeout("Timer.go()", this.interval);
             }
             else {
                 alert('Time Out!');
                //window.location('Index.aspx');
             }



         }
         myTimer.prototype.stop = function () {
             this.stopped = true;
             if (this.currentTimeOut != null) {
                 clearTimeout(this.currentTimeout);
             }
         }
         myTimer.prototype.Hours = function (value) {
             return Math.floor(value / 3600000);
         }
         myTimer.prototype.Minutes = function (value) {
             return Math.floor((value - (this.Hours(value) * 3600000)) / 60000);
         }
         myTimer.prototype.Seconds = function (value) {
             var hoursMillSecs = (this.Hours(value) * 3600000)
             var minutesMillSecs = (this.Minutes(value) * 60000)
             var total = (hoursMillSecs + minutesMillSecs)
             var ans = Math.floor(((this.value - total) % 60000) / 1000);

             if (ans < 10)
                 return "0" + ans;

             return ans;
         }
     }         

我是通过按钮控制来调用的。

代码

 void Page_PreInit(object sender, EventArgs e)
{
    string timerVal = Request.Form["timerData"];
    if (timerVal != null || timerVal == "")
    {
        timerVal = timerVal.Replace(",", String.Empty);
        timerStartValue = long.Parse(timerVal);
    }
}

private Int32 TimerInterval
{
    get
    {
        object o = ViewState["timerInterval"];
        if (o != null) { return Int32.Parse(o.ToString()); }
        return 50;
    }
    set { ViewState["timerInterval"] = value; }

}

 protected void Button1_Click(object sender, EventArgs e)
{


    StringBuilder bldr = new StringBuilder();
    bldr.AppendFormat("var Timer = new myTimer({0},{1},'{2}','timerData');", this.timerStartValue, this.TimerInterval, this.lblTimerCount.ClientID);
    bldr.Append("Timer.go()");
    ClientScript.RegisterStartupScript(this.GetType(), "TimerScript", bldr.ToString(), true);
    ClientScript.RegisterHiddenField("timerData", timerStartValue.ToString());
}

void Page_PreRender(object sender, EventArgs e)
{
    StringBuilder bldr = new StringBuilder();
    bldr.AppendFormat("var Timer = new myTimer({0},{1},'{2}','timerData');", this.timerStartValue, this.TimerInterval, this.lblTimerCount.ClientID);
    bldr.Append("Timer.go()");
    ClientScript.RegisterStartupScript(this.GetType(), "TimerScript", bldr.ToString(), true);
    ClientScript.RegisterHiddenField("timerData", timerStartValue.ToString());
}

我将它显示在Label控件中。

 <asp:Label ID="lblTimerCount" runat="server" Height="27px" 
                 Width="232px"></asp:Label>

在Page_PreInit中'string timerVal'的值在我传递的page_load之后变为相同,它从启动开始计时器。

请纠正我。

1 个答案:

答案 0 :(得分:0)

这些是您需要遵循的简单步骤: 1)页面加载时,在隐藏元素上设置timerinterval

你的HTML应该是这样的:

<input type="button" id="btnStartTimer" name="StartTimer" value="Start" />
<input type="hidden" id="hdnInterval" name="Interval" value="50" />
<p>
    <label>Show Timer:</label>
    <label id="lblOutput"></label>
</p>

$('#YourButtonId').on('click', function(e){e.preventDefault; Timer.Go(); });

您的按钮js点击事件应如下所示:

$('#btnStartTimer').on("click", function (e) {
    e.preventDefault();
    var interval = $('#hdnInterval').val();
    var timer = new myTimer(0, interfal, "lblOutput", null);
    timer.go();
});

这些方面的东西。这将使回帖不必要