До окончания храния архива осталось:
0
5
0
2
2
1
3
На продающих страницах или на каких-то приглашениях на на семинары Вы часто видите счетчики обратного отсчета времени такие, как у меня показано в начале статьи. Я сам разобрался и хочу рассказать Вам (если, конечно, Вы этого не умеете), как это делается. Архив с примером я выложил на "Народ.ру", ссылку дам в конце статьи.
Между тегами <head> и <head> Вы должны поместить вызовы CSS и Javascript:
<link rel="stylesheet" type="text/css" href="http://Ваш адрес/css/Timer_style.css"/>
<script language="Javascript" type="text/javascript" src="http://Ваш адрес/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="http://Ваш адрес/js/jquery.lwtCountdown-0.9.5.js"></script>
<script language="Javascript" type="text/javascript" src="http://Ваш адрес/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="http://Ваш адрес/js/jquery.lwtCountdown-0.9.5.js"></script>
Между тегами <body> и </body> (т.е. на вашей странице) вставьте следующий код:
<div id="container">
<p align="center"><span style="font-family: georgia, palatino;font-size: 25px;color:red;">До окончания храния архива осталось:</span><p>
<!-- Начало панели счетчика -->
<div id="countdown_dashboard">
<div class="dash days_dash">
<div class="digit"><div style="display: none;" class="top">0</div>
<div style="display: block;" class="bottom">0</div></div> <div class="digit"><div style="display: none;" class="top">5</div>
<div style="display: block;" class="bottom">5</div></div> <span class="dash_title">Дней</span>
</div>
<div class="dash hours_dash">
<div class="digit"><div style="display: none;" class="top">0</div>
<div style="display: block;" class="bottom">0</div></div> <div class="digit"><div style="display: none;" class="top">2</div>
<div style="display: block;" class="bottom">2</div></div> <span class="dash_title">Часов</span> </div>
<div class="dash minutes_dash">
<div class="digit"><div style="display: none;" class="top">2</div>
<div style="display: block;" class="bottom">2</div></div> <div class="digit"><div style="display: none;" class="top">1</div>
<div style="display: block;" class="bottom">1</div></div> <span class="dash_title">Минут</span> </div>
<div class="dash seconds_dash">
<div class="digit"><div style="display: none;" class="top">3</div>
<div style="display: block;" class="bottom">3</div></div> <div class="digit"><div style="display: block; overflow: hidden; height: 4.83434px;
margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;" class="top">2</div>
<div style="display: block; overflow: hidden; height: 82.4634px;" class="bottom">3</div>
</div>
<span class="dash_title">Секунд</span> </div>
</div>
<!-- Завершение панели счетчика -->
<script language="javascript" type="text/javascript">
jQuery(document).ready(function() {
$('#countdown_dashboard').countDown({
targetDate: {
'day': 30,
'month': 10,
'year': 2012,
'hour': 23,
'min': 0,
'sec': 0
},
omitWeeks: true
}); }); </script>
</div>
<p align="center"><span style="font-family: georgia, palatino;font-size: 25px;color:red;">До окончания храния архива осталось:</span><p>
<!-- Начало панели счетчика -->
<div id="countdown_dashboard">
<div class="dash days_dash">
<div class="digit"><div style="display: none;" class="top">0</div>
<div style="display: block;" class="bottom">0</div></div> <div class="digit"><div style="display: none;" class="top">5</div>
<div style="display: block;" class="bottom">5</div></div> <span class="dash_title">Дней</span>
</div>
<div class="dash hours_dash">
<div class="digit"><div style="display: none;" class="top">0</div>
<div style="display: block;" class="bottom">0</div></div> <div class="digit"><div style="display: none;" class="top">2</div>
<div style="display: block;" class="bottom">2</div></div> <span class="dash_title">Часов</span> </div>
<div class="dash minutes_dash">
<div class="digit"><div style="display: none;" class="top">2</div>
<div style="display: block;" class="bottom">2</div></div> <div class="digit"><div style="display: none;" class="top">1</div>
<div style="display: block;" class="bottom">1</div></div> <span class="dash_title">Минут</span> </div>
<div class="dash seconds_dash">
<div class="digit"><div style="display: none;" class="top">3</div>
<div style="display: block;" class="bottom">3</div></div> <div class="digit"><div style="display: block; overflow: hidden; height: 4.83434px;
margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;" class="top">2</div>
<div style="display: block; overflow: hidden; height: 82.4634px;" class="bottom">3</div>
</div>
<span class="dash_title">Секунд</span> </div>
</div>
<!-- Завершение панели счетчика -->
<script language="javascript" type="text/javascript">
jQuery(document).ready(function() {
$('#countdown_dashboard').countDown({
targetDate: {
'day': 30,
'month': 10,
'year': 2012,
'hour': 23,
'min': 0,
'sec': 0
},
omitWeeks: true
}); }); </script>
</div>
Здесь Вы может задать нужные Вам дату и время:
'day': 30, - число
'month': 10, - месяц
'year': 2012, - год
'hour': 23, - часы
'min': 0, - минуты
'sec': 0 - секунды
'month': 10, - месяц
'year': 2012, - год
'hour': 23, - часы
'min': 0, - минуты
'sec': 0 - секунды
Скачать архив с примером и нужными файлами Вы можете здесь
Распакуйте его в любую директорию и запустите dedline.html
Удачи!
