...

View Full Version : Date function



ippo
09-22-2011, 05:51 PM
I want to get a digital time clock updated every second in 12 Hrs format but the following code i wrote is not meeting my objective.

What can be wrong with the code below-


<html>
<head>
<style>
#v{
background-color:navy;
height:auto;
width:auto;
font-size:22pt;
color:white;
font-weight:bold;
padding:20px;
text-align:center;
marquee-style:alternate;
}
</style>
</head>
<body>
<div id="v"></div>
<script>
function showTime()
{
var dt=new Date();
var h=dt.getHours();
var m=dt.getMinutes();
var s=dt.getSeconds();
//var chr=h;
if (m< 10) {
m= "0" + m;
}
if (s < 10) {
s = "0" + s;
}
if (h > 12) {
h=h - 12;
add = " p.m.";
} else {
h=h;
add = " a.m.";
}
if (h == 12) {
add = " p.m.";
}
if (h==0) {
h="12";
}

time=((hour<=10) ? "0" + h : h) + ":" + m + ":" + s + add;

document.getElementById("v").innerHTML=time;
setTimeout("showTime()",100);
}
showTime();
</script>

</body>
</html>

Old Pedant
09-22-2011, 06:27 PM
time=((hour<=10) ? "0" + h : h)

No place in your code have you defined a variable named hour, so you get an error when you try to use it.

I'd also point out that you have <=10 there whereas you have <10 for seconds and minutes. Think about it.

ippo
09-22-2011, 07:00 PM
Great !! Thanks very much . :thumbsup: :)

morongo47
09-22-2011, 07:20 PM
I'm not very good with javascript, but I played with your code a little, just to try out another way. Seems javascript already has formatting functions that do this for you, here's what I ended up with:



<html>
<head>

<style>
#v{
background-color:navy;
color:white;
height:auto;
width:auto;
font-size:22pt;
font-weight:bold;
padding:20px;
text-align:center;
marquee-style:alternate;
}
</style>

<script type="text/javascript">
function getcurtime()
{
var tm = new Date();
return tm;
}
</script>

</head>
<body>

<div id="v">
</div>

<script type="text/javascript">
function update(){
var t=getcurtime();
tmo=setTimeout("update()",1000);
document.getElementById("v").innerHTML=t.toLocaleTimeString();
}
update();
</script>

</body>
</html>

ippo
09-22-2011, 07:47 PM
Hi Morongo47,
Thanks vry much. Vry nice answer and short too. Great work. :thumbsup::D
But just a little more help I seek from the two of you -
Can you just give a marquee effect to the above time?
I want the time to scroll horizontally from left to right within the div portion (preferably if possible with CSS)

morongo47
09-22-2011, 08:51 PM
Like I said, I'm not too conversant with javascript, but here's what i found:

'<marquee>' is pretty much deprecated but still has backward compatibility in HTML5, however, it was pulled from CSS3 in 2010 - so that's what it is with using that tag.

jQuery has a marquee method you can try.

From my trials and errors hard-coding this, it looks like there's a timer conflict when attempting to use marquee-tags around a string that's being updated every second, it wants to re-initialize (start-over), prematurely, so it doesn't make the trip all the way across the screen.

Some of the other guys might be more into this kind of thing than I am, so they might have a solution, apart from linking-in a 3rd party lib.
.

DaveyErwin
09-22-2011, 10:03 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<style type="text/css">
#v{
position:relative;
top:0;
background-color:navy;
color:white;
height:auto;
width:auto;
padding-top:20px;
padding-bottom:20px;
overflow:hidden;
font-size:22pt;
font-weight:bold;}
</style>
<script type="text/javascript">
function getcurtime()
{
var a = new Date();
return [a.toLocaleTimeString().split(' ').join('&nbsp;'),
a.getSeconds()*1.66];
}
function init(){
setInterval("var a = getcurtime();"+
"var v = document.getElementById('v');"+
"v.innerHTML=a[0];"+
"v.style.paddingLeft=a[1]+'%';"+
"v.style.width=100-a[1]+'%'",100)
}

</script>

</head>
<body onload="init()">
<div id="v"></div>

<p>Scrolling Time</p>

</body>
</html>

ippo
09-23-2011, 08:23 AM
Hi
Thank You @DaveyErwin for this wonderful answer. :thumbsup: .I thanked you for this expert answer again.
Can you please explain how the program works in some details?
Will be greatly obliged :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum