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>
Related
var d = new Date();
var h = d.getHour();
var m = d.getMinute();
var s = d.getSecond();
if (h == 12) {
alert(h + ":" + m + ":" + s + " PM");
} else {
alert(h + ":" + m + ":" + s + " AM");
}
What should i do?
Should i change the d.getMinute() to d.getMin()?
Thank you all
The methods are all supposed to be pluralized:
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
if(h == 12) {
alert(h+":"+m+":"+s+" PM");
} else {
alert(h+":"+m+":"+s+" AM");
}
For more more information about the Date methods: W3School
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;
}
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
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.
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>