We Keep Coding

Showing complete 24hr time display (00:00:00)

I have a basic script to display PST time based on 24:00hr UTC clock. Everything is working fine except it only displays 0:00:00 (h:m:s) for hours 0-9am and I want to have an extra 0 as a prefix (ex: 00:00:00).
My script is:
function startTime() {
const today = new Date();
let h = today.getUTCHours()-8;
let m = today.getUTCMinutes();
let s = today.getUTCSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
setTimeout(startTime, 1000);
}
I tried adding the following with no such luck:
function checkTime(h) {
if (h < 10) {h = "0" + h}; // add zero in front of numbers < 10
return h;
}

Note that the en-GB locale displays half-past midnight as 00:30:00, but the en-US locale displays it as 24:30:00.
const today = new Date();
const time = today.toLocaleTimeString('en-GB',
{timeZone: 'America/Los_Angeles', hour12: false})
console.log(time)

Maybe you forgot to call h = checkTime(h);
function startTime() {
const today = new Date();
let h = today.getUTCHours()-8;
let m = today.getUTCMinutes();
let s = today.getUTCSeconds();
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
setTimeout(startTime, 1000);
}
function checkTime(h) {
if (h < 10) {h = "0" + h}; // add zero in front of numbers < 10
return h;
}
startTime();
<div id="txt"></div>

Two almost identical bits of js, only one working

I'm (very) new to javascript, would appreciate someone explaining how I could fix this.
I have two very similar bits of code for a digital clock - difference is that one is an hour ahead of the other. (var time = h + 1 in one, and var time = h in the other)
When I put both on the same page, only one runs.
First bit of code:
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var session = " WST";
if(h == 0){
h = 12;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
var time = h + 1 + ":" + m + "" + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
</script>
Second bit of code:
<script>
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var session = " GMT";
if(h == 0){
h = 12;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
var time = h + ":" + m + "" + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
</script>
The html I use with these is:
<div id="MyClockDisplay” class="clock" onload="showTime()"></div>
🤞 someone can help me - many thanks in advance.

The code itself works fine. You have to be more specific about "what" does not work.
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var session = " WST";
if(h == 0){
h = 12;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
var time = h + 1 + ":" + m + "" + session;
console.log(time);
}
function showTime2(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var session = " GMT";
if(h == 0){
h = 12;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
var time = h + ":" + m + "" + session;
console.log(time);
}
showTime();
showTime2();

Javascript toggling time type

So recently, for fun and to learn more about Javascript since I haven't ever done much web development, I've been making a site which will function as a clock which picks a color by making a color hex code from the time. Fairly basic, but I'm having a bit of an issue with a feature I want to implement.
A feature I'd like to have is to use a button on the webpage to toggle between UTC and local time. To accomplish this, I have the button (onclick) multiply a number by -1, to have a positive and negative representing each state. I have verified through console.log that the value itself is changed, but there is no visible change in the time being displayed.
So, I'd appreciate it if someone could take a look. Perhaps I'm misunderstanding how the code itself flows, or repeats.
Thanks! I can put up the HTML if need be, but I think only the JS will be necessary.
var h, m, s;
window.onload = function startTime() {
var today = new Date();
var buttonHasBeenPressed = -1; // -1 = false
document.getElementById("utcbtn").onclick = function() {
buttonHasBeenPressed = buttonHasBeenPressed * -1; // reverses value
console.log(buttonHasBeenPressed);
}
if (buttonHasBeenPressed == 1) {
getUTCTime(today);
} else {
getNormalTime(today);
}
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
var timeString = "" + h + ":" + m + ":" + s;
var colorString = "#" + h + m + s;
document.getElementById("main").innerHTML = timeString;
document.getElementById("hexcolor").innerHTML = colorString;
document.body.style.backgroundColor = colorString;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
function getUTCTime(today) {
h = today.getUTCHours();
m = today.getUTCMinutes();
s = today.getUTCSeconds();
}
function getNormalTime(today) {
h = today.getHours();
m = today.getMinutes();
s = today.getSeconds();
}
Like I said as far as javascript I'm pretty much a novice, so this code probably isn't all that great - suggestions to improve it are always welcome!

The reason your code is not changing from UTC to normal time, is because you are setting a timeout for var t = setTimeout(startTime, 500);. In startTime you are immediately setting it to -1 var buttonHasBeenPressed = -1; // -1 = false. So each time it runs you set it back to -1. If you move the var buttonHasBeenPressed = -1; // -1 = false outside of the startTime function it will work. See updated code.
var h, m, s;
var buttonHasBeenPressed = -1; // -1 = false
window.onload = function startTime() {
var today = new Date();
document.getElementById("utcbtn").onclick = function() {
buttonHasBeenPressed = buttonHasBeenPressed * -1; // reverses value
console.log(buttonHasBeenPressed);
}
if (buttonHasBeenPressed == 1) {
getUTCTime(today);
} else {
getNormalTime(today);
}
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
var timeString = "" + h + ":" + m + ":" + s;
var colorString = "#" + h + m + s;
document.getElementById("main").innerHTML = timeString;
document.getElementById("hexcolor").innerHTML = colorString;
document.body.style.backgroundColor = colorString;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i
}; // add zero in front of numbers < 10
return i;
}
function getUTCTime(today) {
h = today.getUTCHours();
m = today.getUTCMinutes();
s = today.getUTCSeconds();
}
function getNormalTime(today) {
h = today.getHours();
m = today.getMinutes();
s = today.getSeconds();
}
Edit:
I would also make buttonHasBeenPressed a boolean and setup a init() function where you add the onclick handler and start startTime so you are not adding the onclick handler each time.
var h, m, s;
var buttonHasBeenPressed = false;
window.onload = init;
function init() {
document.getElementById("utcbtn").onclick = function() {
buttonHasBeenPressed = !buttonHasBeenPressed;
console.log(buttonHasBeenPressed);
}
startTime();
}
function startTime() {
var today = new Date();
if (buttonHasBeenPressed) {
getUTCTime(today);
} else {
getNormalTime(today);
}
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
var timeString = "" + h + ":" + m + ":" + s;
var colorString = "#" + h + m + s;
document.getElementById("main").innerHTML = timeString;
document.getElementById("hexcolor").innerHTML = colorString;
document.body.style.backgroundColor = colorString;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i
}; // add zero in front of numbers < 10
return i;
}
function getUTCTime(today) {
h = today.getUTCHours();
m = today.getUTCMinutes();
s = today.getUTCSeconds();
}
function getNormalTime(today) {
h = today.getHours();
m = today.getMinutes();
s = today.getSeconds();
}

buttonHasBeenPressed and setTimeout should not have been local to the startTime function.
Here's a working JSFiddle.

show time in HH:MM only in this javascript code [duplicate]

This question already has answers here:
Current time formatting with Javascript
(16 answers)
Closed 8 years ago.
The following JS shows the time in HH:MM:SS format while I need it to show HH:MM only
setInterval(function() {
var d = new Date();
var t = d.getTime();
var interval = 5*60*1000;
var last = t - t % interval;
var next = last + interval + 10*60000;
d.setTime(next);
var time = d.toLocaleTimeString();
$(".clock").html(time);
}, 1000);
Any idea on how to achieve that?
Fiddle: http://jsfiddle.net/7z9boag8/

There's getHours() and getMinuets() methods available.
example:
http://jsfiddle.net/0todu2y7/
jQuery(function($) {
setInterval(function() {
var d = new Date();
var t = d.getTime();
var interval = 5*60*1000;
var last = t - t % interval;
var nextt = last + interval + 5*60000;
d.setTime(nextt);
var hours = d.getHours();
var min = d.getMinutes();
$(".clock").html(hours+":"+min);
}, 1000);
});

i am sorry . i m not edit your code . i just give you another procedure
String.prototype.toHHMMSS = function () {
var sec_num = parseInt(this, 10); // don't forget the second param
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
if (hours < 10) {hours = "0"+hours;}
if (minutes < 10) {minutes = "0"+minutes;}
if (seconds < 10) {seconds = "0"+seconds;}
var time = hours+':'+minutes+':'+seconds;
return time;
}
Second Formula is
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function yourTime() {
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('time').innerHTML = h + ":" + m + ":" + s;
t = setTimeout(function () {
startTime()
}, 500);
}
yourTime();

Try this:
var time = d.toLocaleTimeString().match(/(\d+:\d+):\d+( \w{2})*/);
var time = time[1] + (time[2] ? time[2] : "");

setInterval(function() {
var d = new Date();
var t = d.getTime();
var interval = 5*60*1000;
var last = t - t % interval;
var next = last + interval + 10*60000;
d.setTime(next);
var time = d.toLocaleTimeString().split(':')
time.pop()
time.join(':')
$(".clock").html(time);
}, 60000);
I don't think that u shuold run tins function every second. U may do it once in minute.

How to make time function update itself?

When I load this in a browser it'll show the time it was when page was fully loaded, but won't update itself every second. How do I do this?
var h = date.getHours(); if(h<10) h = "0"+h;
var m = date.getMinutes(); if(m<10) m = "0"+m;
var s = date.getSeconds(); if(s<10) s = "0"+s;
document.write(h + " : " + m + " : " + s);

Use setInterval:
setInterval(clock, 1000);
function clock() {
var date = new Date();
var h = date.getHours(); if(h<10) h = "0"+h;
var m = date.getMinutes(); if(m<10) m = "0"+m;
var s = date.getSeconds(); if(s<10) s = "0"+s;
document.write(h + " : " + m + " : " + s);
}
Although you probably want to update a HTML element rather than document.write to the page every second.
http://jsfiddle.net/bQNwJ/

Wrap it up in a function and let it call itself:
everysecond=1000; // milliseconds
function showCurrentTime(){
/*do your timing stuff here */
if(someConditionIsntMet) setTimeout(showCurrentTime, everysecond)
}