CODEWITHSUNDEEP
javascriptc#asp.net
Johnny Bones
Johnny Bones

Reputation: 8404

Putting a stopwatch on a page without using the Form tag?

The few examples I've found require a Form tag, which doesn't seem to play nicely with my existing app.

What I need to do is add a timer on my page that starts counting as soon as one button is pressed, and stops counting as soon as another button is pressed. These buttons will be outside of the UpdatePanel that the stopwatch should reside in.

Is this possible to do with Java? I found this answer which seemed promising, but wouldn't work:

How to create a stopwatch timer

It didn't seem to like the first line of the tm1_Tick function because it thought sw was NULL.

Any sample code or direction would be appreciated.

Upvotes: 0

Views: 590

Answers (4)

Johnny Bones
Johnny Bones

Reputation: 8404

I'm putting this as an answer in the interest of being perfectly clear, but it's based on Jamieson's answer. The end result was to add this Javascript:

<script type = "text/javascript">
    /* Stop, Clear and Pause the timer displayed under the pause buttons  */
    var h1 = document.getElementsByTagName('h1')[0],
        start = document.getElementById('start'),
        stop = document.getElementById('stop'),
        clear = document.getElementById('clear'),
        seconds = 0, minutes = 0, hours = 0,
        t;

    function add() {
        seconds++;
        if (seconds >= 60) {
            seconds = 0;
            minutes++;
            if (minutes >= 60) {
                minutes = 0;
                hours++;
            }
        }

        document.getElementById('<%=h1.ClientID%>').innerText = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);;
        timer();
    }
    function timer() {
        t = setTimeout(add, 1000);
    }

    function stp() {
        clearTimeout(t);
    }

    function clr() {
        document.getElementById('<%=h1.ClientID%>').innerText = "00:00:00";
        seconds = 0; minutes = 0; hours = 0;  
    }
</script>

The ASP.Net piece you need to add is:

 <asp:UpdatePanel ID="UpdatePanel4" runat="server">
     <ContentTemplate>
         <table style="width:132px; margin-left:13px">
             <tr>
                 <td style="text-align:center; margin-left:2px; border:double; background-color:darkcyan">
                     <asp:Label ID="h1" runat="server" ForeColor="White"><time>00:00:00</time></asp:Label>
                 </td>
             </tr>
         </table>                                    
     </ContentTemplate>
</asp:UpdatePanel>

Then, to my ASP buttons I added this:

onclientclick="stp();"

(If you already have an onclientclick on your button, just separate them with a semicolon, you can have multiple functions in an onclientclick)

I then needed to add this to a few spots in my code-behind:

ScriptManager.RegisterClientScriptBlock(UpdatePanel4, this.GetType(), "script", "stp()", true);
ScriptManager.RegisterClientScriptBlock(UpdatePanel4, this.GetType(), "script", "clr()", true);

The last piece may or may not be necessary, depending on what you're doing.

Upvotes: 1

Richard
Richard

Reputation: 109100

few examples I've found require a Form tag

Because they are ASP.NET WebForms (like the one you linked to: lots of server controls with namespace tag "asp").

Why not do it purely in JavaScript? On whatever event note the time, and then, using setTimeout, update the page content from time to time.

(Note the only common thing between Java – the cross platform language from Sun and now Oracle – and JavaScript – the scripting language with deep integration into browsers – is their first four letters.)

Upvotes: 2

Jamieson Rhyne
Jamieson Rhyne

Reputation: 467

I assume you mean "JavaScript". A client-side solution will work nicely using JS.

Found this online, very nice example (disclaimer, this is not my code):

http://jsfiddle.net/oukjfavu/

var h1 = document.getElementsByTagName('h1')[0],
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t;

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }

    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}
timer();


/* Start button */
start.onclick = timer;

/* Stop button */
stop.onclick = function() {
    clearTimeout(t);
}

/* Clear button */
clear.onclick = function() {
    h1.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}

Upvotes: 1

Dave
Dave

Reputation: 10924

If I am understanding your question correctly, you can create your own countdown timer purely in JavaScript, then make an AJAX call to your update panel.

Here's a short example of a purely JS countdown:

var start = document.getElementById("start");
start.addEventListener("click", function() {
  var interval = setInterval(function() {
    var watch = document.getElementById("watch");
    var value = watch.value - 1;
    watch.value = value;
    if (value <= 0)
      clearInterval(interval);
  }, 1000);
});
<input id="watch" value="10" />
<input id="start" type="button" value="start" />

Upvotes: 0

Related Questions