Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  суббота, июля 09, 2011  

Красивые цифровые часы для блога
Продолжая тему оригинальных часов, спешу поделиться очередным видом. Указанный чуть ниже скрипт предлагает для использования необычные цифровые часики, выполненные в стиле размытых работ Photoshop.

В мире ничего не изменилось, и поэтому в блог виджет часов устанавливается, как и прежде, в любом доступном месте шаблона либо благодаря гаджету HTML/JavaScript.

Стоит также отметить за особенность данных часов то, что время они отображают в формате PM и AM.

Цифровые часы для блога в стиле Photoshop

Скрипт виджета часов:
<script language="JavaScript"> 
<!-- 
var digit = new Array() 
digit[0] = new Image(35, 60) 
digit[1] = new Image(35, 60) 
digit[2] = new Image(35, 60) 
digit[3] = new Image(35, 60) 
digit[4] = new Image(35, 60) 
digit[5] = new Image(35, 60) 
digit[6] = new Image(35, 60) 
digit[7] = new Image(35, 60) 
digit[8] = new Image(35, 60) 
digit[9] = new Image(35, 60) 
digit[10] = new Image(35, 60) // am 
digit[11] = new Image(35, 60) // pm 
digit[12] = new Image(35, 60) // colon 
digit[13] = new Image(35, 60) // blank 
// assign sources to digit image objects (0 - 9) 
for (var i = 0; i < 10; ++i) { 
  digit[i].src = "http://www.megabig.at.ua/images/" + "dg" + i + ".png" 
} 

// assign sources to other image objects 
digit[10].src = "http://www.megabig.at.ua/images/" + "dgam.png" 
digit[11].src = "http://www.megabig.at.ua/images/" + "dgpm.png" 
digit[12].src = "http://www.megabig.at.ua/images/" + "dgc.png" 
digit[13].src = "http://www.megabig.at.ua/images/" + "dgb.png" 

// set initial time values to impossible ones 
var hour1 = getHour(0) 
var hour2 = getHour(1) 
var minute1 = getMinute(0) 
var minute2 = getMinute(1) 
var ampm = getAmpm() 
var colon = false 

// get array substring of first clock image in document.images array 
var start = document.images.length // number of images in document 

// print initial clock 
var openImage = "<IMG SRC=\"http://www.megabig.at.ua/images/" + "dg" 
var closeImage = ".png\" HEIGHT=60 WIDTH=35>" 
document.write(openImage + hour1 + closeImage) 
document.write(openImage + hour2 + closeImage) 
document.write(openImage + "c.gif\" HEIGHT=60 WIDTH=18>") 
document.write(openImage + minute1 + closeImage) 
document.write(openImage + minute2 + closeImage) 
document.write(openImage + ((ampm == 10) ? "am" : "pm") + closeImage) 
var timerID = null 
var timerRunning = false 
update() 

function setClock() { 
  if (getHour(0) != hour1) { // not getHours()! 
  hour1 = getHour(0) 
  document.images[start].src = digit[hour1].src 
  } 
  if (getHour(1) != hour2) { // not getHours()! 
  hour2 = getHour(1) 
  document.images[start + 1].src = digit[hour2].src 
  } 
  colon = !colon 
  if (!colon) 
  document.images[start + 2].src = digit[13].src 
  else 
  document.images[start + 2].src = digit[12].src 
  if (getMinute(0) != minute1) { // not getMinutes()! 
  minute1 = getMinute(0) 
  document.images[start + 3].src = digit[minute1].src 
  } 
  if (getMinute(1) != minute2) { // not getMinutes()! 
  minute2 = getMinute(1) 
  document.images[start + 4].src = digit[minute2].src 
  } 
  if (getAmpm() != ampm) { 
  ampm = getAmpm() 
  document.images[start + 5].src = digit[ampm].src 
  } 
  timerID = setTimeout("setClock()",1000) 
  timerRunning = true 
} 

function update() { 
  stopClock() 
  setClock() 
} 

function stopClock() { 
if (timerRunning) 
  clearTimeout(timerID) 
timerRunning = false 
} 

function getHour(place) { 
  var now = new Date() 
  var hour = now.getHours() 
  if (hour >= 24) 
  hour -= 24 
  hour = (hour == 0) ? 24 : hour 
  if (hour < 10) 
  hour = "0" + hour // do not parse number! 
  hour += "" 
  return parseInt(hour.charAt(place)) 
} 

function getMinute(place) { 
  var now = new Date() 
  var minute = now.getMinutes() 
  if (minute < 10) 
  minute = "0" + minute // do not parse number! 
  minute += "" 
  return parseInt(minute.charAt(place)) 
} 

function getAmpm() { 
  var now = new Date() 
  var hour = now.getHours() 
  if (hour >= 24) 
  return 11 // pm 
  /* else */ 
  return 10 // am 
} 
function getPath(url) { 
  lastSlash = url.lastIndexOf("/") 
  return url.substring(0, lastSlash + 1) 
} 
// --> 
</script>



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.