asked on

asp count-down timer (just modification)

How should I modify the (EE-) code below to be able to show a 40min count-down clock at an asp page and, when the 40min period is finished, the user is redirected to a closing page?

Thanks,
fskilnik

EE Link: https://www.experts-exchange.com/questions/23092883/How-to-create-a-count-down-timer.html?sfQueryTermInfo=1+10+30+asp+count+down&anchorAnswerId=20689674#a20689674

<script>
var tId="";
var anHour = 60*60*1000;
var twoHours = anHour*2
var localTime = new Date();
var serverTime = new Date(localTime.getTime());
serverTime.setHours(17);
var diff = serverTime.getTime()-localTime.getTime();
function countDown() {
  var text = "";
  var now = new Date();
//  var gmt = new Date(now.getTime() + (now.getTimezoneOffset() * 60000));
  var serverTime = new Date(now.getTime()+diff)
  var seventeen = new Date(serverTime.getFullYear(),serverTime.getMonth(),serverTime.getDate(),17,0,0,0);
  var nineteen  = new Date(seventeen.getTime()+twoHours);
  if (serverTime>=seventeen&&serverTime<=nineteen) text += " - We are out for dinner";
 
  var millisecsUntilSeventeen =seventeen.getTime()-serverTime.getTime();
  var millisecsUntilNineteen =nineteen.getTime()-serverTime.getTime();
 
  if (millisecsUntilSeventeen<0) {
    seventeen.setDate(seventeen.getDate()+1);
  }
  var millisecsUntilSeventeen =seventeen.getTime()-serverTime.getTime();
 
  var ss = Math.floor(millisecsUntilSeventeen/1000);
  millisecsUntilSeventeen = millisecsUntilSeventeen % 1000;
  var mm = Math.floor(ss/60); 
  ss = ss % 60
  var hh = Math.floor(mm/60);
  mm = mm % 60;
  if (mm<10) mm="0"+mm
  if (ss<10) ss="0"+ss
  text = 'Countdown to 17:00: '+hh+':'+mm+':'+ss+'<br>It is '+serverTime+' - Our time<br>It is '+now+' - your time<br>'+text
  
  document.getElementById('timeSpan').innerHTML=text;
}
window.onload=function() { tId=setInterval('countDown()',1000);}
</script>
<span  id="timeSpan" style="position:fixed; top:0;left:500"></span>

Open in new window

leakim971

Replace line 14 :
var seventeen = new Date(serverTime.getFullYear(),serverTime.getMonth(),serverTime.getDate(),17,0,0,0);

by the following lines :

var d = new Date();
var seventeen = new Date(d);
seventeen.setMinutes(d.getMinutes()+40);

Open in new window

fskilnik

ASKER

Thanks for the help, leakim971.

After changing as you said, the count-down "freezed" (showing: "Countdown to 17:00: 2:39:59")

I will put below the code exactly as the modification you suggested, just in case I made something wrong...

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var tId="";
var anHour = 60*60*1000;
var twoHours = anHour*2
var localTime = new Date();
var serverTime = new Date(localTime.getTime());
serverTime.setHours(17);
var diff = serverTime.getTime()-localTime.getTime();
function countDown() {
  var text = "";
  var now = new Date();
//  var gmt = new Date(now.getTime() + (now.getTimezoneOffset() * 60000));
  var serverTime = new Date(now.getTime()+diff)
 
var d = new Date();
var seventeen = new Date(d);
seventeen.setMinutes(d.getMinutes()+40);
 
  
  var nineteen  = new Date(seventeen.getTime()+twoHours);
  if (serverTime>=seventeen&&serverTime<=nineteen) text += " - We are out for dinner";
 
  var millisecsUntilSeventeen =seventeen.getTime()-serverTime.getTime();
  var millisecsUntilNineteen =nineteen.getTime()-serverTime.getTime();
 
  if (millisecsUntilSeventeen<0) {
    seventeen.setDate(seventeen.getDate()+1);
  }
  var millisecsUntilSeventeen =seventeen.getTime()-serverTime.getTime();
 
  var ss = Math.floor(millisecsUntilSeventeen/1000);
  millisecsUntilSeventeen = millisecsUntilSeventeen % 1000;
  var mm = Math.floor(ss/60); 
  ss = ss % 60
  var hh = Math.floor(mm/60);
  mm = mm % 60;
  if (mm<10) mm="0"+mm
  if (ss<10) ss="0"+ss
  text = 'Countdown to 17:00: '+hh+':'+mm+':'+ss+'<br>It is '+serverTime+' - Our time<br>It is '+now+' - your time<br>'+text
  
  document.getElementById('timeSpan').innerHTML=text;
}
window.onload=function() { tId=setInterval('countDown()',1000);}
</script>
<span  id="timeSpan" style="position:fixed; top:0;left:500"></span>

Open in new window

leakim971

Could explain why you need this script ?

Check the following :

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
	var tId="";

	var strTime = new Date();
	var endTime = new Date(strTime);
	endTime.setMinutes(strTime.getMinutes()+40);

	var diff = endTime.getTime() - strTime.getTime();

	function countDown() {
		var now = new Date();
		var dt = endTime - now;
		var ms = d2(dt%1000);
		var ss = d2(parseInt(dt/1000)%60);
		var mm = d2(parseInt(dt/(60*1000))%60); 
		var hh = d2(parseInt(dt/(60*60*1000)))

		text = "Countdown to " + d2(endTime.getHours()) + ":" + d2(endTime.getMinutes()) + " : " + hh + ":" + mm + ":" + ss;
		document.getElementById('timeSpan').innerHTML = text;
	}
	
	function d2(n) {
		return (n<10)?("0"+n):n;
	}
	
	window.onload = function() {
		tId = setInterval('countDown()',1000);
	}

</script>
<span  id="timeSpan" style="position:fixed; top:0;left:500"></span>
</body>
</html>

Open in new window

fskilnik

ASKER

Hi leakim!

While I try your suggestion, I found something that works EXACTLY as I would like BUT I need to put it "linked" to the server time, because when pages are refreshed, the counting down must go on...

In other words, could you adapt the code (already checked) below to the server-link ?

Thanks!

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var start=new Date();
     start=Date.parse(start)/1000;
     var counts=20;

     function CountDown(){
          var now=new Date();
          now=Date.parse(now)/1000;
          var x=parseInt(counts-(now-start),10);
          if(document.form1){
       var seconds=x%60;
       var minutes=(x-seconds)/60;
document.form1.clock.value = minutes + ":" + seconds;
}
          if(x>0){
               timerID=setTimeout("CountDown()", 100)
          }else{
               location.href="http://www.mysite.com.br/closingTest.html"
          }
     }
window.setTimeout('CountDown()',100);
//  End -->
</script>


<FORM NAME="form1">
You have
<INPUT TYPE="text" NAME="clock" SIZE="2" VALUE="10">
seconds, until your test is complete.
</form>
<span  id="timeSpan" style="position:fixed; top:0;left:500"></span>

Open in new window

fskilnik

ASKER

Hi again,

I tried your suggestion and although it counts-down the 40minutes (as expected), when I refresh the page it restarts from 40minutes (that´s exactly what we need to avoid).

Please take into account the fact that the first code I posted IS able to keep the counting down even after pages are refreshed!

fskilnik

ASKER

What I intend to do:

this is an online test, the user has 40minutes to do it all and when the time is over, the user must be redirected to a closing page, therefore he will not be able to finish the questions he eventually haven´t done...

leakim971

For this purpose you may use a cookie when the test start.
You just need to set the expiration date of the cookie. (now + 40 minutes)
And every second you check if the cookie has expired

document.cookie = "startedAt=" + strTime + ";expires=" + endTime;

Open in new window

fskilnik

ASKER

But what happens if the user closed his browser and reopens the test? I would like him to be able to do that WITHOUT re-starting the counter... will it works as expected?

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

fskilnik

ASKER

Thanks a lot, leakim!

I will close this post, if necessary I will open another question and come back to invite you to help me again (giving the new EE link).

Best Regards,
Fábio.

leakim971

You're welcome!
Note it's not very secure because people can change the computer time or delete all cookies on the computer by playing with the browser.

leakim971

Thanks for the points!

fskilnik

ASKER

> Thanks for the points

my pleasure!

> people can change the computer time

ops... that means I´m still looking for a good solution.... if I open another post, asking about a relationship between the two succesfull codes I put here,would you have time and will to help me still in this matter?

leakim971

We can try to do this here, no worrie.

What is the language on the server side ?

leakim971

sorry stupid question... lol

what we can do :

On the server side, YOU create a new test (usual operation like login, choosing the test, or restore on), this test have an id and start date and time.
People start the test, if the browser is closed, we use the cookie which one contain id of the test to check the remaining time

what do you think ?

fskilnik

ASKER

You are most kind, leakim. Thanks a lot!

Let me see if I understand...my database is on the server, so when the user starts the online test we store the date and time of start in the database... ok. Then, when the user closes the browser and opens another one, when he wants to open the same test, we get the value of the start date and start time and subtract this time from the cookie... is that so?

fskilnik

ASKER

Now it´s 1h26min in the morning, leakim, therefore I will come back here (much) later because I need some sleep!!

See you and thank you very much for your support,
fskilnik

leakim971

leakim971

>Now it´s 1h26min in the morning, leakim, therefore I will come back here (much) later because I need some sleep!!

eh eh, OK, see you later

fskilnik

ASKER

Dear leakim,

Thanks A LOT for all your good-will to help me, but I found a JQuery solution that fits EXACTLY all my needs. The link follows, because I know you will have many more great opportunities to benefit from it than I.

Best Regards,
fskilnik.

Link: http://keith-wood.name/countdown.html

leakim971

Thanks you very much! I appreciate your link!

fskilnik

ASKER

I´m glad you liked it!!