Цифровые часы с датой
Существует множество сервисов, даже бесплатных, которые предлагают широкий спектр стилей часов, которые будут включены в веб-страницы и более или менее профессиональные сайты. Отображение текущей даты и времени с секундами может быть полезно на некоторых связанных с событиями сайтах, которые создают опросы или соревнования с читателями.
В Интернете время и дата могут быть получены системой автоматически. Например, пользователи Windows могут перейти в « Настройки» для синхронизации даты и времени с серверами Microsoft.
Следовательно, в принципе нет необходимости использовать внешние ресурсы, чтобы иметь время на компьютере и в Интернете . С другой стороны, текущую дату и время также можно получить с помощью javascript, который затем можно вставить в веб-страницу, пост или как виджет сайта.
В этом посте мы увидим, как отображать дату и время или как отображать только дату или только время в цифровом виде в соответствии с европейским стилем и русским языком. По сути, вы можете показать календарь с цифровым временем, которое обновляется каждую секунду. Я протестировал JavaScript в онлайн-редакторе HTML, и вот результат.
Выбор этого решения предпочтительнее, чем предлагаемый третьими лицами, поскольку нет необходимости связывать с внешними сайтами, а javascript очень легок и не оказывает существенного влияния на скорость загрузки сайта или страницы, на которой он вставлен. Очевидно что цвета, размеры и семейства шрифтов могут быть настроены .
Кроме того, вы можете добавить текст или показывать только дату или только время. Секунды не останутся заблокированными при открытии страницы, и будут продолжать прокручиваться даже при открытой веб-странице.
Установка очень проста. Давайте возьмем пример виджета в Blogger . Перейдите в Дизайн -> Добавить гаджет -> HTML / Javascript и вставьте следующий код в разделы сайта, а затем перейдите к Сохранить.
<div style=»text-align:center;»><span style=»color:#940F04; padding:4px; font-size : 28px; font-weight:bold’ font-family:Georgia;»><script type=»text/JavaScript»>var mydate=new Date()var year=mydate.getYear()if (year <1000)year+=1900var day=mydate.getDay()var month=mydate.getMonth()var daym=mydate.getDate()if (daym<10)daym=»0″+daymvar dayarray=new Array(«воскресенье «,»понедельник «,»вторник «,»среда «,»четверг «,»пятница «,»Суббота «)
var montharray=new Array(«/ 01 /»,»/ 02 /»,» / 03 /»,» / 04 /»,»/ 05 /»,»/ 06 /»,»/ 07 /»,»/ 08 /»,»/ 09 /»,»/ 10 /»,»/ 11 /»,»/ 12 /»)
document.write(dayarray[day]+» «+daym+» «+montharray[month]+» «+year)
</script></span>var montharray=new Array(«/ 01 /»,»/ 02 /»,» / 03 /»,» / 04 /»,»/ 05 /»,»/ 06 /»,»/ 07 /»,»/ 08 /»,»/ 09 /»,»/ 10 /»,»/ 11 /»,»/ 12 /»)document.write(dayarray[day]+» «+daym+» «+montharray[month]+» «+year)</script></span><script>document.write();var clockid=new Array()var clockidoutside=new Array()var i_clock=-1var thistime= new Date()var hours=thistime.getHours()var minutes=thistime.getMinutes()var seconds=thistime.getSeconds()if (eval(hours) <10) {hours=»0″+hours}if (eval(minutes) < 10) {minutes=»0″+minutes}if (seconds < 10) {seconds=»0″+seconds}var thistime = hours+»:»+minutes+»:»+seconds
function orologio() { i_clock++ if (document.all || document.getElementById || document.layers) { clockid[i_clock]=»clock»+i_clock document.write(«<span id='»+clockid[i_clock]+»‘ style=’position:relative’>»+thistime+»</span>») }}function clockon() { thistime= new Date() hours=thistime.getHours() minutes=thistime.getMinutes() seconds=thistime.getSeconds() if (eval(hours) <10) {hours=»0″+hours} if (eval(minutes) < 10) {minutes=»0″+minutes} if (seconds < 10) {seconds=»0″+seconds} thistime = hours+»:»+minutes+»:»+seconds if (document.all) { for (i=0;i<=clockid.length-1;i++) { var thisclock=eval(clockid[i]) thisclock.innerHTML=thistime } }
if (document.getElementById) { for (i=0;i<=clockid.length-1;i++) { document.getElementById(clockid[i]).innerHTML=thistime } } var timer=setTimeout(«clockon()»,1000)}window.onload=clockon</script><span style=»color:#191919; padding:4px; font-size : 20px; font-weight:bold’ font-family:Georgia;»> Время </span><span style=»color:#003366; padding:4px; font-size : 32px; font-weight:bold’ font-family:Georgia;»><script>orologio()</script></span></div>
Результат можете посмотреть в боковой панели моего блога
Время
Теперь давайте посмотрим, какие могут быть самые важные настройки:
- color = ‘# 940F04 ‘ используется для цвета даты
- размер шрифта: 28 пикселей; font-weight: bold ‘font-family: Georgia; они используются соответственно для размера символов даты, для полужирного шрифта и для семейства шрифтов.
- выравнивание текста: center; является тегом по центру в расположении даты и часов
- Номера месяцев «/ 01 /», «/ 02 /», «/ 03 /», «/ 04 /», «/ 05 / и т. Д. … разделены пробелом . Для более собранной даты пробелы могут быть удаленным таким образом / 01 / «,» / 02 / «,» / 03 / «,» / 04 / «и т.д …
- цвет: #191919; padding: 4px ; размер шрифта: 20 пикселей ; font-weight: bold ‘font-family: Georgia; это стиль текста часов, который является единственным присутствующим и который может быть изменен. padding: 4p x; это пространство деления.
- цвет: #003366; padding: 4px ; размер шрифта: 32 пикселя ; font-weight: bold ‘font-family: Georgia; это стиль расписания, который также может отличаться от двух других.
Наконец, если вы хотите показать только дату, оставьте только первую и последнюю строки в дополнение к выделенному жёлтому коду. Вместо того, чтобы показывать только часы, вы оставляете первую и последнюю строку, но вставляются только те части кода, которые выделены зеленым цветом. Код работает отлично, даже если он вставлен в режиме HTML- в пост.
