Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Help for making clock for time counter

clock

  • Please log in to reply
12 replies to this topic

#1 yogendra_kaushik

yogendra_kaushik

    CC Lurker

  • Just Joined
  • Pip
  • 1 posts

Posted 28 November 2007 - 10:45 PM

Hello..alls
I am new in java script, I am making a application . in which i need to make a java script clock which count time ....I am trying to understand you it in more detail

After successfull user login clock show at top corner and it start from 00:00:00 and now it start time counting .

Can any one help he how can i do this
  • 0

#2 alilg

alilg

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 52 posts

Posted 03 April 2008 - 04:54 PM

Hello..alls
I am new in java script, I am making a application . in which i need to make a java script clock which count time ....I am trying to understand you it in more detail

After successfull user login clock show at top corner and it start from 00:00:00 and now it start time counting .

Can any one help he how can i do this


late reply i know, just for other people whom may have this question.

to make Countdown in javascript we need to work with Timers and setTimes.

this is a simple countdown script, watch it carefully to know how it works

<!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>
<title>Countdown</title>
</head>
<body onload="timer()">

<style type="text/css">
#time{
font-size:50pt;
}
</style>

<script type="text/javascript">
i=90;
function timer()
{
    document.getElementById('time').innerHTML = i+1;
    setTimeout('timer()', 1000); //this will make loop this function for every one second
    i--;
}
</script>

<div id="time">90</div>


</body>
</html>

the 1000 says to timer which call the function every 1000 miliseconds which is equal to 1 second

if you to make the countdown FASTER, you can replace 1000 value with 500 for example.

to stop a javascript timer we will use ClearTIMER which i don't think you need it...
  • 0

#3 alilg

alilg

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 52 posts

Posted 03 April 2008 - 05:16 PM

and i now i changed the above code to make a
digital clock with this format "00:00:00"

<!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>
<title>Digitl clock</title>
</head>
<body onload="timer()">

<style type="text/css">
#time{
font-size:50pt;
}
</style>

<script type="text/javascript">
var digiclock = "00:00:00";

i = 0;

function timer()
{
    var digiformat = "";
	if(i>3599)
	{
		var H = Math.floor(i/3600);
	}
	else
	{
		var H = 0;
	}
	
	var M = i - (H*3600)
	
	if(M>59)
	{
		M = Math.floor(M/60)
	}
	else
	{
		M = 0
	}	
	var S = i - (M*60)	
	if(H<10)
	{
		H = "0"+H;
	}
	if(M<10)
	{
		M = "0"+M;
	}
	if(S<10)
	{
		S = "0"+S;
	}
	
	document.getElementById('time').innerHTML = H+":"+M+":"+S;
    setTimeout('timer()', 1000);
    i++;
}

</script>

<div id="time">90</div>


</body>
</html>

  • 1

#4 LdoubleO

LdoubleO

    CC Lurker

  • Just Joined
  • Pip
  • 6 posts

Posted 12 January 2011 - 12:13 PM

What would be the code if the times was set to start for example at 15:00:00 and go all the way to 00:00:00?
i would like it to start in black and then when it gets to 00:00:00 have it change to gray and maybe have it blinking?
is all of this possible?
please help!
  • 0

#5 alilg

alilg

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 52 posts

Posted 12 January 2011 - 12:15 PM

count down you mean?
  • 0

#6 LdoubleO

LdoubleO

    CC Lurker

  • Just Joined
  • Pip
  • 6 posts

Posted 12 January 2011 - 12:20 PM

thats correct.
  • 0

#7 alilg

alilg

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 52 posts

Posted 12 January 2011 - 12:35 PM

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>



<body>



<div id="myClock"></div>

<script>



var StartTimeInMinutes = 2;

var clock_div_id = "myClock";

function counddownit()

{

    temp1 = temp1 - 1;

    var Minutes = Math.floor((temp1 / (60*100)));

    var Seconds = temp1 - (Minutes*60*100);

    Seconds = Math.floor(Seconds / 100);

    var Milis = (temp1- (Minutes*60*100)) - (Seconds*100);

    document.getElementById(clock_div_id).innerHTML = '<span style="color:red;">'+Minutes+":"+Seconds+":"+Milis+'</span>';

    if(temp1<1)

    {

        document.getElementById(clock_div_id).innerHTML = '<span style="color:gray;">'+Minutes+":"+Seconds+":"+Milis+'</span>';

    }

    else

    {

            setTimeout(counddownit, 10);

    }

}

var temp1 = StartTimeInMinutes * 60 * 100;

counddownit();



</script>

</body>

</html>


  • 1

#8 LdoubleO

LdoubleO

    CC Lurker

  • Just Joined
  • Pip
  • 6 posts

Posted 12 January 2011 - 01:12 PM

that seems to be set for minutes right?
what can i do to change it into hours?
15hrs:58mins:45sec

Something like that ^ ?
  • 0

#9 alilg

alilg

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 52 posts

Posted 12 January 2011 - 01:18 PM

set the clock start time by edit these vars
var StartTimeHours = 1;
var StartTimeMinute = 34;
var StartTimeSecond = 56;

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div id="myClock"></div>
<script>

var StartTimeHours = 1;
var StartTimeMinute = 34;
var StartTimeSecond = 56;

var clock_div_id = "myClock";
function counddownit()
{
    temp1 = temp1 - 1;
    var Minutes = Math.floor((temp1 / (60*60)));
    var Seconds = temp1 - (Minutes*60*60);
    Seconds = Math.floor(Seconds / 60);
    var Milis = (temp1- (Minutes*60*60)) - (Seconds*60);
    document.getElementById(clock_div_id).innerHTML = '<span style="color:red;">'+Minutes+":"+Seconds+":"+Milis+'</span>';
    if(temp1<1)
    {
        document.getElementById(clock_div_id).innerHTML = '<span style="color:gray;">'+Minutes+":"+Seconds+":"+Milis+'</span>';
    }
    else
    {
            setTimeout(counddownit, 1000);
    }
}
var temp1 = (StartTimeHours*60*60) + (StartTimeMinute*60) + StartTimeSecond;
counddownit();

</script>
</body>
</html>

what else?
  • 0

#10 LdoubleO

LdoubleO

    CC Lurker

  • Just Joined
  • Pip
  • 6 posts

Posted 12 January 2011 - 01:22 PM

awesome! got it! thanks alot. i really appreciate it.
im working on a project that i might need a bit of guidance later on i will keep you posted in case you can help me out a bit and sort of guide me.
THANKS! once again!
  • 0

#11 alilg

alilg

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 52 posts

Posted 12 January 2011 - 01:28 PM

that seems to be set for minutes right?
what can i do to change it into hours?
15hrs:58mins:45sec

Something like that ^ ?


awesome! got it! thanks alot. i really appreciate it.
im working on a project that i might need a bit of guidance later on i will keep you posted in case you can help me out a bit and sort of guide me.
THANKS! once again!

i'm happy which this little code could help you. :P
  • 0

#12 LdoubleO

LdoubleO

    CC Lurker

  • Just Joined
  • Pip
  • 6 posts

Posted 12 January 2011 - 02:06 PM

btw is it possible to add Hr, Min, Sec under the counter?
for example.

btw is it possible to have the counter mention hr, min and sec right under it?

for example.. http://tinypic.com/r/11l4g40/7
  • 0





Also tagged with one or more of these keywords: clock

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download