How can i get the time to update without refreshing - javascript

So the code/script is below. I want it to update without having to refresh the page. I tried putting it in a loop but the page just never loaded. Can anyone help?
Thanks
var dt = new Date();
document.getElementById("datetime").innerHTML = (("0" + dt.getDate()).slice(-2)) + "." + (("0" + (dt.getMonth() + 1)).slice(-2)) + "." + (dt.getFullYear()) + " " + (("0" + dt.getHours()).slice(-2)) + ":" + (("0" + dt.getMinutes()).slice(-2)) + ":" + (("0" + dt.getSeconds()).slice(-2)) + ":" + (("0" + dt.getMilliseconds()).slice(-2));
setinterval(timer, 1000);

Modify the code like this
setInterval(function(){
var dt = new Date();
document.getElementById("datetime").innerHTML = (("0"+dt.getDate()).slice(-2)) +"."+ (("0"+(dt.getMonth()+1)).slice(-2)) +"."+(dt.getFullYear()) +" "+ (("0"+dt.getHours()).slice(-2)) +":"+ (("0"+dt.getMinutes()).slice(-2)) +":"+ (("0"+dt.getSeconds()).slice(-2)) +":"+ (("0"+dt.getMilliseconds()).slice(-2));
}, 1);
<div id="datetime">
</div>

This will also work
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
ref: https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock

Related

JavaScript is appending to a Div tag but with some strange behaviour

I have a script that for every click of the button takes the time, applies #gmail.com to the end and appends it to a defined div tag.
where the problem lies is that every time i hit the button, the first line changes to the current time, an additional line is appended each time with the correct details and they don't update it is just the first line.
can someone suggest a way to stop the first line from updating each time?
function Time() {
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth() + 1; //January is 0!
var yy = d.getFullYear().toString().substr(2, 2);
var j = document.getElementById("demo").innerHTML = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "#gmail.com<br />";
$(document).ready(function() {
$("button").click(function() {
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
$("#demo").append(j);
});
});
return j;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h2>Click to generate time</h2>
<button onclick="Time()">Generate</button>
<div id="demo"></div>
What I expect to happen each time i press the button is for it to append the following:
2591695115#gmail.com
2591695116#gmail.com
2591695117#gmail.com
2591695118#gmail.com
...etc
You are calling Time() onclick in your HTML. You do not need to say $("button").click again in your jquery.
Also, you do not need document.getElementById("demo").innerHTML when assiging the string to var j.
See the following code:
function Time() {
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth() + 1; //January is 0!
var yy = d.getFullYear().toString().substr(2, 2);
var j = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "#gmail.com<br />";
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
$("#demo").append(j);
return j;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h2>Click to generate time</h2>
<button onclick="Time()">Generate</button>
<div id="demo"></div>
You just need to append the result from Time function.
$(document).ready(function () {
$("button").click(function () {
$("#demo").append(Time());
});
});
function Time() {
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth() + 1; //January is 0!
var yy = d.getFullYear().toString().substr(2, 2);
var j = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "#gmail.com<br />";
return j;
}
This should work. The problem was the structure of your function. I took the button click outside of the Time() function and also changed var j to only declare the time instead of also already adding it to the HTML.
Also, by declaring var j after your if statements the date now displays correctly.
function Time() {
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth() + 1; //January is 0!
var yy = d.getFullYear().toString().substr(2, 2);
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
var j = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "#gmail.com<br />";
$("#demo").append(j);
}
$("button").click(function() {
Time();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h2>Click to generate time</h2>
<button>Generate</button>
<div id="demo"></div>

SetInterval Javascript not working- showing blank

I want to create a clock that will update itself every second.
For some reason when I try to run the code I get a blank page.
this is the Javascript part:
function test()
{
var today = new Date();
var day = today.getDate();
var month = today.getMonth();
var year = today.getFullYear();
var hr = today.getHours();
var mins = today.getMinutes();
var sec = today.getSeconds();
document.body.innerHTML = day + "/" + month + "/" + year + " " + hr + ":" + mins + ":" + secs;
}
setInterval(test, 1000);
this is the HTML part:
<html lang="en">
<head>
</head>
<body name="body">
<script type="text/javascript" src="JS-test.js"></script>
</body>
</html>
I've tried a few other variations and none seam to work.
How do I fix it to actually display something?
thanks in advance.
(I am a newbie in javascript)
Change secs to sec
var sec = today.getSeconds();
document.body.innerHTML = day + "/" + month + "/" + year + " " + hr + ":" + mins + ":" + sec;
The script should be written within <script></script>
and secondly, its sec not secs in your last statement of that function.. It works fine.
function test()
{
var today = new Date();
var day = today.getDate();
var month = today.getMonth();
var year = today.getFullYear();
var hr = today.getHours();
var mins = today.getMinutes();
var sec = today.getSeconds();
document.body.innerHTML = day + "/" + month + "/" + year + " " + hr + ":" + mins + ":" + sec;
}
setInterval(test, 1000);
Maybe a little change in your function...
document.onload=setInterval(test,1000);
and do the sec/secs change in your variable declaration

JS: Formatting time and date display on website

I have a script that prints the current date and time in JavaScript, but when it prints time, it's missing one 0. Here is the code:
var currentdate = new Date();
var datetime = "0" + currentdate.getDate() + ".0"
+ (currentdate.getMonth()+1) + "."
+ currentdate.getFullYear() + " "
+ currentdate.getHours() + ":"
+ currentdate.getMinutes();
document.write(datetime);
It should print 04.03.2016 15:04 and prints 04.03.2016 15:4.
Two digit minutes print fine.
Any leads?
Try this
var formatDateDigit = function (i) {
return i <= 9 ? ("0" + i) : i;
};
var currentdate = new Date();
var datetime = formatDateDigit(currentdate.getDate()) + "."
+ formatDateDigit(currentdate.getMonth()+1) + "."
+ currentdate.getFullYear() + " "
+ formatDateDigit(currentdate.getHours()) + ":"
+ formatDateDigit(currentdate.getMinutes());
document.getElementById('my_output_here').innerHTML = datetime;
<div id="my_output_here"></div>

Format JavaScript Date as Hours:Minutes:Seconds

I have this code and I cannot get the second time to format properly:
setInterval(function() {
var local = new Date();
var localdatetime = local.getHours() + ":" + local.getMinutes() + ":" + local.getSeconds();
var remote = new Date();
var remotedatetime = remote.getHours() + ":" + remote.getMinutes() + ":" + remote.getSeconds();
var remoteoffset = remote.setHours(local.getHours() - 5);
$('#local-time').html(localdatetime);
$('#remote-time').html(remoteoffset);
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My Time:
<div id="local-time"></div>
Their time:
<div id="remote-time"></div>
local-time is perfect and displays "hh:mm:ss"
remote-time just displays a list of random numbers.
How can I make remote-time "hh:mm:ss", too?
You're adjusting remote after getting its string representation, so that's doing you no good.
Then you're displaying the result of setHours() (milliseconds since January 1, 1970) rather than the string.
This is what I think you're aiming for:
setInterval(function() {
var local = new Date();
var localdatetime = local.getHours() + ":" + pad(local.getMinutes()) + ":" + pad(local.getSeconds());
var remote = new Date();
remote.setHours(local.getHours() - 5);
var remotedatetime = remote.getHours() + ":" + pad(remote.getMinutes()) + ":" + pad(remote.getSeconds());
$('#local-time').html(localdatetime);
$('#remote-time').html(remotedatetime);
}, 1000);
function pad(t) {
var st = "" + t;
while (st.length < 2)
st = "0" + st;
return st;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My Time:
<div id="local-time"></div>
Their time:
<div id="remote-time"></div>
setInterval(function() {
var local = new Date();
var localdatetime = local.getHours() + ":" + local.getMinutes() + ":" + local.getSeconds();
var remote = new Date();
remote.setHours(local.getHours() - 5);
var remotedatetime = remote.getHours() + ":" + remote.getMinutes() + ":" + remote.getSeconds();
$('#local-time').html(localdatetime);
$('#remote-time').html(remotedatetime);
},1000);

Newline in Javascript for Mozilla Firefox

Example which is not working:
<div id="clockDisplay"></div>
<script type="text/javascript" language="javascript">
function renderTime() {
var currentTime = new Date();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
setTimeout('renderTime()',1000);
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 = 'Local time:\n' + h + ":" + m + ":" + s;
myClock.innerText = 'Local time:\n'+ h + ":" + m + ":" + s;
}
renderTime();
</script>..
The ---> myClock.innerText = 'Local time:\n'+ h + ":" + m + ":" + s; <---
separates Local time from the digits in Chrome.
However ---> myClock.textContent = 'Local time:\n' + h + ":" + m + ":" + s; <---
is supposed to do the same just in Firefox but it doesn't work.
I have tried with \n\r, \r\n, /\n/ and /\r/ Nothing worked for me..
Use <br> as line break. HTML collapses whitespace:
myClock.innerHTML = 'Local time:<br>' + h + ":" + m + ":" + s;

Categories