Make clock running - javascript

I would like the time to reset every second so the clock becomes a running one. I'm a javascript noob and I couldn't find any solution anywhere.
<!--
var currentDate = new Date()
var day = currentDate.getDate()
var month = currentDate.getMonth() + 1
var year = currentDate.getFullYear()
document.write("<b>" + day + "/" + month + "/" + year + "</b>")
//-->
<!--
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var seconds = currentTime.getSeconds()
if (minutes < 10)
minutes = "0" + minutes
if (seconds < 10)
seconds = "0" + seconds
document.write(hours + ":" + minutes + ":" + seconds)

var myInterval = window.setInterval(function() {
window.document.write(hours + ":" + minutes + ":" + seconds);
}, 1000);
Later you can stop it with
window.clearInterval(myInterval);
We assign the return value of setInterval (an ID in the form of a number) to a variable because we'll need it later to stop our particular interval using the clearInterval function. If we don't do that, there will be no way (without certain hacks) to stop the interval.

For that you need to use the window.setInterval method. Please look at this page for more information: http://www.w3schools.com/js/js_timing.asp

Related

I nee to add "0" before minutes <10 in Typescript

I need to display the time and the minutes are not working correctly. It is returning 12:4, 2:3..when the minutes are less than 10 there is not 0. I tried adding the "0" like this:
var formattedTime = new Date(time + 'z');
var hours = formattedTime.getHours();
var amOrPm = hours >= 12 ? 'PM' : 'AM';
hours = (hours % 12) || 12;
var minutes = formattedTime.getMinutes();
if (minutes < 10) {
("0" + minutes)
};
var finalTime = eventDate +" "+ hours + ":" + minutes + " " + amOrPm;
Any help is welcome(I am new to coding). Thank You.
The statement ("0" + minutes) doesn't do anything. It does add a '0' to minutes, but you're not doing anything with the result. The problem is that you need to set the result of this statement in a new variable.
But here's an easier way to do this:
const minutes = 5;
const minuteStr = minutes.toString().padStart(2, '0');

Converting unix timestamp into time

So I want to convert unix timestamp into date time object, I am trying to do this with :
async function getTime(unix){
var date = new Date(unix * 1000);
var hours = date.getHours();
var mins = "0" + date.getMinutes();
var secs = "0" + date.getSeconds();
var formattedTime = hours + ':' + mins.substr(-2) + ':' + secs.substr(-2);
}
but I keep getting
Promise { undefined }
on the table. can someone please tell me how to fix this?
So far as I can see your function, you don't return anything. You have to return the variable that you want. Also, there are no async calls within this function so it seems useless to make this an async function.
To add to this, the variable you want to return is probably formattedTime.
function getTime(unix) {
const date = new Date(unix * 1000);
const hours = date.getHours();
const mins = "0" + date.getMinutes();
const secs = "0" + date.getSeconds();
return hours + ':' + mins.substr(-2) + ':' + secs.substr(-2);
}
Please note: I am using const, may that not be possible to use, use var instead.

i want to display AM / PM using javascript [duplicate]

This question already has answers here:
How do I format a date in JavaScript?
(68 answers)
Closed 3 years ago.
i try to disply time with the showing AM / PM format but i am unable to find any code can you please guide me
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
document.getElementById("dt").innerHTML = time;
<p id='dt'></p>
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds()+" ";
time+= dt.getHours()>=12?"PM":"AM"
document.getElementById("dt").innerHTML = time;
<div id="dt"></div>
Just check if the value less than 12, and keep the hours under 12 and return 12 instead of 0 by: (hours %12 || 12):
var dt = new Date();
var time = (dt.getHours()%12||12) + ":" + dt.getMinutes() + ":" + dt.getSeconds() + " " + (dt.getHours() < 12)===0?"AM" : "PM";
document.getElementById("dt").innerHTML = time;
Just compare the hours to if its less than 12 and if so set a variable to either AM or PM. Note that the following has the leading 0 added to the mins and secs if required (the slice will only include the 0 if the length of the value is 1).
var dt = new Date();
var hrs = dt.getHours();
var hours = hrs % 12;
var mins = '0' + dt.getMinutes();
var minutes = mins.slice(-2);
var secs = '0' + dt.getSeconds();
var seconds = secs.slice(-2);
var amPm = hrs< 12 ? 'AM' : 'PM';
var time = hours + ":" + minutes + ":" + seconds + ' ' + amPm;
document.getElementById("dt").innerHTML = time;
<p id = "dt"></p>

I want to run a timer after getting time from firebase-database, how to decease time by one second using setInterval() in ReactJS

For auction web app I want to run a timer after getting time from firebase-database, how to decrease time by one second using setInterval() in ReactJS
I tried below code that is increasing time but I want decrease
function display()
{
var today = new Date();
var month = today.getMonth();
var day = today.getDay();
var year = today.getFullYear();
var hour = today.getHours() > 12 ? today.getHours() - 12 : today.getHours();
var minute = today.getMinutes();
var seconds = today.getSeconds();
var output = month + '/' + day + '/' + year + ' - ' +
hour + ':' + minute + ':' + seconds + ':';
console.log(output)
}
var timer = setInterval(display,1000)
console.log(timer)
You need to compare against some time when working with setInterval in this fashion. The time returned from the server is perfect for this. The psuedo-code is provided
setInterval(function() {
var difference = timeFromServer - Date.now();
console.log(formatDate(difference));
}, 1000);

Javascript time keeper fails to update correctly

I constructed a small clock out of Javascript code, and it fails to update correctly. It display's the time fine, but you have to refresh the page in order to get the clock to update correctly. Is there a way I can have my code update automatically without having to update the page every time?
Picture:
<script type="text/javascript">
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10)
minutes = "0" + minutes
var suffix = "AM";
if (hours >= 12) {
suffix = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}
document.write("<b>" + hours + ":" + minutes + " " + suffix + "</b>")
</script>
First of all, you could wrap your code in a function, say, currentTime(), changing the document.write call to a return statement, so you have a function currentTime() that returns the updated string. Then save somewhere a handle to an HTML element where you want to show the updated time, like el = document.getElementById('time'), and then use an interval like so
setInterval(function () {
el.innerHTML = currentTime();
}, 5000);
function UpdateClock(){
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
if (minutes < 10)
minutes = "0" + minutes
var suffix = "AM";
if (hours >= 12) {
suffix = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}
//document.write("<b>" + hours + ":" + minutes + " " + suffix + "</b>");
document.getElementById('myClock').innerHTML = "<b>" + hours + ":" + minutes + " " + suffix + "</b>";
}
setInterval(function(){ UpdateClock(); }, 6000);
HTML:
<div id="myClock"></div>

Categories

Resources