Вернуться   ИнформКлуб - то, что надо! > Научись и научи! > Web программирование > JavaScript


Comment
 
Tutorial Tools Опции просмотра
Рекомендуемые Учебники
Как создать LCD часы на странице сайта с помощью Javascript

Как создать LCD часы на странице сайта с помощью Javascript

Опубликовал(а) Gostemilov
27.08.2017
По умолчанию Как создать LCD часы на странице сайта с помощью Javascript

Сначала размещаем в HEAD Вашей страницы следующий код


<style>
<!--
.styling{
background-color:black;
color:lime;
font: bold 18px MS Sans Serif;
padding: 3px;
}
-->
</style>



Затем, в том месте, где Вы планируете вывести часы


<span id="digitalclock" class="styling"></span>

<script>
<!--

/*****************************************
* LCD Clock script- by Javascriptkit.com
* Featured on/available at http://www.dynamicdrive.com/
* This notice must stay intact for use
*****************************************/

var alternate=0

function show(){
var clockobj=document.getElementById? document.getElementById("digitalclock") : document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"

if (hours==12) dn="PM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes

if (alternate==0)
clockobj.innerHTML=hours+"<font color='lime'> : </font>"+minutes+" "+"<sup>"+dn+"</sup>"
else
clockobj.innerHTML=hours+"<font color='black'> : </font>"+minutes+" "+"<sup>"+dn+"</sup>"
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show

//-->
</script>


Как видно из кода, все легко настраивается с помощью CSS, в том числе размер, начертание, цвет и все прочее.

Посмотреть демо прямо сейчас

Информация
Источник
dynamicdrive.com/dyn...
Демо - страница
informclub.ru/page.p...

Tutorial Tools

Comment

Tutorial Tools
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход


Текущее время: 03:15. Часовой пояс GMT.


Почитать

Анекдоты
Афоризмы
Поговорки
Пословицы
Форум
Цитатник

Посмотреть

Галерея PNG клипарта
Галерея бесшовных фонов

Скачать

Файловый архив
Скрипты
Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc. Перевод: zCarot