How to implement this JavaScript in HTML - javascript

This is a JavaScript showing time hour, minute and seconds now seconds are ticking minutes change it's not static i have problem.How to implement it in HTML page ?
<script type="text/javascript">
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
t = setTimeout('startTime()', 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
</script>

Edit your body tag to
<body onload="startTime()">
<span id="txt">10:26:07</span>
Than add bellow code where you want clock to appear

Just do it:
<span id="txt"></span>
<script type="text/javascript">
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
t = setTimeout('startTime()', 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
startTime();
</script>

You need an element on your page with ID txt (see your script.)
You need to start/call your function execution startTime();
In order to allow the JS DOM parser to find your #txt place your <script> before the closing </body> tag.
<div id="txt"></div>
<script type="text/javascript">
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
t = setTimeout('startTime()', 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
startTime(); // Execute
</script>

There could be so many version of HTML Markup for your Javascript function:
One of them could be like:
<div id="txt">
</div>
<button type="button" name="click" onclick="startTime()">Click Me!</button>
DEMO FIDDLE

Related

JavaScript clock font size

How can I do that hour (h) and seconds (s) font size be smaller like 40px and minutes (m) be bigger like 68px? This isn't working.
<script>
function startTime() {
var today = new Date();
var h = today.getUTCHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
var hh = h.fontsize("40px");
var mm = m.fontsize("68px");
var ss = s.fontsize("40px");
document.getElementById('ora').innerHTML =
hh + ":" + mm + ":" + ss;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}
</script>
HTML:
<div id="hours">
</div>
<div id="minutes">
</div>
<div id="seconds">
</div>
CSS:
#hours, #seconds{
font-size: 40px;
}
#minutes{
font-size: 68px;
margin: 0 20px 0 20px;
}
div{
display: inline-block;
}
JavaScript:
function startTime() {
var today = new Date();
var h = today.getUTCHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('hours').innerHTML = h;
document.getElementById('minutes').innerHTML = m;
document.getElementById('seconds').innerHTML = s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}
JSFiddle Demo
To add style you have to make them as HTML element: You can try the following way:
function startTime() {
var today = new Date();
var h = today.getUTCHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
var hh = ('<text class="hour">' + h + '</text>');
var mm = ('<text class="minute">' + m + '</text>');
var ss = ('<text class="second">' + s + '</text>');
document.getElementById('ora').innerHTML =
hh + ":" + mm + ":" + ss;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}
startTime()
.hour{
font-size:60px;
}
.minute{
font-size:40px;
}
.second{
font-size:20px;
}
<div id="ora"></div>
You would go with HTML and CSS.
function startTime() {
var today = new Date();
var h = today.getUTCHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('ora').innerHTML =
'<div class="hours">' + h + '</div>' + ":" + '<div class="minutes">' + m + '</div>' + ":" + '<div class="seconds">' + s + '</div>';
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}
startTime();
div {display: inline-block;}
.hours {
font-size: 80px;
color: #999;
}
.minutes {
font-size: 60px;
color: #555;
}
.seconds {
font-size: 40px;
color: #333;
}
<div id='ora'></div>
<div id="ora">
</div>
<script>
function startTime() {
var today = new Date();
var h = today.getUTCHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
hh = document.createElement("span");
hh.textContent = h + ":";
hh.style.fontSize = "68px";
mm = document.createElement("span");
mm.textContent = m + ":";
mm.style.fontSize = "58px";
ss = document.createElement("span");
ss.textContent = s;
ss.style.fontSize = "48px";
div = document.getElementById('ora');
div.innerHTML= "";
div.appendChild(hh);
div.appendChild(mm);
div.appendChild(ss);
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10)
{
i = "0" + i;
}
return i;
}
startTime();
</script>

I want the sentence and the time in same line

Can someone help me with this. I want the words and the time scrolling at the same line because the one that i did is not joined together.
<!DOCTYPE html>
<html>
<head>
<title>Time</title>
</head>
<body>
<marquee bgcolor="blue" width"1000" height="50">
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script><body onload="startTime()"> <div id="txt"></div> Philippine Standard Time (GMT+0800)</marquee>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Time</title>
</head>
<body onload="startTime()">
<marquee bgcolor="blue" width"1000" height="50">
<div>
<span id="txt"></span>
<span>Philippine Standard Time (GMT+0800)</span>
</div>
</marquee>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</body>
</html>
Try adding style #txt {
display: inline-block;
} for display div inline with other text.
Here is the code...
<!DOCTYPE html>
<html>
<head>
<title>Time</title>
</head>
<body>
<marquee bgcolor="blue" width"1000" height="50">
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s + " Philippine Standard Time (GMT+0800)";
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script><body onload="startTime()"> <div id="txt"></div> </marquee>
</body>
</html>
Instead of using Javascript to load the time alone, and the other strings using HTML, you'd better use Javascript for both. Hope it helps...

Dynamically update time without refreshing the page

<html>
<head>
<script>
function updateClock() {
var time = now.getHours() + ':' + now.getMinutes(),
document.getElementById('current').innerHTML = time;
setTimeout(updateClock, 1000);
}
</script>
</head>
<body onload="updateClock()">
<p id="current"> </p>
</body>
</html>
Above is the code for dynamically update real time, it is not showing any thing on the browser. Would really appreciate help
Thank you.
Show time using Js :
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('current').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i
}; // add zero in front of numbers < 10
return i;
}
<body onload="startTime()">
<p id="current">Time loading..</p>
</body>
OR
Your code edited:
function updateClock() {
var now = new Date();
var time = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
document.getElementById('current').innerHTML = time;
setTimeout(updateClock, 1000);
}
<body onload="updateClock()">
<p id="current"></p>
</body>
You were missing var now = new Date(); and also now.getSeconds();.
There are some errors in updateClock:
function updateClock() {
var now = new Date()
var time = now.getHours() + ':' + now.getMinutes();
document.getElementById('current').innerHTML = time;
setTimeout(updateClock, 1000);
}
now must be a Date object.
now needed to be a date object
You had a comma instead of a semicolon after now.getMinutes(),
I recommend using
* padding
* setInterval
* window.onload instead of body onload
I added seconds to show it updates. If you only need hours and minutes, change the interval time to 10000 or so.
function pad(num) {
return String("0"+num).slice(-2);
}
function updateClock() {
var now = new Date();
var time = pad(now.getHours()) + ':' + pad(now.getMinutes()) + ":" + pad(now.getSeconds());
document.getElementById('current').innerHTML = time;
}
window.onload = function() {
setInterval(updateClock, 500); // use a shorter interval for better update
}
<p id="current"></p>

get javascript to write to variable rather than document.write

I have the following javascript that prints the timestamp:
<script type="text/javascript">
<!--
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var seconds = currentTime.getSeconds()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write(hours + "" + minutes + seconds + month + "" + day + "" + year)
//-->
</script>
However I want to use this timestamp in many places in the page, how can i call it like $timestamp so i can control where its placed?
Thanks in advance.
Set a variable, like:
var timestamp = hours + "" + minutes + seconds + month + "" + day + "" + year;
and later in code use that variable to show info in your page, like:
var container = document.getElementById('container1');
container.innerHTML = timestamp;
where 'container1' is a html element like span, div, p, etc. ex:
<span id="container1"></span>
answer
<script>
function startTime()
{
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('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
<span id="txt"></span>
<script type="text/javascript">
startTime().swap('txt');
</script>

Clock not working?

So I followed a pretty strait-forward video tutorial on adding a clock in your webpage through JS. I have the exact same code, but it's not working on mine. Any suggestions? Thank you!
This is my code:
<body>
<div id="clockDisplay">00:00</div>
<!-- JAVASCRIPT starts here -------------------------------------------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript">
$(window).load(function renderTime() {
var currentTime = new Date () ;
var diem = "AM" ;
var h = currentTime.getHours() ;
var m = currentTime.getminutes() ;
var s = currentTime.getSeconds() ;
if (h == 0) {
h = 12;
} else if (h > 12) {
h = h -12;
diem = "PM" ;
}
if (h < 10) {
h = "0" + h;
}
if (m < 10) {
m = "0" + m;
}
if (s < 10) {
s = "0" + s;
}
var myClock = document.getElementyID('clockDisplay');
myClock.textContent = h + ":" + m + ":" + s + " " + diem;
setTimeout(renderTime()' ,1000) ;
};
renderTime() ;
</script>
<!-- JAVASCRIPT ends here --------------------------------------------------------->
</body>
You have a syntax error (quote mismatch) in your setTimeout code. You should never use a string as the first parameter of setTimeout.
setTimeout(renderTime, 1000);
And you don't need the $(window).load() if you put your Javascript code after the element with id="clockDisplay"
function renderTime() {
...
}
renderTime();
These need to be changed as well.
getElementById()
getMinutes()
Don't know what tutorial your following but I would change this line:
myClock.textContent = h + ":" + m + ":" + s + " " + diem;
to this:
myClock.innerHTML = h + ":" + m + ":" + s + " " + diem;
Too many things to fix here, this is my code :
<body>
<div id="clockDisplay">00:00</div>
<!-- JAVASCRIPT starts here -------------------------------------------------------->
<script type="text/javascript" language="JavaScript">
function renderTime() {
var currentTime = new Date () ;
var diem = "AM" ;
var h = currentTime.getHours() ;
var m = currentTime.getMinutes() ;
var s = currentTime.getSeconds() ;
if (h == 0) {
h = 12;
} else if (h > 12) {
h = h -12;
diem = "PM" ;
}
if (h < 10) {
h = "0" + h;
}
if (m < 10) {
m = "0" + m;
}
if (s < 10) {
s = "0" + s;
}
var myClock = document.getElementById('clockDisplay');
myClock.textContent = h + ":" + m + ":" + s + " " + diem;
}
window.onload = renderTime;
setInterval(renderTime ,1000) ;
</script>
<!-- JAVASCRIPT ends here --------------------------------------------------------->
</body>
To see details fix, go there : Fixed issues detail link
I have created a digital clock on my personal developing website but its not animated...
My javascript is below:
07:23:45 PM
<script>
function webClock() {
var pos = "PM";
var pickTime = new Date();
var h = pickTime.getHours();
var m = pickTime.getMinutes();
var s = pickTime.getSeconds();
if(h == 0){
h = 12;
}else if(h>12){
h = h-12;
pos="AM";
}
if(h<10){
h = "0" + h;
}
if(m<10){
m = "0" + m;
}
if(s<10){
s = "0" + s;
}
document.getElementById('MyClock').innerHTML= h + ":" + m + ":" + s + " " +"pos";
setTimeout(webClock, 500);
}
webClock();
}
</script>

Categories