JavaScript Clock - javascript

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.

Related

new Date() not working not working inside chrome

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

Hour is not showing in 00 format

I have this code:
<span id="live_time">Server Time: <strong><?php echo date('h:i:s A'); ?></strong></span>
<script type="text/javascript">
// use php to get the server time
var serverdate = new Date('<?php echo date('F d, Y h:i:s'); ?>');
function refresh_time(){
serverdate.setSeconds(serverdate.getSeconds() + 1);
var hh=serverdate.getHours();
var m=serverdate.getMinutes();
var s=serverdate.getSeconds();
m=checkTime(m);
s=checkTime(s);
var dd = " AM";
var h = hh;
if (h >= 12) {
h = hh-12;
dd = " PM";
}
if (h == 0) {
h = 12;
}
var output = h+":"+m+":"+s+""+dd;
document.getElementById("live_time").innerHTML = 'Server Time: <strong>'+output+'</strong>';
}
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}
window.onload = function(){
setInterval("refresh_time()", 1000);
}
</script>
When I access page first time it show me 07:11:14 AM after one second time become 7:11:15 AM How I can output at every refresh in H format? like 07:11:15 ?
just add the 0 manually:
var date = new Date();
currentHours = date.getHours();
var currentHours2 = 6;
var currentHours3 = 18;
currentHours = ("0" + currentHours).slice(-2);
currentHours2 = ("0" + currentHours2).slice(-2);
currentHours3 = ("0" + currentHours3).slice(-2);
console.log(currentHours)
console.log(currentHours2)
console.log(currentHours3)
You can use ES8 padStart() to pad the hour with 0.
var h = "5";
console.log(h.padStart(2, "0"));
Or if not use the older syntax
var h = "5";
console.log(h.length == 1 ? "0"+h : h);

JS AM/PM times always show AM

I am making a simple time calculator in javascript. I have converted the times into 12-hour instead of 24 hour time for simplicity, however the code I have for calculating am/pm always shows am. Any reason why this would be happening?
Here is my code:
function solveTime(x) {
var suffixSolve = (utcHours + x) % 24;
var suffix = "am";
if (utcHours > 12) {
var suffix = "pm";
}
if (utcMinutes == 0) {
utcMinutesLead = "00";
}
if (utcMinutes < 10) {
utcMinutesLead = "0" + utcMinutes;
}
var timeSolve = (((utcHours + x) + 11) % 12 + 1);
var timeTotal = timeSolve + ":" + utcMinutesLead + " " + suffix;
var utcMod = x;
if (utcMod > 0) {
utcMod = "+" + utcMod;
}
document.getElementById(x).innerHTML = "(UTC" + utcMod + ") " + timeTotal;
}
and here is the code behind utcHours
var masterTimeUTC = new Date();
var utcHours = masterTimeUTC.getUTCHours();
var utcMinutes = masterTimeUTC.getUTCMinutes();
var utcSeconds = masterTimeUTC.getUTCSeconds();
var utcMinutesLead = masterTimeUTC.getUTCMinutes();
Example here: http://codepen.io/markgamb/pen/gwGkbo
The issue is you should be checking whether suffixSolve is greater than 12 instead of utcHours, because utcHours does not change due to the value of x. Since you can shift the hours forward and backwards, I created a variable shift to handle that.
function solveTime(x) {
if (x < 0) {
var shift = 24 + x;
} else {
var shift = x;
}
var suffixSolve = (utcHours + shift) % 24;
var suffix = "am";
if (suffixSolve > 12) {
suffix = "pm";
}
if (utcMinutes == 0) {
utcMinutesLead = "00";
}
if (utcMinutes < 10) {
utcMinutesLead = "0" + utcMinutes;
}
var timeSolve = (((utcHours + x) + 11) % 12 + 1);
var timeTotal = timeSolve + ":" + utcMinutesLead + " " + suffix;
var utcMod = x;
if (utcMod > 0) {
utcMod = "+" + utcMod;
}
document.getElementById(x).innerHTML = "(UTC" + utcMod + ") " + timeTotal;
}
var masterTimeUTC = new Date();
var utcHours = masterTimeUTC.getUTCHours();
var utcMinutes = masterTimeUTC.getUTCMinutes();
var utcSeconds = masterTimeUTC.getUTCSeconds();
var utcMinutesLead = masterTimeUTC.getUTCMinutes();
solveTime(4);
solveTime(0);
solveTime(-8);
<div id="4"></div>
<div id="-8"></div>
<div id="0"></div>

How to refresh timer when click on link in javascript

I have countdown time for 15 seconds. It refreshes when 1 second on it. I also need refresh timer when user clicks at link on my website. I use cookie to provide no refreshing of timer when user refreshes page. Now when I click at link my timer refreshes but my old timer continues to countdown. As a result I have two timers and every second I see values from different timers. For example: I have countdown timer for 15 second. I click at link when value on timer was 7 seconds, and I see something like this: 15, 6, 14, 5, 13, 4, 12, 3 etc. But I need normal sequnce such 15, 14, 13 etc. What should I do for it? Below is my code:
// calls when I click at link
function rate(auct_id){
$.ajax({
type: 'POST',
url: '/auth/rate',
data: {'id': auct_id },
success: function(data) {
data = jQuery.parseJSON(data);
if (data.message) {
alert(data.message);
if (data.message != 'rates_count') {
windows.location = '/#openModal';
}
} else {
var new_price = data.price;
var new_login = data.login;
new_price += '<span> руб.</span>';
$('#price_' + auct_id).html(new_price);
$('#login_' + auct_id).html(new_login);
setTimer(auct_id, true);
}
}
});
}
function setTimer(id, update) {
var countdown4;
if(getCookie('countdown_' + id) && !update) countdown4 = getCookie('countdown_' + id);
else countdown4 = 15;
if (update) delete_cookie('countdown_' + id);
do_cd4(id, countdown4, update);
}
function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
var delete_cookie = function(name) {
document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
};
function convert_to_time(secs) {
secs = parseInt(secs);
hh = secs / 3600;
hh = parseInt(hh);
mmt = secs - (hh * 3600);
mm = mmt / 60;
mm = parseInt(mm);
ss = mmt - (mm * 60);
if (hh > 23) {
dd = hh / 24;
dd = parseInt(dd);
hh = hh - (dd * 24);
} else {
dd = 0;
}
if (ss < 10) {
ss = "0" + ss;
}
if (mm < 10) {
mm = "0" + mm;
}
if (hh < 10) {
hh = "0" + hh;
}
if (dd == 0) {
return (hh + ":" + mm + ":" + ss);
}
else {
if (dd > 1) {
return (dd + " day " + hh + ":" + mm + ":" + ss);
} else {
return (dd + " day " + hh + ":" + mm + ":" + ss);
}
}
}
// Our function that will do the actual countdown
do_cd4 = function(id, countdown4, update) {
//console.log(countdown4);
if (countdown4 < 1) {
countdown4 = 15;
do_cd4(id, countdown4);
} else {
$('#timer_' + id).html(convert_to_time(countdown4));
setTimeout(function() {
do_cd4(id, countdown4, update);
}, 1000);
}
setCookie('countdown_' + id, countdown4, 3);
countdown4 = countdown4 - 1;
}
The question has already been asked : Resetting a setTimeout
You need to keep a reference on your setTimeout, so you can clear it or restart it.

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