Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Делаем страницу-заглушку при помощи HTML5 и CSS3

5 сентября 2012 | Опубликовано в css | 11 Комментариев »

В этом уроке мы собираемся создать страницу-заглушку при помощи HTML5 и CSS3 в минималистском стиле и светлых тонах. В этом уроке мы будем также использовать некоторые новые теги HTML5  и некоторые интересные атрибуты, такие как «placeholder» и «required» для формы подписки. Атрибут «placeholder»  позволяет нам показывать текст в поле ввода электронной почте, когда он пуст, в то время как атрибут  «required» позволяет сделать, так чтобы пользователь не мог отправить форму без ввода данных. Мы также добавим JQuery-код  этих двух атрибутов для старых браузеров и браузеров, которые  пока их не поддерживают. Для таймера обратного отсчета мы будем использовать JQuery и jQuery countdown plugin от tutorialzine.com. Конечно, мы немного его настроим, чтобы соответствовать нашему дизайну.

 

Окончательный результат:

Смотреть демо

Как видите, страница содержит много градиентов и теней. Мы будем делать её, используя только CSS3. Как вы, наверняка знаете, CSS3 предоставляет нам много новых свойств, которые позволяют создавать интересные эффекты без необходимости использования изображений.

Так, хватит болтать и начнем.

1. Структура файла

Создайте папку и назовите “coming-soon-page”. Внутри этой папки будут следующие файлы и папки:

  • index.html –основной HTML-документ;
  • css— папка со стилями,
    • style.css – основные стили,
    • reset.css – файл для сброса стилей (meyerweb),
    • ie.css – файл для Internet Explorer 7 и 8;
  • js— папка с файлами JavaScript,
    • jquery.countdown.js – плагин jQuery для обратного отсчета времени,
    • script.js – наш JavaScript-файл для установки таймера, для анимации и некоторых атрибутов html5, которые не поддерживаются
    • modernizr.custom.js – файл с шаблоном modernizr;
  • images – папка для изображений;
  • fonts – папка со шрифтами

2. Структура страницы

Ниже вы видите основную HTML-разметку страницы:

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8" />

	<title>Minimal Coming Soon Page</title>

	<!-- CSS -->
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="fonts/stylesheet.css">
	<link rel="stylesheet" href="css/style.css">

	<!--[if lt IE 9]> 
		<link rel="stylesheet" href="css/ie.css">
	<![endif]-->

	<!-- IE fix for HTML5 tags -->
	<!--[if lt IE 9]> 
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- jQuery and Modernizr-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="js/modernizr.custom.js"></script>

	<!-- Countdown timer and other animations -->
	<script src="js/jquery.countdown.js"></script>
	<script src="js/script.js"></script>

</head>

<body>

	<header>
		<!-- The headline and description of our page -->
	</header>

	<div id="main">
		<div id="links">
			<!-- The main links, support, download, etc. -->
		</div>

		<div id="counter">
			<!-- The countdown timer -->
		</div>

		<form action="" method="get">
			<!-- The subscription form -->
		</form>

		<div class="social-media-arrow">
			<!-- The social media arrow, on the right of the page -->
		</div>

		<footer>
			<!-- The page's footer that will contain the social icons -->
		</footer>
	</div>

</body>
</html> 

 

Как видите, код HTML очень прост. В теге «head»  мы прикрепили все стили и JavaScript-файлы, которые нам нужны.

Также мы добавили условные комментарии для файла «ie.css». В этом файле мы добавим несколько строк для IE 7-8. Мы также прикрепили файл  «html5.js» для того, чтобы заставить  IE 7 и 8 понимать новые теги HTML5, “header” и “footer”.

Тело нашей страницы содержит хедер, в который мы поместим заголовок и описание страницы, и див «main», в который мы поместим ссылки, таймер обратного отсчета, форму подписки и футер.

Вот стили для тела страницы. Мы будем использовать в основном шрифт Arial (за исключением таймера) и повторяющийся паттерн для фона:

body {
	background: url(../images/body-pattern.jpg) top left repeat;
	font-family: Arial, Helvetica, sans-serif;
	padding-bottom: 40px;
} 

3. Хедер


Как было сказано выше, наш хедер будет содержать заголовок и описание. Вот разметка HTML:


<header>
	<h1>We are working our butts off to finish this website</h1>
	<p>Our developer, Michael, is doing his best to finish this website before the counter, but we can’t help him.</p>
</header> 

А вот и стили:

/* ---- Header ---- */

header {
	width: 720px;
	margin: 80px auto 0 auto;
}

header h1 {
	font-size: 30px;
	font-weight: bold;
	color: #272727;
	text-shadow: 0 1px 0 #fff;
}
header p {
	margin: 20px 0 0 3px;
	font-size: 14px;
	color: #272727;
}

Теперь наша страница выглядит следующим образом:

 

4. Основная область

Основная  область будет содержать ссылки, таймер, форму подписки, футер и социальные иконки.
Вот ее стили:

/* ---- Main Area ---- */
#main {
	position: relative;
	width: 700px;
	margin: 50px auto 0 auto;
	padding: 20px 0 0 25px;
	background: url(../images/main-content-pattern.jpg) top left repeat;
}

Она имеет ширину 700 пикселей и повторяющийся рисунок с сеткой в качестве фона и у нее относительное позиционирование.

5. Ссылки

Ниже вы можете увидеть HTML-разметку для ссылок:

<div id="links">
	<div class="home"><a href="">http://1stwebdesigner.com/</a></div>
	<div class="support"><a href="">http://support.1wd.com/</a></div>
	<div class="browser"><a href="">Google Chrome OS. 10.X.23</a></div>
	<div class="books"><a href="">http://1wd.co/e-books/</a></div>
	<div class="download"><a href="">http://1wd.com/download/</a></div>
	<div class="ups"><a href="">UPS Signed Worldwide</a></div>
</div>

И CSS:

/* ---- Links ---- */

#links {
	width: 700px;
	font-size: 12px;
	font-weight: bold;
	color: #aaa;
	line-height: 18px;
	overflow: hidden;
}

#links a {
	position: relative;
	color: #aaa;
	text-decoration: none;
}

#links a:hover {
	color: #aaa;
	text-decoration: none;
}

.home, .support, .browser, .books, .download, .ups {
	float: left;
	width: 180px;
	margin-left: 42px;
	padding-left: 25px;
}

.home { background: url(../images/home.png) left center no-repeat; margin-left: 0; }
.support { background: url(../images/support.png) left center no-repeat; }
.browser { background: url(../images/browser.png) left center no-repeat; clear: right; }

.books, .download, .ups { margin-top: 10px; }
.books { background: url(../images/books.png) left center no-repeat; margin-left: 0; }
.download { background: url(../images/download.png) left center no-repeat; }
.ups { background: url(../images/ups.png) left center no-repeat; clear: right; } 

Область ссылок имеет ширину 700 пикселей, а у каждой ссылки есть своя собственная  иконка. Мы немного поиграли с отступами, чтобы сделать так, чтобы они соответствовали дизайну. А еще мы используем относительное позиционирование для ссылкок, чтобы позже можно было добавить простую анимацию к ним при помощи JQuery.

Страница должна выглядеть следующим образом:

6. Таймер обратного отсчета

Для создания таймера обратного отсчета мы будем использовать jQuery countdown plugin от tutorialzine.com. Наш таймер включает в себя див “counter”.  Вот его HTML-код:

<div id="counter"></div> 

Див “counter” будет пустым, потому что весь HTML-код будет генерироваться плагином jQuery. Вот HTML-код, который генерирует плагин:

<div id="counter" class="countdownHolder">

	<div class="countDays">
		<span class="position">
			<span class="digit static">0</span>
		</span>
		<span class="position">
			<span class="digit static">0</span>
		</span>
		<span class="boxName">
			<span class="Days">DAYS</span>
		</span>
	</div>
	<span class="points">:</span>
	<span class="countDiv countDiv0"></span>

	<div class="countHours">
		<span class="position">
			<span class="digit static">0</span>
		</span>
		<span class="position">
			<span class="digit static">0</span>
		</span>
		<span class="boxName">
			<span class="Hours">HRS</span>
		</span>
	</div>
	<span class="points">:</span>
	<span class="countDiv countDiv1"></span>

	<div class="countMinutes">
		<span class="position">
			<span class="digit static">0</span>
		</span>
		<span class="position">
			<span class="digit static">0</span>
		</span>
		<span class="boxName">
			<span class="Minutes">MNTS</span>
		</span>
	</div>
	<span class="points">:</span>
	<span class="countDiv countDiv2"></span>

	<div class="countSeconds">
		<span class="position">
			<span class="digit static">0</span>
		</span>
		<span class="position">
			<span class="digit static">0</span>
		</span>
		<span class="boxName">
			<span class="Seconds">SECS</span>
		</span>
	</div>
</div>

В зависимости от времени, которые мы ставим при инициализации счетчика, плагин будет показывать четыре колонки цифр («Дни», «часы», «минуты», «секунды») и анимировать таймер.

Примечание: Мы не будем объяснять плагин более подробно. Мартин Ангелов (Martin Angelov), создатель этого плагина очень подробно объясняет это на tutorialzine.

Теперь давайте добавим стили нашему счетчику:

/* ---- Counter ---- */

#counter {
	width: 700px;
	height: 145px;
	margin: 55px auto 0 auto;
	font-family: 'LeagueGothicRegular', Arial, Helvetica, sans-serif;
	font-size: 92px;
	color: #272727;
	text-shadow: 0 1px 0 #fff;
	overflow: hidden;
}

.countDays, .countHours, .countMinutes, .countSeconds {
	float: left;
	width: 102px;
	height: 138px;
	padding-left: 36px;
	background: #e7e7e7;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.07)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
	background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
	background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
	background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
	border: 1px solid #ccc;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow:
		0 2px 3px 0 rgba(255,255,255,.2) inset,
		0 2px 2px 0 rgba(0,0,0,.1);
	-webkit-box-shadow:
		0 2px 3px 0 rgba(255,255,255,.2) inset,
		0 2px 2px 0 rgba(0,0,0,.1);
	box-shadow:
		0 2px 3px 0 rgba(255,255,255,.2) inset,
		0 2px 2px 0 rgba(0,0,0,.1);
}

.points {
	float: left;
	width: 40px;
	margin: 0;
	font-family: Georgia, serif;
	font-size: 44px;
	font-weight: bold;
	text-align: center;
	line-height: 138px;
	text-shadow: none;
}

.position {
	position: relative;
	float: left;
	width: 35px;
	height: 92px;
	margin: 8px 0 0 0;
}

.digit {
	position: absolute;
	top: 0;
	left: 0;
}

.boxName {
	float: left;
	width: 80px;
	margin: -5px 0 0 7px;
	font-size: 36px;
	color: #a6a6a6;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.Hours { margin-left: 5px; }
.Seconds { margin-left: 2px; }

Мы выбрали шрифт «League Gothic" .

Как видите, мы использовали только CSS3-свойства для создания теней и градиентов. Эти новые свойства позволяет создавать сложные проекты без необходимости нарезки изображений.

CSS3 свойства, которые  используемые здесь: «border-radius”, “box-shadow”, “linear-gradient” и “text-shadow”.

Мы также использовали атрибут „RGBA“ , потому что  он позволяет присвоить прозрачного цвета с различными свойствами CSS.

Теперь мы инициализируем таймер обратного отсчета путем добавления этих строк в „script.js“ файл (внутри „JS“ папки):

$(document).ready(function(){

	/* ---- Countdown timer ---- */

	$('#counter').countdown({
		timestamp : (new Date()).getTime() + 51*24*60*60*1000
	});
});

Теперь наш счетчик показывает, сколько осталось времени (51 день начиная с настоящего момета). Он выглядит так:

7. Форма подписки

Для формы подписки мы будем использовать 2 новых HTML5-атрибута,о которых мы говорили ранее. Это “placeholder” и “required”. Вот HTML-код нашей формы:

<form action="" method="get">
	<input type="text" class="email" placeholder="Input your e-mail address here..." required />
	<input type="submit" class="submit" value="Let me Notified" />
</form> 

У нас есть текстовое поле и кнопка для отправки формы. В текстовом поле  пользователь обязательно должен ввести  адрес электронной почты перед отправкой формы. Если оно будет незаполненым, появится текст „Введите ваш адрес электронной почты здесь ...“. \


Давайте немного украсим нашу форму:

/* ---- Subscription Form ---- */

form {
	position: relative;
	margin: 40px auto 0 auto;
}

.email {
	width: 498px;
	height: 35px;
	padding: 0 15px;
	background: #f1f1f1;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.02)), to(rgba(0,0,0,.02)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
	background-image: -ms-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
	background-image: -o-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
	background-image: linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
	border: 1px solid #cbcbcb;
	-moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
	-webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #b3b2b2;
	font-style: italic;
}

.email:focus {
	outline: 0;
	border: 1px solid #c0c0c0;
	-moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
	-webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
}

.submit {
	width: 140px;
	height: 37px;
	margin: 0 0 0 5px;
	padding: 0;
	background: #888;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
	border: 1px solid #636363;
	-moz-box-shadow:
		0 1px 2px 0 rgba(253,252,252,.35) inset,
		0 -1px 2px 0 rgba(0,0,0,.15) inset;
	-webkit-box-shadow:
		0 1px 2px 0 rgba(253,252,252,.35) inset,
		0 -1px 2px 0 rgba(0,0,0,.15) inset;
	box-shadow:
		0 1px 2px 0 rgba(253,252,252,.35) inset,
		0 -1px 2px 0 rgba(0,0,0,.15) inset;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.35);
	line-height: 13px;
	cursor: pointer;
}

.submit:hover {
	background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1)));
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -ms-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -o-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
	-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
	-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
}
.submit:active {
	-moz-box-shadow:
		0 1px 2px 0 rgba(0,0,0,.15) inset,
		0 3px 13px 3px rgba(0,0,0,.3) inset;
	-webkit-box-shadow:
		0 1px 2px 0 rgba(0,0,0,.15) inset,
		0 3px 13px 3px rgba(0,0,0,.3) inset;
	box-shadow:
		0 1px 2px 0 rgba(0,0,0,.15) inset,
		0 3px 13px 3px rgba(0,0,0,.3) inset;
	color: #ddd;
} 

Как видите, мы использовали псевдо-классы :hover, :focus и :active и те же CSS3-свойства для нашего счетчика, “border-radius”, “box-shadow”, “linear-gradient” и “text-shadow”.

Так будет выглядеть наша форма, если поле будет незаполнено:

Два новых атрибутов HTML5 (placeholder” и “required”) очень полезны и могут сэкономить много времени, но они не поддерживаются старыми браузерами, такими  как Internet Explorer 7 и 8. Мы решим эту проблему при помощи библиотеки Modernizr.

Safari также не поддерживает атрибут „required“ , но Modernizr возвращает „true“ при проверке

.
После подключения Modernizr (файл „modernizr.custom.js“) в „head“ , мы должны добавить эти строки в „script.js“ файл:

/* ---- Using Modernizr to check if the "required" and "placeholder" attributes are supported ---- */

if (!Modernizr.input.placeholder) {
	$('.email').val('Input your e-mail address here...');
	$('.email').focus(function() {
		if($(this).val() == 'Input your e-mail address here...') {
			$(this).val('');
		}
	});
}

// for detecting if the browser is Safari
var browser = navigator.userAgent.toLowerCase();
if(!Modernizr.input.required || (browser.indexOf("safari") != -1 && browser.indexOf("chrome") == -1)) {
	$('form').submit(function() {
		$('.popup').remove();
		if(!$('.email').val() || $('.email').val() == 'Input your e-mail address here...') {
			$('form').append('<p class="popup">Please fill out this field.</p>');
			$('.email').focus();
			return false;
		}
	});
	$('.email').keydown(function() {
		$('.popup').remove();
	});
	$('.email').blur(function() {
		$('.popup').remove();
	});
}

Вот CSS-код для  всплывающего окна и поля под текстовым полем:

.popup {
	position: absolute;
	top: 45px;
	left: 0;
	width: 140px;
	padding: 10px;
	background: #e7e7e7;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #888;
}

Теперь, если вы открыли  Safari  и нажали кнопку „submit“  и не ввели текст, наша форма будет выглядеть так:

8. Футер

В футер мы добавим социальные иконки с прикрепленными к ним ссылками.

Вот разметка футера:

<footer>
	<ul>
		<li><a class="digg" href=""></a></li>
		<li><a class="twitter" href=""></a></li>
		<li><a class="vimeo" href=""></a></li>
		<li><a class="skype" href=""></a></li>
	</ul>
</footer>

И CSS:

/* ---- Footer ---- */

footer {
	width: 700px;
	margin: 0 auto;
	padding: 35px 0 25px 0;
	overflow: hidden;
}

footer ul {
	float: right;
	width: 125px;
	height: 22px;
}

footer ul li {
	float: left;
}

footer a {
	position: relative;
	display: block;
	margin-left: 10px;
}

.digg {
	width: 10px;
	height: 16px;
	background: url(../images/digg.png) center center no-repeat;
}

.twitter {
	width: 21px;
	height: 16px;
	background: url(../images/twitter.png) center center no-repeat;
}

.vimeo {
	width: 16px;
	height: 16px;
	background: url(../images/vimeo.png) center center no-repeat;
}
.skype {
	width: 16px;
	height: 16px;
	background: url(../images/skype.png) center center no-repeat;
}

Мы также добавим стрелку, чтобы наша страница выглядела профессионально. Для этого нам понадобится пустой див:

<div class="social-media-arrow"></div> 

А также добавим следующие стили:

.social-media-arrow {
	position: absolute;
	top: 125px;
	right: -95px;
	width: 108px;
	height: 256px;
	background: url(../images/social-media-arrow.png) top left no-repeat;
}

Наша страница должна выглядеть так:

9. Немного jQuery-анимации

Теперь давайте немного анимируем социальные иконки и ссылки, когда пользователь наводит на них мышкой. Для этого добавим несколько строчек  в файл “script.js” :

/* ---- Animations ---- */

$('#links a').hover(
	function(){ $(this).animate({ left: 3 }, 'fast'); },
	function(){ $(this).animate({ left: 0 }, 'fast'); }
);
$('footer a').hover(
	function(){ $(this).animate({ top: 3 }, 'fast'); },
	function(){ $(this).animate({ top: 0 }, 'fast'); }
)

10. Добавляем стили для Internet Explorer 7 – 8

Добавьте следующие стили в файл “ie.css” :

.email {
	line-height: 35px;
}

Мы добавили эти стили потому, что в IE 7 и 8 текстовое поле не отражает текст центрированым по вертикали.

Заключение

Наконец мы создали страницу-»заглушку" и готовы использовать ее на нашем сайте. Мы использовали некоторые новые свойства CSS3 и несколько новых тегов HTML5 и атрибуты, которые спасли нам много времени и сделали нашу страницы быстрой и легкой.

Итак, что вы думаете по поводу этого урока? Узнали ли вы что-то новое? Кроме того, что вы думаете об этих новых свойств? Будете ли вы использовать их? Или вы хотите, чтобы ждать, пока они лучше поддерживаются различными браузерами?

Примечание: Исходники вы можете скачать на сайте автора

Автор: 1stwebdesigner

Перевод: Дежурка




Комментарии

  1. Артём
    Thumb up Thumb down +3

    Спасибо, пригодится)

  2. Борган
    Thumb up Thumb down 0

    Америку не открыли) но всё равно интересно

  3. Тёмный кролик
    Thumb up Thumb down +1

    В заголовке ничего про использование JavaScript не сказано. А я то было обрадовался...

  4. Игорь
    Thumb up Thumb down +1

    Спасибо за урок. Действительно, в наше время уже давно стоит применять эти удобные функции HTML5 и CSS3.

    Жаль что еще нужен бубен для ИЕ и сафари.

  5. Алексей
    Thumb up Thumb down +1

    Спасибо, полезно! Только как сделать, что бы при обновлении страницы счетчик не обнулялся?

  6. stas
    Thumb up Thumb down 0

    помогите пожалуйста!

    как сделать что бы таймер можно было настраивать на определённую дату?

    очень нужна ваша помощь

    спасибо

  7. Дмитрий
    Thumb up Thumb down 0

    Бестолковая весчь, он даже к дате не привязан...Обнавляешь страницу-он опять заново отсчёт начинает

  8. Denis
    Thumb up Thumb down +1

    Всё просто. В JS-файле «script.js» меняете 8-ю строку с

    timestamp : (new Date ()).getTime () + 51*24*60*60*1000

    на:

    timestamp : (new Date (year, month, date[, hours, minutes, seconds]))

    где year в формате XXXX,

    month от 0 до 11 (янв ... декабрь)

    date от 1 до 31

    и не обязательные параметры: hours — 0..23, minutes — 0..59, seconds — 0..59

    Ильгар Ответ:

    Thumb up Thumb down 0

    Не работает код, так как при установке даты открытия на месяц вперед, циферки выдают 60 дней, хотя должны 29

  9. Прохор
    Thumb up Thumb down 0

    Что-то я пропустил или не понял. А как настроить саму форму отправки email, куда он отправляется или где я могу посмотреть введенные пользователями emal-ы ? Спасибо.

Похожие статьи