Hi friends, many users have repeatedly asked me the question βhow to add a date to the site page?β, Itβs very simple, and today Iβll prove it to you, so that there are as few questions as possible on this topic, weβll study in details and examples methods for displaying the date on the site pages.
The network has a lot of different options for displaying the current date on your site, you must agree because the date and time on the site is one of the most useful things on any web resource that almost no normal site can do without, of course we will not study all the options for inserting the date to an HTML page, and consider only the most basic ones that I myself use in my projects.
And so today we will look at the date script using JavaScript, and also learn how to display the current date on the site using simple php code, which of the options and the creation of the date script you decide is of course only to you, that is, the current date script for your site you Choose the one that suits you best.
Well, let's get started and you will make sure that inserting a date on a site page is very easy, especially when there are examples of creating a date script. And so the first paragraph we will analyze several options for the date on the site using simple standard JavaScript methods.
1.The first option to display the date on the site using JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 |
<script language="javascript" type="text/javascript"><!-- var d = new Date(); var day=new Array("Sunday","Monday","Tuesday", "Wednesday","Thursday","Friday","Saturday"); var month=new Array("january","february","march","april","may","june", "july","august","september","october","november","december"); document.write(day[d.getDay()]+" " +d.getDate()+ " " + month[d.getMonth()] + " " + d.getFullYear() + " year."); //--></script> |
This is the easiest way to add a date to your site, just paste this date code in the right place on your site.
Below is an example of how it will look on the site.
2. Ok, now let's look at the second option to display the date on the site using JavaScript, only the condition is a little more complicated:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script type="text/javascript">// <![CDATA[ day = new Date(); hour = day.getHours(); if (hour>=5 && hour<12) greeting = "Good morning"; else { if (hour>=12 && hour<18) greeting = "Good afternoon"; else { if (hour>=18 && hour<24) greeting = "Good evening"; else { if (hour>=0 && hour<5) greeting = "Goodnight"; } } } document.write(greeting); // ]]> // ]]> // ]]> // ]]> // ]]> // ]]></script> ! Today <script type="text/javascript">// <![CDATA[ // <![CDATA[ var d = new Date(); var day=new Array("Sunday","Monday","Tuesday", "Wednesday","Thursday","Friday","Saturday"); var month=new Array("january","february","march","april","may","june", "july","august","september","october","november","december"); document.write(day[d.getDay()]+" " +d.getDate()+ " " + month[d.getMonth()] + " " + d.getFullYear() + " year."); // ]]> // ]]> // ]]> // ]]> // ]]> // ]]></script> |
Well, you can see an example of the display below:
! Today
Just as in the first version, to add a date to your site, just paste the code in the right place on the page. Well, and I think it will not be superfluous to parse this example of the date code a bit, study it, so to speak.
Well, let's start with the variable date value d, after we create arrays for days (day) and of course months (month), we specify the grammatical form we need: number, drop, capital letter and other values that you consider necessary.
At the very end there is a line (document.write), so it displays our date on the screen, but for it you need to add a few simple conditions that indicate what and in what order to display in the date line on the site. We separate all values from one another by a +. sign. And in order to add a space, use " ", well, to display the letter of the year (g), use the value of " year."
The date data is performed by the get function, which allows you to get the following elements:
- getDate() - returns a number from 1 to 31, the day of the month;
- getDay() - returns the day of the week as an integer from 0 (Sunday) to 6 (Saturday);
- getMonth() - returns the month number of the year;
- getFullYear() - returns the year. If you just use getYear (), the current year minus will be displayed 1900;
- get Hours() - returns hour of day;
- getMinutes() - returns minutes as a number from 0 to 59;
- getSeconds() - returns the number of seconds from 0 to 59.
Well that's all, now you know how to add a date to your site using simple javascript code.
3. But we do not stop, and move on to our next item, Date and Time in PHP. Now we will consider the simplest PHP code with which we will display the date on the site.
So, to get the date in php to your site, use the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?php // Date in Russian function getDateRus(){ $monthes = array( 1 => 'january', 2 => 'february', 3 => 'march', 4 => 'april', 5 => 'may', 6 => 'june', 7 => 'july', 8 => 'august', 9 => 'september', 10 => 'october', 11 => 'november', 12 => 'december' ); return ( (int)date('d') . ' ' . $monthes[(date('n'))] . date(' Y')); } // Day of the week in Russian function getDayRus(){ $days = array( 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ); return $days[(date('w'))]; } echo "Good day!"; echo " "; echo "Today"; echo " "; echo getDayRus(); echo " "; echo getDateRus(); echo " "; echo "year."; echo "<br>"; date_default_timezone_set("Europe/Kiev"); echo "Kiev time " . date("G:i"); ?> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script type="text/javascript"> function startTime() { var tm=new Date(); var h=tm.getHours(); var m=tm.getMinutes(); var s=tm.getSeconds(); m=checkTime(m); s=checkTime(s); document.getElementById('timer').innerHTML=h+":"+m+":"+s; t=setTimeout('startTime()',500); } function checkTime(i) { if (i < 10) { i="0" + i; } return i; } </script> |
and in the desired desired location on the site we add the output of the clock itself:
1 2 3 |
<body onload="startTime()"> <div id="timer"></div> </body> |
And this is how it will look:
Well, now I can safely put an end to it, now you know how to add and display the date and time on your site.
Use on health.
No Comment
You can post first response comment.