Cначала я оформил часы и подключил jquery
<html>
<head>
<title>Clock</title>
<meta charset = 'utf-8'>
<script src = 'http://code.jquery.com/jquery-1.10.2.min.js'></script>
</head>
<body>
<h3>
<p align = 'center'>
<span id = 'month2'>
</p>
</h3>
<h3>
<p align = 'center'>
<span id = 'day'></span>
</p>
</h3>
<h1>
<p align = 'center'>
<span id = 'hour'></span>:
<span id = 'minutes'></span>
</p>
</h1>
<h2>
<p align = 'center'>
<span id = 'date'></span>/
<span id = 'month'></span>
<span id = 'seconds'></span>
</p>
</h2>
</body>
</html>
month это число месяца
month2 это название месяца
day это название дня
date это число дня
дале написал скрипт
function clock() {
var time = new Date();
var hour = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
$('#hour').text(hour);
if(seconds < 10) {
$('#seconds').text('0' + seconds);
}
if(seconds >= 10) {
$('#seconds').text(seconds);
}
if(minutes < 10) {
$('#minutes').text('0' + minutes);
}
if(minutes >= 10) {
$('#minutes').text(minutes);
}
}
function calendar(){
var time = new Date();
var arrmonth = new Array(12)
arrmonth[0] = 'January';
arrmonth[1] = 'February';
arrmonth[2] = 'March';
arrmonth[3] = 'April';
arrmonth[4] = 'May';
arrmonth[5] = 'June';
arrmonth[6] = 'July';
arrmonth[7] = 'August';
arrmonth[8] = 'September';
arrmonth[9] = 'October';
arrmonth[10] = 'November';
arrmonth[11] = 'December';
var arrday = new Array(7);
arrday[0] = 'Sunday';
arrday[1] = 'Monday';
arrday[2] = 'Tuesday';
arrday[3] = 'Wednesday';
arrday[4] = 'Thursday';
arrday[5] = 'Friday';
arrday[6] = 'Saturday';
var month = time.getMonth();
var day = arrday[time.getDay()];
var month2 = arrmonth[time.getMonth()];
var date = time.getDate();
$('#month2').text(month2);
$('#day').text(day);
$('#date').text(date);
$('#month').text(month + 1);
}
и чтобы не перегружать постоянно я добавил это в конец скрипта
setInterval(clock, 1000);
setInterval(calendar, 1000);
с помощью CSS добавил цвета:
|
Код:
|
h1 {
color: #DAA520;
}
h2 {
color: #B8860B;
}
h3 {
color: #FFD700;
} |
результат:
<html>
<head>
<title>Clock</title>
<meta charset = 'utf-8'>
<script src = 'http://code.jquery.com/jquery-1.10.2.min.js'></script>
<style>
h1 {
color: #DAA520;
}
h2 {
color: #B8860B;
}
h3 {
color: #FFD700;
}
</style>
<script>
function clock() {
var time = new Date();
var hour = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
$('#hour').text(hour);
if(seconds < 10) {
$('#seconds').text('0' + seconds);
}
if(seconds >= 10) {
$('#seconds').text(seconds);
}
if(minutes < 10) {
$('#minutes').text('0' + minutes);
}
if(minutes >= 10) {
$('#minutes').text(minutes);
}
}
function calendar(){
var time = new Date();
var arrmonth = new Array(12)
arrmonth[0] = 'January';
arrmonth[1] = 'February';
arrmonth[2] = 'March';
arrmonth[3] = 'April';
arrmonth[4] = 'May';
arrmonth[5] = 'June';
arrmonth[6] = 'July';
arrmonth[7] = 'August';
arrmonth[8] = 'September';
arrmonth[9] = 'October';
arrmonth[10] = 'November';
arrmonth[11] = 'December';
var arrday = new Array(7);
arrday[0] = 'Sunday';
arrday[1] = 'Monday';
arrday[2] = 'Tuesday';
arrday[3] = 'Wednesday';
arrday[4] = 'Thursday';
arrday[5] = 'Friday';
arrday[6] = 'Saturday';
var month = time.getMonth();
var day = arrday[time.getDay()];
var month2 = arrmonth[time.getMonth()];
var date = time.getDate();
$('#month2').text(month2);
$('#day').text(day);
$('#date').text(date);
$('#month').text(month + 1);
}
setInterval(clock, 1000);
setInterval(calendar, 1000);
</script>
</head>
<body>
<h3>
<p align = 'center'>
<span id = 'month2'>
</p>
</h3>
<h3>
<p align = 'center'>
<span id = 'day'></span>
</p>
</h3>
<h1>
<p align = 'center'>
<span id = 'hour'></span>:
<span id = 'minutes'></span>
</p>
</h1>
<h2>
<p align = 'center'>
<span id = 'date'></span>/
<span id = 'month'></span>
<span id = 'seconds'></span>
</p>
</h2>
</body>
</html>