Javascript Clock - Line break - javascript

This is the current code I'm using for my clock (from a tutorial), and I'm wondering if there is a way to make the time appear above the date?
function renderTime(){
// Date
var mydate = new Date();
var year = mydate.getYear();
if(year < 1000){
year +=1900;
}
var day = mydate.getDay();
var month = mydate.getMonth();
var daym = mydate.getDate();
var dayarray = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var montharray = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
// Date End
// Time
var currentTime = new Date();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
if( h == 24){
h = 0;
}
else if(h > 12){
h = h - 0;
}
// adding 0 infront of single digit values
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 = "" +dayarray[day]+ " " +montharray[month] + " " +daym+ " " +h+ ":" +m+ ":" +s;
myClock.innerText = "" +dayarray[day]+ " " +montharray[month] + " " +daym+ " " +h+ ":" +m+ ":" +s;
setTimeout("renderTime()", 1000);
// Time End
}
renderTime();
I'm not sure about what .textContent and .innerText does myself - I'm a beginner. HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body onLoad="renderTime()">
<div id="clockDisplay" class="container"></div>
</body>
<html>
CSS:
.container {
font-family: verdana;
font-weight: normal;
color: #000000;
text-align: right;
font-size: 20px;
}

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

How to implement this JavaScript in HTML

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

JavaScript Clock

I ran into a snag in my code, the code below is for a JavaScript clock which works perfectly:
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;
myClock.innerHTML = h + ":" + m + ":" + s + " " + diem;
myClock.innerText = h + ":" + m + ":" + s + " " + diem;
setTimeout('renderTime()',1000);
}
renderTime();
However I am trying to do it slightly different now like this:
function makeTime() {
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 clock = document.getElementById('clock');
clock.innerHTML = "<h1>"+h+":"+m+":"+s+":"+diem+"</h1>";
myClock.textContent = "<h1>"+h+":"+m+":"+s+":"+diem+"</h1>";
myClock.innerText = "<h1>"+h+":"+m+":"+s+":"+diem+"</h1>";
setTimeout('makeTime()',1000);
}
makeTime();
This one works, however does not update like the other one, you have to manually refresh the page.
What am I doing wrong?
You continue to refer to myClock in your second version, when you've renamed the variable to clock:
var clock = ...
clock.innerHtml = ...
myClock.textContent = "<h1>"+h+":"+m+":"+s+":"+diem+"</h1>";
myClock.innerText = "<h1>"+h+":"+m+":"+s+":"+diem+"</h1>";
setTimeout('makeTime()',1000);
This is causing errors (reference error: myClock is not defined) which is preventing the flow of execution from reaching your setTimeout call.
You should learn to use the tools available to you. Every browser has a method of reporting JavaScript errors to developers. Open the developer console in Webkit/IE10, or Firebug in Firefox, you'll see these errors and exactly where they're happening in your code.

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