SimpleHtmlClock/index.html at main · KILLER42/SimpleHtmlClock · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	 <link rel="shortcut icon" href="/favicon.ico" />
     <title>Âðåìÿ</title>
	 <!-- Ñòèëè ñòðàíèöû -->
<style type="text/css">
body{
	 background:#202020;
	 font:bold 12px Arial, Helvetica, sans-serif;
	 margin:0;
	 padding:0;
	 min-width:960px;
	 color:#bbbbbb;
}

h1 {
	font: 4em normal Arial, Helvetica, sans-serif;
	padding: 20px;	margin: 0;
	text-align:center;
}

.container {width: 960px; margin: 0 auto; overflow: hidden;}

.clock {width:800px; margin:0 auto; padding:30px; border:1px solid #333; color:#fff; }

#Date { font-family: Arial, Helvetica, sans-serif; font-size:36px; text-align:center; text-shadow:0 0 5px #00c6ff; }

ul { width:800px; margin:0 auto; padding:0px; list-style:none; text-align:center; }
ul li { display:inline; font-size:10em; text-align:center; font-family:Arial, Helvetica, sans-serif; text-shadow:0 0 5px #00c6ff; }

#point { position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:10px; padding-right:10px; }

@-webkit-keyframes mymove
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }
}

@-moz-keyframes mymove
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }
}

</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Ñîçäàåì äâå ïåðåìåííûå ñ íàçâàíèÿìè ìåñÿöåâ è äíåé íåäåëè â ìàññèâå
var monthNames = [ "ßíâàðü", "Ôåâðàëü", "Ìàðò", "Àïðåëü", "Ìàé", "Èþíü", "Èþëü", "Àâãóñò", "Ñåíòÿáðü", "Îêòÿáðü", "Íîÿáðü", "Äåêàáðü" ];
var dayNames= ["Âîñêðåñåíüå","Ïîíåäåëüíèê","Âòîðíèê","Ñðåäà","×åòâåðã","Ïÿòíèöà","Ñóááîòà"]

// Ñîçäàåì îáúåêò newDate()
var newDate = new Date();
// Èçâëåêàåì òåêóùóþ äàòó èç îáúåêòà Date
newDate.setDate(newDate.getDate());
// Íà âûõîäå äåíü, äàòà, ìåñÿö è ãîä
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

setInterval( function() {
	// Ñîçäàåì îáúåêò newDate() è èçâëåêàåì ñåêóíäû òåêóùåãî âðåìåíè
	var seconds = new Date().getSeconds();
	// Äîáàâëÿåì íà÷àëüíûé íîëü ê çíà÷åíèþ ñåêóíä
	$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
	},1000);

setInterval( function() {
	// Ñîçäàåì îáúåêò newDate() è èçâëåêàåì ìèíóòû òåêóùåãî âðåìåíè
	var minutes = new Date().getMinutes();
	// Äîáàâëÿåì íà÷àëüíûé íîëü ê çíà÷åíèþ ìèíóò
	$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
    },1000);

setInterval( function() {
	// Ñîçäàåì îáúåêò newDate() è èçâëåêàåì ÷àñû èç òåêóùåãî âðåìåíè
	var hours = new Date().getHours();
	// Äîáàâëÿåì íà÷àëüíûé íîëü ê çíà÷åíèþ ÷àñîâ
	$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
    }, 1000);

});
</script>

</head>

<body>

<div class="topHeader">
<!-- Ïðè æåëàíèè, ìîæíî âêëþ÷èòü ññûëêó íà ãëàâíóþ ñòðàíèöó âàøåãî ñàéòà -->
<!--
	<a class="backArticle" href="/">Ãëàâíàÿ ñòðàíèöà &gt;&gt;&gt;</a>
	-->
</div>

<h1>Âðåìÿ</h1>

<div class="container">

<div class="clock">
    <div id="Date"></div>
    <ul>
	    <li id="hours"></li>
        <li id="point">:</li>
        <li id="min"></li>
        <li id="point">:</li>
        <li id="sec"></li>
    </ul>
</div>

</div>

</body>
</html>