I have to make a countdown timer where you choose the amount of seconds, minutes & hours for the timer to countdown. I found a video (
So the above is very similar to say desktop approach. (and like on desktop, we even dropped in that timer control).
The downside of course is this means a post-back for each 1 second.
But, we could surround the above markup with a update-panel - and it would be and look butter smooth.
The 2nd way:
100% Client side code.
So, with the above page, lets write the JavaScript code for the "js buttons"
We have this (I do assume this page has use of jQuery - but that's quite much assumed these days).
<script>
MyTime = new Date(0,0,0,0,0,0)
TimeZero = new Date(0,0,0,0,0,0)
MyTimer = 0
tH = $("#txtHours")
tM = $("#txtMin")
tS = $("#txtSec")
function mystart() {
MyTime.setHours(tH.val())
MyTime.setMinutes(tM.val())
MyTime.setSeconds(tS.val())
if (MyTime > TimeZero) {
MyTimer = setInterval(mytic,1000)
$("#lblDone").text("Start")
}
}
function mytic() {
MyTime.setSeconds(MyTime.getSeconds() - 1)
tH.val(MyTime.getHours())
tM.val(MyTime.getMinutes())
tS.val(MyTime.getSeconds())
if (MyTime <= TimeZero) {
clearInterval(MyTimer)
$("#lblDone").text("Done !!!")
}
}
function mystop() {
clearInterval(MyTimer)
}
</script>
So both the JavaScript, or the server side code does quite much the same thing.
The major difference you note is that the client side code? It never hits the server side, and thus looks quite a bit smoother.