MyTetra Share
Делитесь знаниями!
Код скрипта ВРЕМЯ
Ссылка на оригинал
Время создания: 09.02.2022 11:36
Автор: alensav
Текстовые метки: Код скрипта ВРЕМЯ
Раздел: MyTetra - INTERNET - HTTM
Запись: alensav/MyTetra2/main/base/1644395817fc8ix6pv5o/text.html на raw.githubusercontent.com

  1. Код скрипта нужно вставить между тегами     <head>...</head>.

    2. Код скрипта


    <head>

    <script>

    function digitalClock() {

    var date = new Date();

    var hours = date.getHours();

    var minutes = date.getMinutes();

    var seconds = date.getSeconds();

    //* добавление ведущих нулей */

    if (hours < 10) hours = "0" + hours;

    if (minutes < 10) minutes = "0" + minutes;

    if (seconds < 10) seconds = "0" + seconds;

    document.getElementById("id_clock").innerHTML = hours + ":" + minutes + ":" + seconds;

    setTimeout("digitalClock()", 1000);

    }

    </script>

    </head>

    Браслеты для пенсионеров

    Пульсометр. Шагомер. Тонометр. Уведомления. Более 15 функций. Носите не снимая в душе.

    Реклама

    18+Юр. инфо "ООО "ПРОГРЕСС", ОГРН 5157746061798 г. Москва, ул. Строителей д. 3, этаж 1 офис 4

  2. Часы и вызов функции js вставить между тегами <body>...</body> на странице сайта в желаемое место.

    3. Вызов скрипта на странице


    <body

    <div id="id_clock"></div>

    <script>digitalClock();</script>

    </body

  3. Результат:

11:35:30   Это простые часы без оформления стиля.

 

12-часовой формат времени: AM/PM

12-часовой формат времени предполагает разбиение 24 часов на два интервала по 12-часов:

  1. AM = до полудня (от 00:00 до 11:00)
  2. PM = после полудня (от 12:00 до 23:00)

12-часовой формат времени: AM/PM


<script>

function am12() {


var date12 = new Date();

var hours12 = date12.getHours() - (date12.getHours() >= 12 ? 12 : 0);

var period = date12.getHours() >= 12 ? 'PM' : 'AM';

var minutes12 = date12.getMinutes();

var seconds12 = date12.getSeconds();

if (minutes12 < 10) minutes12 = "0" + minutes12;

if (seconds12 < 10) seconds12 = "0" + seconds12;


document.getElementById("clock12").innerHTML = hours12 + ":" + minutes12 + ":"+ seconds12 +" " + period;

setTimeout("am12()", 1000);

}

</script>


<body>

<div id="clock12"></div>

<script>am12();</script>

</body>

Результат:

12-часовой формат времени: 11:35:30 AM

Примеры оформления простых часов для сайта

в HTML документе

Часы для сайта

<script>

setInterval(function () {

var now = new Date();

var clock = document.getElementById("clock");

clock.innerHTML = now.toLocaleTimeString();

}, 1000);

</script>


1

<body

Сейчас: <span id="clock"

style="color:red;">

</span>

</body


2

<body

<span id="clock"

style="color:#7e5a25; font-size:14pt; border:2px solid #e1d4ae; background:#e8e3d4; padding:5px 20px;">

</span>

</body


3

<body

<span id="clock"

style="background-color: #2F4F4F; color: #00FF7F; border:4px outset #FFA500; padding:5px 20px;">

</span>

</body


Результат скрипта

Часы для сайта


1

Сейчас: 11:35:31

 

2

11:35:31


3

11:35:31


Цветные часы для сайта

в HTML документе

4
Цветные часы для сайта

<script>

function time () {

date = new Date(),

h = date.getHours(),

m = date.getMinutes(),

s = date.getSeconds(),


h = (h < 10) ? '0' + h : h,

m = (m < 10) ? '0' + m : m,

s = (s < 10) ? '0' + s : s;


hours = document.getElementById("id_H");

minutes = document.getElementById("id_M");

seconds = document.getElementById("id_S");

hours.innerHTML = h;

minutes.innerHTML = m;

seconds.innerHTML = s;

};

</script>

<script>setInterval(time, 1000);</script>

<div id="time" style="font-weight: bold;">

<span id="id_H" style="color: red;"></span> : <span id="id_M" style="color: green;"></span> : <span id="id_S" style="color:blue;" ></span>

</div>


Результат скрипта

4
Цветные часы для сайта

11 : 35 : 31

 

Часы + дата

Хорошо смотрятся на сайте часы совместно с датой оформленные в одну строку.
В Примере 5 к скрипту часы добавлен скрипт дата .
Вид строки оформляется средствами css под дизайн сайта.

5

Сегодня: 9 февраля 2022 года — Среда (11:35:31)



5

Часы + дата


<script>

var months = new Array(13);

months[1]="января"; months[2]="февраля"; months[3]="марта"; months[4]="апреля"; months[5]="мая"; months[6]="июня"; months[7]="июля"; months[8]="августа"; months[9]="сентября"; months[10]="октября"; months[11]="ноября"; months[12]="декабря";


var time = new Date();

var thismonth = months[time.getMonth() + 1];

var date = time.getDate();

var thisyear = time.getYear();

var day = time.getDay() + 1;


if (thisyear < 2000)

thisyear = thisyear + 1900;

if (day == 1) DayofWeek = "Воскресенье";

if (day == 2) DayofWeek = "Понедельник";

if (day == 3) DayofWeek = "Вторник";

if (day == 4) DayofWeek = "Среда";

if (day == 5) DayofWeek = "Четверг";

if (day == 6) DayofWeek = "Пятница";

if (day == 7) DayofWeek = "Суббота";

</script>

<script>

setInterval(function() {

var cd = new Date();

var clockdat = document.getElementById("clockdat");

clockdat.innerHTML = cd.toLocaleTimeString();

}, 1000);

</script>


<body

<div class="center" style="background-color: #3b424a; padding:5px;">

<span style="color:aqua">Сегодня:</span>

<span style="color:silver; font-size:14px;">

<script>

document.write(date+" ");

document.write(thismonth+ " "+thisyear+" "+"года"+" — "+ DayofWeek);

</script>

(<span id="clockdat" style="color:aqua;"></span>)

</span>

</div>

</body

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

в HTML документе

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

Виджет 1

<iframe src="http://arbuzova.mooseum.ru/1-rubrika/13-demo/clock-01.html" width="260" height="275"

marginheight=0 marginwidth=0 scrolling="no" style="border: none;">

</iframe>


Виджет 2

<iframe src="http://arbuzova.mooseum.ru/1-rubrika/13-demo/clock-02.html" width="260" height="280"

marginheight=0 marginwidth=0 scrolling="no" style="border:none;">

</iframe>


 

Виджет 3

Вид часов на сайте

Виджет 1

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


Виджет 2

J avaScript

◄ Назад

5 из 15

Вперед ►

HTML

  • Базовые теги
  • теги Текста
  • теги Списка
  • теги Ссылок
  • теги Таблицы
  • Фреймы
  • Базовые цвета HTML
  • Форма
  • Форма обратной связи
  • Глобальные атрибуты HTML
  • Весь раздел

CSS

  • Связь HTML с CSS
  • Синтаксис CSS
  • CSS для Текста
  • CSS для Шрифта
  • CSS для Списка
  • CSS для Цвета и Фона
  • CSS для Таблиц
  • CSS отступов / полей
  • Рамки  (border-style)
  • Градиент  (тег hr)
  • Курсор
  • Псевдокласс :hover
  • Иконки Awesome и CSS
  • Значения CSS  по умолчанию
  • Весь раздел

JavaScript

  • Текущая Дата
  • До Нового года осталось
  • Закрыть окно
  • Отключение правой кнопки мыши
  • Часы для сайта  ⌚
  • Случайный афоризм
  • Случайная картинка
  • Календарь для сайта
  • Проверка корректности E-mail
  • Проверка правильности ИНН
  • Весь раздел

jQuery

  • Где взять jQuery?
  • Весь раздел

Справочники

  • Специальные символы
  • Смайлики ☻
  • Пиктограммы 🚚
  • Образцы шрифтов
  • Месяцы и дни недели на английском
  • Цвета HTML
  • Термины Интернет
  • Горячие клавиши IE
  • Сочетания клавиш в Браузере
  • Русифицированные шрифты
  • Весь раздел

Полезное

  • Файл в кодировке UTF-8
  • Подбор цвета онлайн
  • Размер формата A4
  • Как включить правую кнопку мыши
  • Размер окна браузера
  • Шрифты Google Fonts
  • Как сделать скриншот
  • Весь раздел

Инструменты

  • VS Code
  • Figma
  • Подбор цвета для веб-сайта
  • Размер окон браузера
  • Весь раздел


Так же в этом разделе:
 
MyTetra Share v.0.65
Яндекс индекс цитирования