Главная » Часы и календари
    РейтингРейтингРейтингРейтингРейтинг

Часы и календари

В данном разделе, вы слегкостью можете подобрать часы или календари для сайта на любой вкус и для каждого сезона года. Для этого необходимо скопировать код часов или календаря и разместить его в нужном месте на странице вашего сайта.

Для установки скрипта просто скопируйте код и вставьте его на свой сайт.

Электронные часы в форме

Код скрипта:

<body bgColor=#923947 link="#008000" onload="start(document.forms[0])" onunload="cleartids()">

<FONT color="#20ffff"><h3><CENTER>Вы смотрите пример работы скрипта Электронные часы в форме</CENTER></h3></FONT color>

<script language="LiveScript">

function GoBack() {

        if (confirm("Are you sure you want to go to the previous page?")) {

                history.back()

        }

    }

timestr = "00:00:00";

tid = 0;

pause = 0;

var to;

var bcount;

var tcount;

 

function writer(){

document.write("test");

}

function time(n) {

    tid=window.setTimeout("time(1)",to);

    today = new Date()

    if(today.getMinutes() < 10){

        pad = "0"}

    else 

    pad = "";

    if(today.getSeconds() < 10){

        pads = "0"}

    else 

    pads = "";

timestr=today.getHours()+":"+pad+today.getMinutes()+":"+pads+today.getSeconds();

                f.result.value = timestr;

                window.status = timestr;

  window.clearTimeout(tid);

  tid=window.setTimeout("time()",to);

}

function start(x) {

  f=x;

                to=60;

  time(x);

  }

 

function cleartids() {

 window.clearTimeout(tid);

}

</script>

<form name="time">

<p align="center">

<input type="text" size="11" name="result"  onfocus="this.blur()"  style="text-align: center; font-family: sans-serif; font-size: 8pt; background-color: #DAFADE; color: rgb(255,0,0)">

</form>

</body>

</html>



Графические часы

Для просмотра скрипта в работе  должен быть включен в браузере Java Script.

Код скрипта:

<body bgColor=#923947 link="#008000" onload="start(document.forms[0])" onunload="cleartids()">

<FONT color="#20ffff"><h3><CENTER>Вы смотрите пример работы скрипта</CENTER></h3></FONT color>

<body bgcolor=#333399>
<p align=center>
<font color=#fffccc face=verdana size=3>Графические часы!
<br><br>
<script language="JavaScript">
<!-- 
var digit = new Array()
digit[0] = new Image(16, 21) 
digit[1] = new Image(16, 21) 
digit[2] = new Image(16, 21) 
digit[3] = new Image(16, 21) 
digit[4] = new Image(16, 21) 
digit[5] = new Image(16, 21)
digit[6] = new Image(16, 21)
digit[7] = new Image(16, 21)
digit[8] = new Image(16, 21)
digit[9] = new Image(16, 21)
digit[10] = new Image(16, 21) // am
digit[11] = new Image(16, 21) // pm
digit[12] = new Image(9, 21) // colon
digit[13] = new Image(9, 21) // blank

// assign sources to digit image objects (0 - 9) 
for (var i = 0; i < 10; ++i) {
digit[i].src = getPath(location.href) + "dg" + i + ".gif"
}

// assign sources to other image objects
digit[10].src = getPath(location.href) + "dgam.gif"
digit[11].src = getPath(location.href) + "dgpm.gif"
digit[12].src = getPath(location.href) + "dgc.gif"
digit[13].src = getPath(location.href) + "dgb.gif"

// 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=\"" + getPath(location.href) + "dg"
var closeImage = ".gif\" HEIGHT=21 WIDTH=16>"
document.write(openImage + hour1 + closeImage)
document.write(openImage + hour2 + closeImage)
document.write(openImage + "c.gif\" HEIGHT=21 WIDTH=9>")
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 >= 12)
hour -= 12
hour = (hour == 0) ? 12 : 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 >= 12)
return 11 // pm
/* else */
return 10 // am
}

function getPath(url) {
lastSlash = url.lastIndexOf("/")
return url.substring(0, lastSlash + 1)
}

// -->
</script>

 

 

Календарь

Скрипт простого календаря HTML-показывает целиком месяц, год и с подсветкой активных дат

<style>
#calendar3 {
  width: 100%;
  font: monospace;
  line-height: 1.2em;
  font-size: 15px;
  text-align: center;
}
#calendar3 thead tr:last-child {
  font-size: small;
  color: rgb(85, 85, 85);
}
#calendar3 tbody td {
  color: rgb(44, 86, 122);
}
#calendar3 tbody td:nth-child(n+6), #calendar3 .holiday {
  color: rgb(231, 140, 92);
}
#calendar3 tbody td.today {
  outline: 3px solid red;
}
</style>

<table id="calendar3">
  <thead>
    <tr><td colspan="4"><select>
<option value="0">Январь</option>
<option value="1">Февраль</option>
<option value="2">Март</option>
<option value="3">Апрель</option>
<option value="4">Май</option>
<option value="5">Июнь</option>
<option value="6">Июль</option>
<option value="7">Август</option>
<option value="8">Сентябрь</option>
<option value="9">Октябрь</option>
<option value="10">Ноябрь</option>
<option value="11">Декабрь</option>
</select><td colspan="3">
<input type="number" value="" min="0" max="9999" size="4"> <tr><td>Пн<td>Вт<td>Ср<td>Чт<td>Пт<td>Сб<td>Вс <tbody> </table> <script> function Calendar3(id, year, month) { var Dlast = new Date(year,month+1,0).getDate(), D = new Date(year,month,Dlast), DNlast = D.getDay(), DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(), calendar = '<tr>', m = document.querySelector('#'+id+'
option[value="' + D.getMonth() + '"]'), g = document.querySelector('#'+id+' input'); if (DNfirst != 0) { for(var i = 1; i < DNfirst; i++) calendar += '<td>'; }else{ for(var i = 0; i < 6; i++) calendar += '<td>'; } for(var i = 1; i <= Dlast; i++) { if (i == new Date().getDate() && D.getFullYear() == new Date().
getFullYear() && D.getMonth() == new Date().getMonth()) { calendar += '<td class="today">' + i; }else{ if ( // список официальных праздников (i == 1 && D.getMonth() ==
0 && ((D.getFullYear() > 1897 && D.getFullYear() < 1930)
|| D.getFullYear() > 1947)) || // Новый год (i == 2 && D.getMonth() ==
0 && D.getFullYear() > 1992) || // Новый год ((i == 3 || i == 4 || i == 5 || i == 6 || i ==
8) && D.getMonth() ==
0 && D.getFullYear() > 2004) || // Новый год (i == 7 && D.getMonth() ==
0 && D.getFullYear() > 1990) || // Рождество Христово (i == 23 && D.getMonth() ==
1 && D.getFullYear() > 2001) || // День защитника Отечества (i == 8 && D.getMonth() ==
2 && D.getFullYear() > 1965) || // Международный женский день (i == 1 && D.getMonth() ==
4 && D.getFullYear() > 1917) || // Праздник Весны и Труда (i == 9 && D.getMonth() ==
4 && D.getFullYear() > 1964) || // День Победы (i == 12 && D.getMonth() ==
5 && D.getFullYear() > 1990) || // День России (i == 7 && D.getMonth() ==
10 && (D.getFullYear() > 1926 && D.getFullYear() < 2005))
|| // Октябрьская революция 1917 года (i == 8 && D.getMonth() ==
10 && (D.getFullYear() > 1926 && D.getFullYear() < 1992))
|| // Октябрьская революция 1917 года (i == 4 && D.getMonth() ==
10 && D.getFullYear() > 2004)
// День народного единства ) { calendar += '<td class="holiday">' + i; }else{ calendar += '<td>' + i; } } if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) { calendar += '<tr>'; } } for(var i = DNlast; i < 7; i++) calendar += '<td>&nbsp;'; document.querySelector('#'+id+' tbody').innerHTML = calendar; g.value = D.getFullYear(); m.selected = true; if (document.querySelectorAll('#'+id+' tbody tr').length < 6) { document.querySelector('#'+id+' tbody').
innerHTML += '<tr><td>&nbsp;<td>&nbsp;<td>&nbsp;
<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;'; } document.querySelector('#'+id+' option[value="' + new Date().
getMonth() + '"]').style.color = 'rgb(220, 0, 0)';
// в выпадающем списке выделен текущий месяц } Calendar3("calendar3",new Date().getFullYear(),new Date().getMonth()); document.querySelector('#calendar3').onchange = function Kalendar3() { Calendar3("calendar3",document.querySelector('#calendar3 input').
value,parseFloat(document.querySelector('#calendar3 select').
options[document.querySelector('#calendar3 select').
selectedIndex].value)); } </script>

css template

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!