Basically I want to have a live clock, one that updates every second! I've looked around and couldn't find something that has worked. Here is what I have tried:
function doDate()
{
var str = "";
var days = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var now = new Date();
str += "Today is: " + days[now.getDay()] + ", " + now.getDate() + " " + months[now.getMonth()] + " " + now.getFullYear();
var updateTime = function() { setTimeout("doDate()", 1000); }
document.getElementById("todaysDate").innerHTML = str;
}
This does not seem to work! I presume there is something I have done right in here?
Please modify your code as follow:-
function doDate()
{
var str = "";
var days = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var now = new Date();
str += "Today is: " + days[now.getDay()] + ", " + now.getDate() + " " + months[now.getMonth()] + " " + now.getFullYear() + " " + now.getHours() +":" + now.getMinutes() + ":" + now.getSeconds();
document.getElementById("todaysDate").innerHTML = str;
}
setInterval(doDate, 1000);
<div id="todaysDate"></div>
This line of code has no effect:
var updateTime = function() { setTimeout("doDate()", 1000); }
You define function variable updateTime which make postponed invocation of doDate, but this variable is unused in your code.
Instead of this you have to call setTimeout immediately without wrapping it with function:
setTimeout(doDate, 1000);
following code might help you
function doDate()
{
var str = "";
var now = new Date();
str = now.toDateString() +' '+now.toLocaleTimeString() ;
document.getElementById("todaysDate").innerHTML = str;
}
setInterval(doDate, 1000);
Your setTimeout call is incorrect:
var updateTime = function() { setTimeout("doDate()", 1000); }
Should rather look like:
setTimeout(doDate, 1000);
When adding a callback, you should not call the function (and in this case, you should not add it as a string), add the function itself.
And the function you wrap it inside of is not needed, just call the setTimeout function right away.
function doDate() {
let currentDate = document.getElementById('currentDate');
let current = new Date();
currentDate.innerHTML = `Current Date and Time : <b>${current}</b> `;
}
setInterval(doDate, 1000);
<div id="currentDate"></div>
Related
<!DOCTYPE>
<html>
<head>
<script>
function displayDate() {
var date = new Date();
const monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const dayArray = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
var Date = date.getDate();
var month = monthArray[date.getMonth()];
var year = date.getFullYear();
var day = dayArray[date.getDay()];
var hours = date.getHours() % 12;
var minutes = date.getMinutes();
var amPm = "AM";
if (hours < 10) {
hours = "0" + hours;
}
if (date.getHours() > 12) {
amPm = "PM";
}
var str = Date + " " + month + " " + year + " " + day + " " + hours + ":" + minutes + " " + amPm;
document.getElementById("date1").value = str;
}
</script>
</head>
<body>
Current date: <input id="date1" type="text" size="30" onload="displayDate()">
</body>
</html>
Hi guys, I am trying to display the current date in the textbox. However, I can't seem to get it to work. When the program ran, the textbox did not display anything. I tried using a console.log function to print the output in the console but it didn't seem to work as well. Kindly advise for a solution, thank you.
You can remove the onload() and simply call your function when the window loads.
Something like that:
document.addEventListener("DOMContentLoaded", function() {
displayDate();
});
However, your code has a problem you should be aware of. You cannot name a variable with the name "Date" because this causes conflict with Global function Date(). Instead, rename your variable somehow else. I will include my code to show you what I mean.
<!DOCTYPE>
<html>
<head>
</head>
<body>
Current date: <input id="date1" type="text" size="30">
</body>
<script>
function displayDate() {
console.log("hey!");
let date = new Date();
const monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const dayArray = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
var theDate = date.getDate();
var month = monthArray[date.getMonth()];
var year = date.getFullYear();
var day = dayArray[date.getDay()];
var hours = date.getHours() % 12;
var minutes = date.getMinutes();
var amPm = "AM";
if (hours < 10) {
hours = "0" + hours;
}
if (date.getHours() > 12) {
amPm = "PM";
}
var str = theDate + " " + month + " " + year + " " + day + " " + hours + ":" + minutes + " " + amPm;
document.getElementById("date1").value = str;
}
document.addEventListener("DOMContentLoaded", function() {
displayDate();
});
</script>
</html>
I have the following code that I am using to display the current date and time, and I want it always updated so I have a setInterval to update it every second. This seems to be causing the page to be taking up 25% of the CPU and the memory it takes up just keeps climbing the longer the page is up.
Is there anything I can do to improve the performance of this?
jQuery(function($){
(function update_time(){
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var dt = new Date();
var hr = dt.getHours() > 12 ? dt.getHours() - 12 : dt.getHours();
var mi = dt.getMinutes() < 10 ? "0" + dt.getMinutes() : dt.getMinutes();
var sd = dt.getSeconds() < 10 ? "0" + dt.getSeconds() : dt.getSeconds();
var div = dt.getSeconds() & 1 ? ":" : " ";
$('.hour').text(hr);
$('.minute').text(mi);
$('.second').text(sd);
$('.day').text(days[dt.getDay()]);
$('.month').text(months[dt.getMonth()]);
$('.date').text(dt.getDate());
$('.year').text(dt.getFullYear());
$('.time-divider').text(div);
setInterval(update_time, 1000);
})();
});
Use setTimeout instead of setInterval.
The comments above have done a good job explaining why, but I'll reiterate.
Your current function will schedule a new setInterval every time it is called, on top of any existing ones. After just 5 seconds you'll have 32 intervals running. Every second this number doubles.
setTimeout executes its callback function once after a set amount of time. So after one second the timeout will fire and expire, the function will execute, and a new timeout will be created. Rinse and repeat.
jQuery(function($){
(function update_time(){
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var dt = new Date();
var hr = dt.getHours() > 12 ? dt.getHours() - 12 : dt.getHours();
var mi = dt.getMinutes() < 10 ? "0" + dt.getMinutes() : dt.getMinutes();
var sd = dt.getSeconds() < 10 ? "0" + dt.getSeconds() : dt.getSeconds();
var div = dt.getSeconds() & 1 ? ":" : " ";
$('.hour').text(hr);
$('.minute').text(mi);
$('.second').text(sd);
$('.day').text(days[dt.getDay()]);
$('.month').text(months[dt.getMonth()]);
$('.date').text(dt.getDate());
$('.year').text(dt.getFullYear());
$('.time-divider').text(div);
setTimeout(update_time, 1000);
})();
});
I am trying to enter the current date when the page loads. I am able to store it to a variable, I am just having trouble entering that variable onto the page.
HTML:
<span id='test'>x</span>
Javascript:
window.onload = function() {
var month = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth();
var currentMonth = month[mm];
var yyyy = today.getFullYear();
today = currentMonth + ' ' + dd + ', ' + yyyy;
document.getElementById('test').innertext() = today;
}
JSFIDDLE
Change this:
document.getElementById('test').innertext() = today;
for this:
document.getElementById('test').innerHTML = today;
Use this code, it works
window.onload = function() {
var month = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth();
var currentMonth = month[mm];
var yyyy = today.getFullYear();
today = currentMonth + ' ' + dd + ', ' + yyyy;
document.getElementById('test').innerHTML = today;
}
You have a problem at the following line of code because you treat the innerText property as if it was a function and you don't camel-case it (JavaScript is a case-sensitive language):
document.getElementById('test').innertext() = today;
So change it to:
document.getElementById('test').innerText = today;
Here is the working example: http://jsfiddle.net/ynevet/cNCf4/
This question already has answers here:
jQuery - Change 1-24 hour to 1-12 hour using .getHours() method?
(2 answers)
Closed 9 years ago.
I want to change my hours into 12hrs not 24hrs.
this is my code :
$(document).ready(function() {
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var newDate = new Date();
newDate.setDate(newDate.getDate());
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
setInterval(function() {
var seconds = new Date().getSeconds();
$("#sec").html((seconds < 10 ? "0" : "") + seconds);
}, 1000);
setInterval(function() {
var minutes = new Date().getMinutes();
$("#min").html((minutes < 10 ? "0" : "") + minutes);
}, 1000);
setInterval(function() {
var hours = new Date().getHours();
$("#hours").html((hours < 10 ? "0" : "") + hours);
}, 1000);
});
You are looking for this
newHours = (oldHours) % 12
if (newHours == 0) {
newHours = 12;
}
I know there are a few similar posts about this topic, but none were helping me much (or maybe that's cause I'm still a newbie).
Anyway, the thing I'm looking for is a script to show me the day and date + 11 days from now.
The script below is what I use to show the current day & date. So I figured there has to be some simple line to add or modify somewhere? like "+11"
Any helpful answer would be very very very much appreciated!
var daynames = new Array( "Sunday", "Monday", "Tuesday", "Wednesday","Thursday", "Friday", "Saturday");
var months = new Array( "january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december");
var currentTime = new Date();
var dayname = currentTime.getDay();
var month = currentTime.getMonth();
var day = currentTime.getDate();
var year = currentTime.getFullYear();
document.write(daynames[dayname] + "<BR> " + day + " " + months[month] + " " + year);
Assuming you are working on JavaScript, this snippet will set d to +11 days from current day -
var d = new Date();
d.setDate(d.getDate()+11);
Assuming javascript because of document.write
var yourDate=new Date();
yourDate.setDate(yourDate.getDate()+11); //11 is the number of days you want to add
Refer: getDate and setDate