часы на jquery
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 {<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>
|
молодец!
|
а где посмотреть пример можно?
|
|
круто, но можно ещё пару плагинов jquery подключить и будет вобще тру
|
Огромное спасибо animhotep за совет
|
roma13, что-то Вы много написали :)
function clock() {
var time = new Date(),
hour = time.getHours(),
minutes = time.getMinutes(),
seconds = time.getSeconds();
$('#hour').text(hour);
$('#seconds').text(seconds < 10 ? '0' + seconds : seconds);
$('#minutes').text(minutes < 10 ? '0' + minutes : minutes);
}
function calendar(){
var time = new Date(),
arrmonth = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
arrday = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
month = time.getMonth();
$('#month2').text(arrmonth[month]);
$('#day').text(arrday[time.getDay()]);
$('#date').text(time.getDate());
$('#month').text(month + 1);
}
|
Цитата:
|
нет не шутка
|
это не шутка, это *****код )
|
| Часовой пояс GMT +3, время: 00:03. |