Related
I know my attempt it terrible, but this is what I got. I'm trying to get the current date to display in this fashion: Monday, 19 February 2018. Can anyone fix this mess into a working Javascript code?
var dayname = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthname = new Array("January","February","March","April","May","June","July","August","September","October","November", "December");
var d=new Date();
var today = dayname[d.getDay()] + ", " + d.getDate() + " " + monthname[d.getMonth()] + " " + d.getFullYear();
document.getElementById('currentdate").innerHTML = today;
You have syntax error here 'currentdate" either use all "" or '' otherwise your code is working just fine...
var dayname = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthname = new Array("January","February","March","April","May","June","July","August","September","October","November", "December");
var d=new Date();
var today = dayname[d.getDay()] + ", " + d.getDate() + " " + monthname[d.getMonth()] + " " + d.getFullYear();
document.getElementById('currentdate').innerHTML = today;
// Put a ' instead of " ^ here
<div id="currentdate"></div>
The approach I would suggest you here is to still use moment.js
var date = moment().format("dddd, Do MMMM YYYY");
console.log(date);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
var dayname = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthname = new Array("January","February","March","April","May","June","July","August","September","October","November", "December");
var d=new Date();
var today = dayname[d.getDay()] + ", " + d.getDate() + " " + monthname[d.getMonth()] + " " + d.getFullYear();
document.getElementById("currentdate").innerHTML = today;
<span id="currentdate"></span>
document.getElementById('currentdate") this is the problem. you have used one ' and "
I'm still newbie and trying to make a simple website, one of my feature is calendar.
why is my function nextbutton() is not running?
I also need some critics where and what should i change in coding. thank you so much!
function calendar(){
date = new Date();
month = date.getMonth();
year = date.getFullYear();
var dayOfweek = date.getDay();
var day = date.getDate();
var nameOftheMonth = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
var nameOftheDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
var nextMonth = month+1;
var prevMonth = month-1;
var numberOfDays = new Date(year, month, 1).getDay();
var TotalNumOfDays = new Date(year, month+1, 0).getDate();
var num2 = numberOfDays+1;
var num = 1;
var content = "";
content += "<button><----</button><div>" + nameOftheMonth[month] + " " + year + "</div><button>----></button>";
content += "<br/><table><tr>";
for (count=0;count <= nameOftheDays.length-1; count++){
content += "<td>" + nameOftheDays[count] + "</td>";
if(count === nameOftheDays.length-1){
content += "</tr><tr>";
}
}
while (numberOfDays > 0) {
content += "<td></td>";
numberOfDays--;
}
while (num <= TotalNumOfDays){
content += "<td>" + num + "</td>";
if (num2 > 6) {
num2 = 0;
content += "</tr><tr>"
}
num2++;
num++;
}
document.getElementById("calendar").innerHTML = content;
document.getElementsByTagName("button")[0].setAttribute("id", "prevbutton");
document.getElementsByTagName("button")[0].setAttribute("onclick", "prevButton()");
document.getElementsByTagName("button")[1].setAttribute("id", "nextButton");
document.getElementsByTagName("button")[1].setAttribute("onclick", "nextButton()");
document.getElementsByTagName("div")[1].setAttribute("id", "dateToday");
}
function nextButton(){
if(month != null){
month = month++;
}
}
<div id="calendar"></div>
<script language="JavaScript">
var month=-1;
function calendar(){
date = new Date();
if(month===-1){
month =date.getMonth();
}
year = date.getFullYear();
var dayOfweek = date.getDay();
var day = date.getDate();
var nameOftheMonth = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
var nameOftheDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
var nextMonth = month+1;
var prevMonth = month-1;
var numberOfDays = new Date(year, month, 1).getDay();
var TotalNumOfDays = new Date(year, month+1, 0).getDate();
var num2 = numberOfDays+1;
var num = 1;
var content = "";
content += "<button><----</button><div>" + nameOftheMonth[month] + " " + year + "</div><button>----></button>";
content += "<br/><table><tr>";
for (count=0;count <= nameOftheDays.length-1; count++){
content += "<td>" + nameOftheDays[count] + "</td>";
if(count === nameOftheDays.length-1){
content += "</tr><tr>";
}
}
while (numberOfDays > 0) {
content += "<td></td>";
numberOfDays--;
}
while (num <= TotalNumOfDays){
content += "<td>" + num + "</td>";
if (num2 > 6) {
num2 = 0;
content += "</tr><tr>"
}
num2++;
num++;
}
document.getElementById("calendar").innerHTML = content;
document.getElementsByTagName("button")[0].setAttribute("id", "prevbutton");
document.getElementsByTagName("button")[0].setAttribute("onclick", "prevButton()");
document.getElementsByTagName("button")[1].setAttribute("id", "nextButton");
document.getElementsByTagName("button")[1].setAttribute("onclick", "nextButton()");
document.getElementsByTagName("div")[1].setAttribute("id", "dateToday");
}
function nextButton(){
if(month != null){
document.getElementById("calendar").innerHTML ="";
month++;
calendar()
}
}
</script>
Try this out. I pulled the vars out of the calendar() function, and set your nextButton() function (which works, by the way, just do a console.log to see) to call the calendar function every time. Also, to increment, just do var++
var date = new Date();
var month = date.getMonth();
var year = date.getFullYear();
function calendar(month) {
var dayOfweek = date.getDay();
var day = date.getDate();
var nameOftheMonth = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
var nameOftheDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
var nextMonth = month + 1;
var prevMonth = month - 1;
var numberOfDays = new Date(year, month, 1).getDay();
var TotalNumOfDays = new Date(year, month + 1, 0).getDate();
var num2 = numberOfDays + 1;
var num = 1;
var content = "";
content += "<button><----</button><div>" + nameOftheMonth[month] + " " + year + "</div><button>----></button>";
content += "<br/><table><tr>";
for (count = 0; count <= nameOftheDays.length - 1; count++) {
content += "<td>" + nameOftheDays[count] + "</td>";
if (count === nameOftheDays.length - 1) {
content += "</tr><tr>";
}
}
while (numberOfDays > 0) {
content += "<td></td>";
numberOfDays--;
}
while (num <= TotalNumOfDays) {
content += "<td>" + num + "</td>";
if (num2 > 6) {
num2 = 0;
content += "</tr><tr>"
}
num2++;
num++;
}
document.getElementById("calendar").innerHTML = content;
document.getElementsByTagName("button")[0].setAttribute("id", "prevbutton");
document.getElementsByTagName("button")[0].setAttribute("onclick", "prevButton()");
document.getElementsByTagName("button")[1].setAttribute("id", "nextButton");
document.getElementsByTagName("button")[1].setAttribute("onclick", "nextButton()");
document.getElementsByTagName("div")[1].setAttribute("id", "dateToday");
}
function nextButton() {
if (month != null) {
console.log(month);
month++;
calendar(month);
}
}
<body onload="calendar(month)">
<div id="calendar">
</div>
<div id="today">
</div>
</body>
nextButton click is not working because it is a dynamically created element.
So we need to attach the click listeners on newly created DOM elements using, addEventListener.
document.getElementsByTagName("button")[1].addEventListener('click', yourFunction);
I have used simple JS prototyping to modify the code slightly, this way you can add more methods to your calendar and have multiple instances of it.
function Calendar(month,date,year) {
this.month = month, this.date = date, this.year = year;
this.nameOftheMonth = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
this.nameOftheDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
}
Calendar.prototype.init = function() {
this.date = new Date();
this.month = this.date.getMonth();
this.year = this.date.getFullYear();
this.render();
}
Calendar.prototype.render = function() {
var dayOfweek = this.date.getDay();
var day = this.date.getDate();
var nextMonth = this.month+1;
var prevMonth = this.month-1;
var numberOfDays = new Date(this.year, this.month, 1).getDay();
var TotalNumOfDays = new Date(this.year, this.month+1, 0).getDate();
var num2 = numberOfDays+1;
var num = 1;
var content = "";
content += "<button><----</button><div>" + this.nameOftheMonth[this.month] + " " + this.year + "</div><button>----></button>";
content += "<br/><table><tr>";
for (count=0;count <= this.nameOftheDays.length-1; count++){
content += "<td>" + this.nameOftheDays[count] + "</td>";
if(count === this.nameOftheDays.length-1){
content += "</tr><tr>";
}
}
while (numberOfDays > 0) {
content += "<td></td>";
numberOfDays--;
}
while (num <= TotalNumOfDays){
content += "<td>" + num + "</td>";
if (num2 > 6) {
num2 = 0;
content += "</tr><tr>"
}
num2++;
num++;
}
document.getElementById("calendar").innerHTML = content;
document.getElementsByTagName("button")[0].setAttribute("id", "prevbutton");
document.getElementsByTagName("button")[1].setAttribute("id", "nextButton");
document.getElementsByTagName("button")[0].addEventListener('click', (function() {
this.prevButton();
}).bind(this));
document.getElementsByTagName("button")[1].addEventListener('click', (function() {
this.nextButton();
}).bind(this));
document.getElementsByTagName("div")[1].setAttribute("id", "dateToday");
}
Calendar.prototype.nextButton = function(){
if(this.month !== null){
this.month += 1;
this.render();
}
}
Calendar.prototype.prevButton = function(){
if(this.month !== null){
this.month -= 1;
this.render();
}
}
var c =new Calendar();
c.init();
<div id="calendar">
</div>
So I have a script that basically refreshes the time consistently so the user sees the time with the seconds/mins/h etc. adding up.
For some reason, sometimes when I load the page it works, but most of the time no. This is very unusual and I'm wondering if anyone would have an input.
For styling purposes, the em tag really needs to stay in h1.
Here's my code:
<head>
<link rel="stylesheet" type="text/css" href="styling.css">
<h1>The Trade Shack<em id="demo"></em></h1>
<title>Homepage</title>
<script>
function getCurrentDate(){
var fullDate = new Date();
var day = fullDate.getDay();
var stringDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var month = fullDate.getMonth();
var stringMonth = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var numDay = fullDate.getDate();
var year = fullDate.getFullYear();
var hour = fullDate.getHours();
var minute = fullDate.getMinutes();
var second = fullDate.getSeconds();
document.getElementById("demo").innerHTML = stringDays[day] + ", " + stringMonth[month] + " " + numDay + ", " + year + ", " + hour + ":" + minute + ":" + second;
}
setInterval(getCurrentDate,1000);
</script>
</head>
Wrap your setInterval in window.onload.
...
window.onload=function(){
setInterval(getCurrentDate,1000);
};
Additionally, to fix some problems you might have with your html later, move your <h1> from <head> to <body>.
First of all you should remove the h1 element (and all inside of it) and put that on the body tag of your document, then use the window.onload event and that's where you're going to call this pice of code setInterval(getCurrentDate,1000);
You can check here for use the window.onload
http://www.w3schools.com/jsref/event_onload.asp
I hope it works :)
Ensure the function works even if 'demo' is not found. Otherwise it can cause a blocking error and prevent further execution. And put <h1> within the body rather than the head.
<head>
<link rel="stylesheet" type="text/css" href="styling.css"/>
<title>Homepage</title>
<script>
function getCurrentDate() {
var demo = document.getElementById("demo");
if (!demo) {return;}
var fullDate = new Date();
var day = fullDate.getDay();
var stringDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var month = fullDate.getMonth();
var stringMonth = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var numDay = fullDate.getDate();
var year = fullDate.getFullYear();
var hour = fullDate.getHours();
var minute = fullDate.getMinutes();
var second = fullDate.getSeconds();
demo.innerHTML = stringDays[day] + ", " + stringMonth[month] + " " + numDay + ", " + year + ", " + hour + ":" + minute + ":" + second;
}
setInterval(getCurrentDate, 1000);
</script>
</head>
<body>
<h1>The Trade Shack<em id="demo"></em></h1>
<!--More HTML here-->
</body>
Below is the javascript for my clock on my website, it is set 2 weeks into the future however for some reason I am now getting an alert and the letterspacing (to make the calender look more square) is not working either. Can somebody please tell me why this would be? Nothing has changed and it was working perfectly grrrrrrrrrrrrr.
I repeat it worked perfectly and the letters were nicely spaced to make the whole time and date block look like a minimalist square. It is obviously something to do with this line
if(date > day && date > time){
but I do not know how to fix it.
I also have a livelink here. this will be removed for future posterity of the post.
THE JAVASCRIPT IS BELOW
tday = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
tmonth = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
function GetClock() {
var d = new Date(+new Date + 12096e5);
var dx = d.toGMTString();
dx = dx.substr(0, dx.length - 3);
d.setTime(Date.parse(dx))
d.setSeconds(d.getSeconds() + 0);
var nday = d.getDay(),
nmonth = d.getMonth(),
ndate = d.getDate(),
nyear = d.getYear(),
nhour = d.getHours(),
nmin = d.getMinutes(),
nsec = d.getSeconds(),
ap;
if (nhour == 0) {
ap = " AM";
nhour = 12;
} else if (nhour < 12) {
ap = " AM";
} else if (nhour == 12) {
ap = " PM";
} else if (nhour > 12) {
ap = " PM";
nhour -= 12;
}
if (nyear < 1000) nyear += 1900;
if (nmin <= 9) nmin = "0" + nmin;
if (nsec <= 9) nsec = "0" + nsec;
document.getElementById('day').innerHTML = "" + tday[nday].toUpperCase() + "";
document.getElementById('time').innerHTML = "" + nhour + ":" + nmin + ":" + nsec + "";
document.getElementById('hour').innerHTML = "" + ap + "";
document.getElementById('date').innerHTML = "" + tmonth[nmonth].toUpperCase() + " " + ndate + ", " + nyear + "";
}
window.onload = function () {
GetClock();
setInterval(GetClock, 1000);
var day = $('#day').width();
var time = $('#time').width() + $('#hour').width() + 10;
var date = $('#date').width();
if(date > day && date > time){
***alert('why does this damn alert keep appearing!! Also my letter spacing isnt working anymore yet the code is untouched!');***
}else if (time > day && time > date){
var lengthDay = $('#day').html().length-1;
var differenceDay = time-day;
var letterDay = differenceDay / lengthDay;
var lengthDate = $('#date').html().length-1;
var differenceDate = time-date;
var letterDate = differenceDate / lengthDate;
$('#day').css({'letter-spacing':letterDay});
$('#date').css({'letter-spacing':letterDate});
}else{
alert('day');
}
}
CSS
.clock {
color:#bbb;
font-size: 44px;
}
#day{
display:inline-block;
}
#time {
display:inline-block;
letter-spacing:3px;
}
#hour {
margin-left:10px;
display:inline-block;
font-size:28px;
}
#date {
font-size:30px;
display:inline-block;
}
.text {
color:#bbb;
font-size: 24px;
}
for sanity sake i warped the time in a span. I tried removing the if statement. So the altered onload JS now looks like this
HTML
<div class="text">GET YOUR CAR BY</div>
<div class="clock" id="day"></div><br>
<span id="timeHour">
<div class="clock" id="time"></div>
<div class="clock" id="hour"></div>
</span> <br>
<div class="clock" id="date"></div>
JS
window.onload = function () {
GetClock();
setInterval(GetClock, 1000);
var day = $('#day').width();
var time = $('#timeHour').outerWidth();
var date = $('#date').width();
var lengthDay = $('#day').html().length-1;
var differenceDay = time-day;
var letterDay = differenceDay / lengthDay;
var lengthDate = $('#date').html().length-1;
var differenceDate = time-date;
var letterDate = differenceDate / lengthDate;
$('#day').css({'letter-spacing':letterDay});
$('#date').css({'letter-spacing':letterDate});
}
it seems to work for me. the day and the date now follow the size of the hour. Is that what your looking for?
Whole file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<style>
* {
font-family: 'Open Sans', sans-serif;
}
.clock {
color:#bbb;
font-size: 44px;
}
#day{
display:inline-block;
}
#time {
display:inline-block;
letter-spacing:3px;
}
#hour {
margin-left:10px;
display:inline-block;
font-size:28px;
}
#date {
font-size:30px;
display:inline-block;
}
.text {
display: inline-block;
color:#bbb;
font-size: 24px;
}
</style>
</head>
<body>
<script type="text/javascript">
tday = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
tmonth = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
function GetClock() {
var d = new Date(+new Date );
var dx = d.toGMTString();
dx = dx.substr(0, dx.length - 3);
d.setTime(Date.parse(dx))
d.setSeconds(d.getSeconds() + 0);
var nday = d.getDay(),
nmonth = d.getMonth(),
ndate = d.getDate(),
nyear = d.getYear(),
nhour = d.getHours(),
nmin = d.getMinutes(),
nsec = d.getSeconds(),
ap;
if (nhour == 0) {
ap = " AM";
nhour = 12;
} else if (nhour < 12) {
ap = " AM";
} else if (nhour == 12) {
ap = " PM";
} else if (nhour > 12) {
ap = " PM";
nhour -= 12;
}
if (nyear < 1000) nyear += 1900;
if (nmin <= 9) nmin = "0" + nmin;
if (nsec <= 9) nsec = "0" + nsec;
document.getElementById('day').innerHTML = "" + tday[nday].toUpperCase() + "";
document.getElementById('time').innerHTML = "" + nhour + ":" + nmin + ":" + nsec + "";
document.getElementById('hour').innerHTML = "" + ap + "";
document.getElementById('date').innerHTML = "" + tmonth[nmonth].toUpperCase() + " " + ndate + ", " + nyear + "";
}
window.onload = function () {
GetClock();
setInterval(GetClock, 1000);
var text = $('#text').width();
var day = $('#day').width();
var time = $('#timeHour').width();
var date = $('#date').width();
var lengthDay = $('#day').html().length-1;
var differenceDay = time-day;
var letterDay = differenceDay / lengthDay;
var lengthDate = $('#date').html().length-1;
var differenceDate = time-date;
var letterDate = differenceDate / lengthDate;
var lengthText = $('#text').html().length-1;
var differenceText = time-text;
var letterText = differenceText / lengthText;
$('#day').css({'letter-spacing':letterDay});
$('#date').css({'letter-spacing':letterDate});
$('#text').css({'letter-spacing':letterText});
}
</script>
<div class="text" id="text">GET YOUR CAR BY</div><br>
<div class="clock" id="day"></div><br>
<span id="timeHour">
<div class="clock" id="time"></div>
<div class="clock" id="hour"></div>
</span> <br>
<div class="clock" id="date"></div>
</body>
</html>
I added letterText to the js and an id and a line break to the html and displayed .text inline-block
Is it possible to get it through javascript?
You can get the current time from the web server, from the local machine, or by calling a web service. While that last choice is possible, it would be the slowest and least performant.
<script type="text/javascript">
var d_names = new Array("Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday");
var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");
var d = new Date();
var curr_day = d.getDay();
var curr_date = d.getDate();
var sup = "";
if (curr_date == 1 || curr_date == 21 || curr_date ==31)
{
sup = "st";
}
else if (curr_date == 2 || curr_date == 22)
{
sup = "nd";
}
else if (curr_date == 3 || curr_date == 23)
{
sup = "rd";
}
else
{
sup = "th";
}
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
console.log(d_names[curr_day] + " " + curr_date + "<SUP>"
+ sup + "</SUP> " + m_names[curr_month] + " " + curr_year);
</script>
This is how you get the values through javascript. Not sure what you mean by without using system time
From http://www.webdevelopersnotes.com/tips/html/formatting_time_using_javascript.php3
<script type="text/javascript">
<!--
var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12)
{
a_p = "AM";
}
else
{
a_p = "PM";
}
if (curr_hour == 0)
{
curr_hour = 12;
}
if (curr_hour > 12)
{
curr_hour = curr_hour - 12;
}
var curr_min = d.getMinutes();
document.write(curr_hour + " : " + curr_min + " " + a_p);
//-->
</script>