Hi!
There isn’t a way to do this that won’t involve date/time functions and mathematical expressions. If you are not familiar with using expressions in Axure, I’d recommend checking out this help article.
One way to make your timer is the following:
Upon hitting start, store the start time in a global variable, and as time elapses subtract the start time from the current time to get the elapsed time.
The date function Now.getValue() comes in handy here. It returns the current date/time in the number of milliseconds (thousandths of a second) that have elapsed since Jan 1, 1970.
You will set two global variables based on Now.getValue():
[ul]
[li]v_startTime: the time captured by Now.getValue() upon pressing start[/li][li]v_timeSpan: milliseconds elapsed since pressing start, i.e., Now.getValue() minus v_startTime[/li][/ul]
Since v_timeSpan is a straight-up number rather than a time format, it will be easy to perform math on. That math will be converting v_timespan into the various units of you clock: seconds, minutes, hours.
The following expressions will return seconds, minutes, and hours respectively:
[ul]
[li]Seconds: Math.floor(v_timeSpan/1000) % 60[/li][li]Minutes: Math.floor(v_timeSpan/1000/60) % 60[/li][li]Hours: Math.floor(v_timeSpan/1000/60/60)[/li][/ul]
Math.floor() rounds whatever is in the parentheses down to the nearest integer.
The modulus operator (%) is similar to the division operator, except it returns only the remainder of the division (here by 60) and leaves out the quotient. This insures that both minutes and seconds will start over at zero when the number would have otherwise resulted in 60+ value.
Finally, you will want to add leading zeros when any of the component numbers is a single digit. This way, your running time won’t look like 0:0:1, but rather like 00:00:01. (The method for doing this is described here.)
To make the time update constantly use a two state dynamic panel that automatically goes to its next state every 100ms, wrapping to back to state 1 upon leaving state 2. The dynamic panel interaction OnPanelStateChange fires every time the panel changes state, so that’s a nice spot for putting the code that updates the clock display.
Here is such an implementation. It has two pages: one without leading zeros, one with. (The former is much easier to understand, and once you get it, look at the latter.)
File: runningClock.rp (72.3 KB)