...

View Full Version : JS clock



Painfall
01-03-2011, 12:03 PM
Hello. I am trying to stop and then start my clock, but something goes wrong


<script type="text/javascript">

function start_clock(){

var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
// add a zero in front of numbers<10
m = checkTime(m);
s = checkTime(s);
document.getElementById('clck').innerHTML = h+":"+m+":"+s;
t=setTimeout('start_clock()');
}

function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}

var intval=""
function start_Int(){
if(intval==""){
intval=window.setInterval("start_clock()",1000)
}else{
stop_Int()
}
}

function stop_Int(){
if(intval!=""){
window.clearInterval(intval)
intval=""
myTimer.innerHTML="Interval Stopped"
}
}


</script>


<h1>A live clock in JavaScript</h1>
</head>
<body onload="start_clock()">

<p>The time according to your PC is </p>

<span id="clck">Interval Stopped</span>
<br><br><br>
<input type="button" value="Start" onclick="start_Int()">
<input type="button" value="Stop" onclick="stop_Int()">
Any help will be appreciated.

Logic Ali
01-03-2011, 01:19 PM
Your clock display function uses calls setTimeout to set-up the next call, but you're calling setInterval to start it. It needs to be one or the other not both.
There's no need to check the status of the interval value before calling clearInterval.
It makes more sense for the function that starts the clock to be separate from the one that displays it.

<html>
<head>
<title> stopwatch </title>
<script type="text/javascript">

var intVal = null;

function show_clock()
{
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();

m = ( m < 10 ? '0' : '' ) + m;

s = ( s < 10 ? '0' : '' ) + s;

document.getElementById('clck').innerHTML = h + ":" +m+ ":" +s;
}

function start_Int()
{
intVal = setInterval( show_clock, 995 );
}

function stop_Int()
{
clearInterval( intVal );

document.getElementById('clck').innerHTML = "Interval Stopped";
}


</script>


<h1>A live clock in JavaScript</h1>
</head>
<body onload="start_Int()">

<p>The time according to your PC is </p>

<span id="clck"></span>
<br><br><br>
<input type="button" value="Start" onclick="start_Int()">
<input type="button" value="Stop" onclick="stop_Int()">
</body>
</html>

Krupski
01-03-2011, 08:36 PM
Hello. I am trying to stop and then start my clock, but something goes wrong


Here's an incredibly simple live JS clock that will show you the basic concept of what you should do:



<html>
<head>
<title>Clock</title>
<script type="text/javascript">
function clock()
{
var d = new Date();
var hour = d.getHours();
var mins = d.getMinutes();
var secs = d.getSeconds();
var str = hour + ':' + mins + ':' + secs;
var e = document.getElementById('clock');
e.innerHTML = str;
setTimeout('clock()', 1000);
}
</script>
</head>
<body>
<span id="clock"></span>
<script type="text/javascript">
clock();
</script>
</body>
</html>
Near the bottom, the line clock(); "kick-starts" the clock by calling it once. After that, the clock calls itself again and again every 1000 milliseconds (1 second) to provide live update.

Lastly, if you want to really format your time nicely and easily, check out "Date Format" by Steven Levithan (LINK (http://blog.stevenlevithan.com/archives/date-time-format)).

Good luck!

-- Roger

Logic Ali
01-03-2011, 08:46 PM
Here's an incredibly simple live JS clock that will show you the basic concept of what you should do:
That adds nothing to what the OP had initially and doesn't address the question.

Krupski
01-03-2011, 11:18 PM
That adds nothing to what the OP had initially and doesn't address the question.



<html>
<head>
<title>Clock</title>
<script type="text/javascript">
var c = false;
function clock() {
var d = new Date();
var hour = twoDigits(String(d.getHours()));
var mins = twoDigits(String(d.getMinutes()));
var secs = twoDigits(String(d.getSeconds()));
var str = hour + ':' + mins + ':' + secs;
var e = document.getElementById('clock');
e.innerHTML = str;
}
function twoDigits(text) {
while(text.length < 2) { text = '0' + text; }
return text;
}
</script>
</head>
<body>
Clock:
<input type="button" value="Start" onclick="c=setInterval('clock()',1000);" />
<input type="button" value="Stop" onclick="clearInterval(c);" />
<br /><br />
<span style="font-size:24px;" id="clock">------</span>
</body>
</html>

Old Pedant
01-04-2011, 01:25 AM
You have lost all your paragraphs???

Krupski
01-04-2011, 04:12 AM
You have lost all your paragraphs???

No, I'm lost inside a paragraph! :)

It's a little joke about TinyMCE (the WYSIWYG editor). The guy who wrote it is fanatical about outputting "proper" HTML. One of the things it does is make every line a paragraph. Hitting enter genetates <p>&nbsp;</p> and every line is surrounded with <p> tags.

This is all fine and dandy, except that when people (like me) want to use it for a message board's user input (usually to replace a textarea), things work much better when new lines are <br />.

In order to use the editor with a message board, it's output has to be intercepted, the <p> tags stripped out and the proper <br /> tags put in.

It's tricky because the editor sometimes wants to grab the text back and add the <p> tags back in, which can result in double spaced text (because of <p></p> plus <br />).

The key is to find the right place to intercept the data stream.

So, in "honor" (?) of my battles with TinyMCE, it's cryptic documentation and it's propensity to change EVERYTHING into what IT thinks is proper, I put the <p></p> thing in my profile location.

Actually, I'm in New York State, USA (north-east corner of the Country).

So there you have it! ;)

-- Roger



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum