Электронные часы на сайт

Простые рабочие электронные часы, которые запросто можно установить на любой сайт.

А если постараться, то с помощью CSS им можно придать стильный вид под дизайн сайта.

Я приведу очень короткий css, чтоб вам осталась свобода для творчества.

Чтобы часы работали, в тег body нужно добавить атрибут onload="digitalWatch()".

Если часы нужны только на отдельной странице, как тут, например, то весь код размещается в теге body.

Если же часы нужны на всех страницах сайта, то скрипт размещается в теге head, а html размещается в теге body.

Скрипт:

 <script type="text/javascript">
  function digitalWatch() {
    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("digital_watch").innerHTML = hours + ":" + minutes + ":" + seconds;
    setTimeout("digitalWatch()", 1000);
  }
</script">

CSS:

  #digital_watch{  
	letter-spacing: 5px; 
	color: #777; 
	font-size: 30px; 
	border: 2px solid #777;
	padding: 10px;
	width: 160px;
	box-shadow: 1px 1px 3px #BCCCCF,
		    -1px -1px 2px #BCCCCF;

HTML:

<body  onload="digitalWatch()">
   <p id="digital_watch"></p>   
</body>

И полный код, который можно вставить в Notepad++ для работы со стилями.


<html lang="ru">
   <head>
        <meta charset="utf-8" />
        <title>Часы</title>
<head>
 <script type="text/javascript">
  function digitalWatch() {
    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("digital_watch").innerHTML = hours + ":" + minutes + ":" + seconds;
    setTimeout("digitalWatch()", 1000);
  }
</script">

 <style>
  #digital_watch{  
	letter-spacing: 5px; 
	color: #777; 
	font-size: 30px; 
	border: 2px solid #777;
	padding: 10px;
	width: 160px;
	box-shadow: 1px 1px 3px #BCCCCF,
				-1px -1px 2px #BCCCCF;
}
 </style>
</head>

<body  onload="digitalWatch()">
   <p id="digital_watch"></p>   
</body>
</html>

Желаю творческих успехов.

Запись опубликована в рубрике Уроки javascript и jQuery. Добавьте в закладки постоянную ссылку.
А так же:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *