Форум

roma13 · #1 (**permalink**) 13.12.2013, 10:49

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>&nbsp;&nbsp;&nbsp;
				<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>&nbsp;&nbsp;&nbsp;
				<span id = 'seconds'></span>
			</p>
		</h2>
	</body>
</html>

animhotep · #2 (**permalink**) 13.12.2013, 13:53

молодец!

nice_try · #3 (**permalink**) 13.12.2013, 13:55

а где посмотреть пример можно?

roma13 · #4 (**permalink**) 13.12.2013, 15:17

http://yadi.sk/d/jkifTUmTEFqKm

animhotep · #5 (**permalink**) 13.12.2013, 15:23

круто, но можно ещё пару плагинов jquery подключить и будет вобще тру

roma13 · #6 (**permalink**) 14.12.2013, 09:07

Огромное спасибо animhotep за совет

ruslan_mart · #7 (**permalink**) 14.12.2013, 14:21

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);
}

BETEPAH · #8 (**permalink**) 14.12.2013, 20:09

Сообщение от roma13

23 arrmonth[0] = 'January';
24 arrmonth[1] = 'February';
25 arrmonth[2] = 'March';
26 arrmonth[3] = 'April';
27 arrmonth[4] = 'May';
28 arrmonth[5] = 'June';
29 arrmonth[6] = 'July';
30 arrmonth[7] = 'August';
31 arrmonth[8] = 'September';
32 arrmonth[9] = 'October';
33 arrmonth[10] = 'November';
34 arrmonth[11] = 'December';

Это не шутка?

roma13 · #9 (**permalink**) 20.12.2013, 11:15

нет не шутка

animhotep · #10 (**permalink**) 20.12.2013, 12:03

это не шутка, это *****код )

Форум

Справочник

Discord чат

Курсы javascript