» » Часы на Blogger

Часы на Blogger

Часы для блога, гаджет не слишком нужный, но если по дизайну они как раз нужны или вам нравится видеть часы на сайте, то в этой статье можно подобрать подходящие часики. Часики устанавливаются в Дизайн / Добавить гаджет / HTML JAVA SCRIPT. Ставить можно часы в боковую панель или подвал. Часы проверялись в шаблоне Корпорация чудеса.

Код 1

Часы на белом фоне с чёрными буквами и цифрами. Никаких излишеств.
Код 1
<span id="pendule"></span>
<script language="javascript" type="text/javascript">
<!-- Begin
function clock() {
var digital = new Date();
var hours = digital.getHours();
var minutes = digital.getMinutes();
var seconds = digital.getSeconds();
var amOrPm = "AM";
if (hours > 11) amOrPm = "PM";
if (hours > 12) hours = hours - 12;
if (hours == 0) hours = 12;
if (minutes <= 9) minutes = "0" + minutes;
if (seconds <= 9) seconds = "0" + seconds;
dispTime = '<b>'+hours + ":" + minutes + ":" + seconds + " " + amOrPm+'</b>';
document.getElementById('pendule').innerHTML = dispTime;
setTimeout("clock()", 1000);
}
window.onload=clock;
//  End -->
</script>

Код 2

Код 2
В коде можно поменять цвет цифр — выделила красным
Размер чисел — выделила синим
Розовым выделила размер окантовки
Голубым — цвет окантовки
Зелёным — фон у часиков
Салатовым — размер часов
<script type="text/javascript">
setInterval(function () {
 date = new Date(),
 h = date.getHours(),
 m = date.getMinutes(),
 s = date.getSeconds(),
 h = (h < 10) ? '0' + h : h,
 m = (m < 10) ? '0' + m : m,
 s = (s < 10) ? '0' + s : s,
 document.getElementById('time').innerHTML = h + ':' + m + ':' + s;
}, 1000);
</script>
<span style="color:#7247d7; font-size:14pt; border:2px solid #e1d4ae; background:#e8e3d4; padding:5px;">
<span id="time">00:00:00</span>
</span>

Код 3

Код 3
Простые часики, но с датой.
<script>
function clock() {
var d = new Date();
var month_num = d.getMonth()
var day = d.getDate();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
month=new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12");
if (day <= 9) day = "0" + day;
if (hours <= 9) hours = "0" + hours;
if (minutes <= 9) minutes = "0" + minutes;
if (seconds <= 9) seconds = "0" + seconds;
date_time = day + "." + month[month_num] + "." + d.getFullYear() + " г.   "+ hours + ":" + minutes + ":" + seconds;
if (document.layers) {
document.layers.doc_time.document.write(date_time);
document.layers.doc_time.document.close();
}
else document.getElementById("doc_time").innerHTML = date_time;
setTimeout("clock()", 1000);
}
</script>
<span id="doc_time"><
/span>
<script>
clock();
</script>
<style>
#doc_time{
font-family: Impact;
color: #999;
font-style: italic;
position: absolute;
top: 10px;
left: 30px;
}
</style></span>
Красным выделила цвет цифр.

Код 4

Ещё одни простенькие часики.
Код 4
<span id="time">00:00:00</span>
<script type="text/javascript">
setInterval(function () {
date = new Date(),
h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
h = (h < 10) ? '0' + h : h,
m = (m < 10) ? '0' + m : m,
s = (s < 10) ? '0' + s : s,
document.getElementById('time').innerHTML = h + ':' + m + ':' + s;
}, 1000);
</script>

Код 5

Код 5
Снова электронные часики. Код довольно-таки большой.
<span class="clock"></span>
<style>
.clock {
position:relative;
font-family:monaco,consolas,"courier new",monospace;
font-size:1.5rem;
line-height:25px;
font-style:italic;
text-align:center;
}

.clock:before,
.clock:after {
position:absolute;
top:0;
bottom:0;
content:':';
z-index:2;
line-height:1.15;
color:#333;
}

.clock:before {
left:2.325em;
}

.clock:after {
right:2.325em;
}

.clock span {
position:relative;
display:inline-block;
padding:0 .25em;
margin:0 .06125em;
z-index:1;


-webkit-transform:perspective(750);
-moz-transform:perspective(750);
-ms-transform:perspective(750);
transform:perspective(750);

-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
}

.clock span:first-child {
margin-left:0;
}

.clock span:last-child {
margin-right:0;
}

.clock span:nth-child(2),
.clock span:nth-child(4) {
margin-right:.3em;
}

.clock span:nth-child(3),
.clock span:nth-child(5) {
margin-left:.3em;
}

.clock span:before,
.clock span:after {
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
color:#eee;
text-shadow:0 1px 0 #fff;
background:#333;
border-radius:.125em;
outline:1px solid transparent; /* fix jagged edges in ff */

-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
backface-visibility:hidden;

-webkit-transition:-webkit-transform .75s, opacity .75s;
-moz-transition:-moz-transform .75s, opacity .75s;
-ms-transition:-ms-transform .75s, opacity .75s;
transition:transform .75s, opacity .75s;
}

.clock span:before {
opacity:1;
z-index:1;
content:attr(data-old);

-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;

-webkit-transform:translate3d(0,0,0) rotateX(0);
-moz-transform:translate3d(0,0,0) rotateX(0);
-ms-transform:translate3d(0,0,0) rotateX(0);
transform:translate3d(0,0,0) rotateX(0);
}

.clock span:after {
opacity:0;
z-index:2;
content:attr(data-now);

-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-ms-transform-origin:0 100%;
transform-origin:0 100%;

-webkit-transform:translate3d(0,-102.5%,0) rotateX(90deg);
-moz-transform:translate3d(0,-102.5%,0) rotateX(90deg);
-ms-transform:translate3d(0,-102.5%,0) rotateX(90deg);
transform:translate3d(0,-102.5%,0) rotateX(90deg);
}

.clock .flip:before {
opacity:0;
-webkit-transform:translate3d(0,102.5%,0) rotateX(-90deg);
-moz-transform:translate3d(0,102.5%,0) rotateX(-90deg);
-ms-transform:translate3d(0,102.5%,0) rotateX(-90deg);
transform:translate3d(0,102.5%,0) rotateX(-90deg);
}

.clock .flip:after {
opacity:1;
-webkit-transform:translate3d(0,0,0) rotateX(0);
-moz-transform:translate3d(0,0,0) rotateX(0);
-ms-transform:translate3d(0,0,0) rotateX(0);
transform:translate3d(0,0,0) rotateX(0);
}
</style>
<script>var Clock = (function(){

var exports = function(element) {
this._element = element;
var html = '';
for (var i=0;i<6;i++) {
html += '<span>&nbsp;</span>';
}
this._element.innerHTML = html;
this._slots = this._element.getElementsByTagName('span');
this._tick();
};

exports.prototype = {

_tick:function() {
var time = new Date();
this._update(this._pad(time.getHours()) + this._pad(time.getMinutes()) + this._pad(time.getSeconds()));
var self = this;
setTimeout(function(){
self._tick();
},1000);
},

_pad:function(value) {
return ('0' + value).slice(-2);
},

_update:function(timeString) {

var i=0,l=this._slots.length,value,slot,now;
for (;i<l;i++) {

value = timeString.charAt(i);
slot = this._slots[i];
now = slot.dataset.now;

if (!now) {
slot.dataset.now = value;
slot.dataset.old = value;
continue;
}

if (now !== value) {
this._flip(slot,value);
}
}
},

_flip:function(slot,value) {

// setup new state
slot.classList.remove('flip');
slot.dataset.old = slot.dataset.now;
slot.dataset.now = value;

// force dom reflow
slot.offsetLeft;

// start flippin
slot.classList.add('flip');

}

};

return exports;
}());

var i=0,clocks = document.querySelectorAll('.clock'),l=clocks.length;
for (;i<l;i++) {
new Clock(clocks[i]);
}
 </script>

Сайты с готовыми часами, кодами

https://nochi.com/widgets/clock
https://24timezones.com/ru/clock-widget
http://www.toolshell.org/
https://time.is/widgets/
http://www.24webclock.com/ru/
https://mnogoblog.ru/flesh-chasy-na-sajt
https://yandex.ru/time/damant
https://www.clocklink.com/gallery/24_hour
https://yandex.ru/time/

Ваши комментарии:

Комментарии со спамом удаляются.