JavaScript Digital Clock

function currentTime() < hour = updateTime(hour); min = updateTime(min); sec = updateTime(sec); >function updateTime(k) < if (k < 10) < return "0" + k; >else < return k; >>

document.getElementById("clock").innerHTML = hour + " : " + min + " : " + sec; /* adding time to the div */

function currentTime() < var t = setTimeout(function()< currentTime() >, 1000); /* настаиваем таймер */ > currentTime(); /* Вызываем функция currentTime(), которая запускает весь процесс*/

function currentTime() < var date = new Date(); /* создаем объект класса Date() */ var hour = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); hour = updateTime(hour); min = updateTime(min); sec = updateTime(sec); document.getElementById("clock").innerText = hour + " : " + min + " : " + sec; /* adding time to the div */ var t = setTimeout(function()< currentTime() >, 1000); /* настраиваем таймер */ > function updateTime(k) < if (k < 10) < return "0" + k; >else < return k; >> currentTime(); /* вызываем функцию currentTime() */

function currentTime() < var midday = "AM"; midday = (hour >= 12) ? "PM" : "AM"; >

function currentTime() < hour = (hour == 0) ? 12 : ((hour >12) ? (hour - 12): hour); >

Код скрипта  function digitalClock() < var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); //* добавление ведущих нулей */ if (hours 

Вызов скрипта на странице  
12-часовой формат времени: AM/PM
12-часовой формат времени: AM/PM   
 
Примеры оформления простых часов для сайта
 
  1 2 3 
Цветные часы для сайта
   
: :
 
 
Часы + дата
 
Хорошо смотрятся на сайте часы совместно с датой оформленные в одну строку. 
В Примере 5 к скрипту часы добавлен скрипт дата. 
Вид строки оформляется средствами css под дизайн сайта.
 
5 Часы + дата   Сегодня:   ( ) 

Аналоговые часы для сайта

Виджеты Аналоговых часов для сайта

Виджет 1  Виджет 2  

Источник

Digital Clock with Date using JavaScript, Html & CSS

The following programming code is the basic HTML and CSS structure of this watch that was originally used to design and background design this watch. If you have seen the demo, you will understand that in this case I have used a rectangular box and put a border( border: 7px solid rgb(255, 252, 252); ) around that box. Time and date can be seen in that box. Box-shadow( box-shadow: 0 2px 10px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); ) has been used around this box.

 body  font-family: "Work Sans", sans-serif; margin-top: 150px; background: #bbbcbd; margin-left: 70px; > .time  background: rgb(12, 12, 12); color: #fff; text-align: center; width: 500px; border: 7px solid rgb(255, 252, 252); padding: 8px; box-shadow: 0 2px 10px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); > 

Step 2: Add time, am / pm, date options

There are basically three types of options in this watch, time view, AM / PM and date view. The following HTML and CSS programming codes have helped to create and design these three options.
In this case I have set a specific front size for each. If you want, you can change the size to your liking.

 class="hms">  class="ampm">  class="date"> 

.hms  font-size: 68pt; font-weight: 200; > .ampm  font-size: 22pt; > .date  font-size: 15pt; > 

Step 3: Add JavaScript code to activate time

So far we have only designed this digital watch, now we will implement this digital watch. You must know the basic JavaScript programming code for this. I will make arrangements to see everyone's first time and add AM / PM option with it.
If you know basic JavaScript then surely you can understand the code below.

 function updateTime()  var dateInfo = new Date(); /* time */ var hr, _min = (dateInfo.getMinutes()  10) ? "0" + dateInfo.getMinutes() : dateInfo.getMinutes(), sec = (dateInfo.getSeconds()  10) ? "0" + dateInfo.getSeconds() : dateInfo.getSeconds(), ampm = (dateInfo.getHours() >= 12) ? "PM" : "AM"; // replace 0 with 12 at midnight, subtract 12 from hour if 13–23 if (dateInfo.getHours() == 0)  hr = 12; > else if (dateInfo.getHours() > 12)  hr = dateInfo.getHours() - 12; > else  hr = dateInfo.getHours(); > // Add to time format var currentTime = hr + ":" + _min + ":" + sec; // AM/ PM options document.getElementsByClassName("hms")[0].innerHTML = currentTime; document.getElementsByClassName("ampm")[0].innerHTML = ampm; /* Add Date options */ // print time and date once, then update them every second updateTime(); setInterval(function()  updateTime() >, 1000); 

Step 4: Activate the date option in the digital clock

Above we have added JavaScript code for this in time. This time we will implement the date as you saw in the demo above. In this case we have added the date, month, etc.

 /* date */ var dow = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], month = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], day = dateInfo.getDate(); // store date var currentDate = dow[dateInfo.getDay()] + ", " + month[dateInfo.getMonth()] + " " + day; document.getElementsByClassName("date")[0].innerHTML = currentDate; >; 

Hope you learned from this tutorial how I made this digital watch. If you have any difficulty in understanding, of course you can comment. I have made many more designs like this, you can follow the designs if you want. You must let us know how you like this design by commenting . You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/

Источник

HTML5 Digital Clock with JavaScript | Beginner Project

In this tutorial, we are going to create a beginner Javascript project that will display a digital clock on the web page. The clock will show the current time in the format of hours, minutes, and seconds. The clock will be updated every second. We will also display the date and day of the week just below the clock.

Here is how our HTML5 digital clock looks like:

Let's start with creating the first structure of our digital clock using HTML. Then we will create the logic for our clock using Javascript and finally, we will add CSS to make our clock look nice.

HTML Structure

We will create 2 div elements, one to display running time and another to display the date and day of the week.

Create a div element with class time and another div element with class date-time .

Wrap both div elements inside a div element with class clock .

Now we have a structure of our digital clock. We will add some CSS to make it look nice.

Creating JavaScript Logic

Let's start writing the logic of our digital clock.

Before starting with the logic, you must have an understanding of the Date object in javascript. We will first explain here in brief and then start with the logic.

Date object in javascript

The Date object in javascript is used to get the current time and date. It is a built-in object in javascript.

To get the current date object we can use the new Date() . It returns the current date object.

Now we can get the current time and date using getHours() , getMinutes() , getSeconds() and getDay() methods of the date object.

var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); var day = date.getDay();

First select the element with class time using the querySelector Method, so that we can use it to display the date and time.

var time = document.querySelector('.time'); var dateTime = document.querySelector('.date-time');

Now create a function updateClock() that will calculate the current time and date and display it on the web page.

Within the function create a Date object and get the current hour , minute , second , day , date , month , and year .

Now create 2 arrays to store day names and month names in English.

// Get the current time, day , month and year var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); var day = now.getDay(); var date = now.getDate(); var month = now.getMonth(); var year = now.getFullYear(); // store day and month name in an array var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

Add a 0 before the minutes and seconds if they are less than 10 and convert hours to 12-hour format.

Use the selected element to display the time and date.

// format date and time hours = hours % 12 || 12; minutes = minutes < 10 ? '0' + minutes : minutes; seconds = seconds < 10 ? '0' + seconds : seconds; date = date < 10 ? '0' + date : date; // display date and time var period = hours < 12 ? 'AM' : 'PM'; time.innerHTML = hours + ':' + minutes + ':' + seconds + ' ' + period; dateTime.innerHTML = dayNames[day] + ', ' + monthNames[month] + ' ' + date + ', ' + year;

Finally add a setInterval() method to call the updateClock() function every second.

The complete logic of our digital clock is as follows:

var time = document.querySelector('.time'); var dateTime = document.querySelector('.date-time'); function updateClock() < // Get the current time, day , month and year var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); var day = now.getDay(); var date = now.getDate(); var month = now.getMonth(); var year = now.getFullYear(); // store day and month name in an array var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; // format date and time hours = hours % 12 || 12; minutes = minutes < 10 ? '0' + minutes : minutes; seconds = seconds < 10 ? '0' + seconds : seconds; date = date < 10 ? '0' + date : date; // display date and time var period = hours < 12 ? 'AM' : 'PM'; time.innerHTML = hours + ':' + minutes + ':' + seconds + ' ' + period; dateTime.innerHTML = dayNames[day] + ', ' + monthNames[month] + ' ' + date + ', ' + year; >updateClock(); setInterval(updateClock, 1000);

CSS for the clock

You can create your own style depending on your imagination. Here is the simple style for the clock.

.clock < width: 100%; height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: sans-serif; background-color: #424558; >.time < font-size: 80px; font-weight: bold; color: #fff; >.date-time < font-size: 20px; color: #fff; >@media screen and (max-width: 768px) < .time < font-size: 50px; >>

Complete code for the clock

Here is the complete code for the clock. You can open this in a separate editor by clicking the run button below.

Conclusion

The JavaScript clock is a great way to start your javascript journey as a beginner. It is easy to use and it is very simple to make. You can use it to display the time and date on your website.

We discussed the complete code for the clock step by step.

Источник