

Таймер Обратного Отсчета Времени
#61
Отправлено 31 Май 2013 - 14:39
Часики работают!!!
Только осталось их привести к правильному виду как тут:
http://pcvector.net/...o-otscheta.html
чтобы были видны:
"дни, часы, минуты, секунды"
и расстояние также между парными
и можно ли их чуточку уменьшить? чтобы помещались у меня на банере (когда добавятся промежутки)
для этого нужно что-то прописать? или я могу просто в фотошопе уменьшить?
И еще: оказывается счетчик выставлен на определенное время, которое считается заново при перезагрузке страницы
Мне же нужно чтобы я выставляла счетчик до определенной даты
как это сделать??
#62
Отправлено 01 Июнь 2013 - 02:33
.cntSeparator { color: #000000; font-size: 54px; margin: 10px 7px; }
Для изменения размера таймера - необходимо уменьшить изображение digits.png и выставить корректные размеры данного изображения в настройках, а именно вам необходимо будет в main.js найти
$(function(){ $('#clockJS').countdown({ image: $('#assets_images_path').attr('rel') + 'digits.png', startTime: '01:12:12:00' }); });
и заменить на
$(function(){ $('#clockJS').countdown({ image: $('#assets_images_path').attr('rel') + 'digits.png', startTime: '01:12:12:00', digitWidth: 53, digitHeight: 77 }); });
где digitWidth и digitHeight размеры одного изображения.
Для выставления таймера до определенной даты необходимо задать формат и саму дату. Для этого необходимо изменить уже измененный код
$(function(){ $('#clockJS').countdown({ image: $('#assets_images_path').attr('rel') + 'digits.png', startTime: '01:12:12:00', digitWidth: 53, digitHeight: 77 }); });на следующий
$(function(){ var _date = new Date(); _date.setMonth(1); _date.setDate(9); _date.setHours(0); _date.setMinutes(0); _date.setSeconds(0); $('#clockJS').countdown({ image: $('#assets_images_path').attr('rel') + 'digits.png', startTime: _date, stepTime: 1, digitWidth: 53, digitHeight: 77 }); });
Где setMonth, setDate, setHours установка времени до определенной даты.
#63
Отправлено 01 Июнь 2013 - 09:37
Во-от!!
Круто!
осталась совсем малость..
внизу не хватает подписей "Дни, часы, минуты, секунды"
#64
Отправлено 08 Сентябрь 2013 - 22:35

#65
Отправлено 09 Сентябрь 2013 - 11:04
misha777 (08 Сентябрь 2013 - 22:35) писал:

Точно не знаю какой счетчик у Вас реализован.
Но можно воспользоваться таким решением - http://forum.storela...птом/#entry8953
#66
Отправлено 23 Март 2015 - 15:49
Цитата
<script type="text/javascript">function get_timer_479(string_was_479,string_sec_479) {var date_new_was_479 = new Date(string_was_479); var date_new_sec_479 = string_sec_479; var date_479 = new Date();var razn_479,left_479,left_n_479,vraz_479,ost_479;razn_479 = date_479 - date_new_was_479;left_479 = date_new_sec_479 - razn_479;if(left_479>0){left_n_479 = left_479;} else {if(Math.abs(left_479)>date_new_sec_479){vraz_479 = (Math.abs(left_479))/date_new_sec_479;vraz_479 = vraz_479.toString().split(".");left_n_479 = Math.abs(left_479) - (vraz_479[0])*date_new_sec_479;left_n_479 = date_new_sec_479 - left_n_479;} else {left_n_479 = date_new_sec_479 - Math.abs(left_479);}}ost_479 = left_n_479;var day_479 = parseInt(ost_479/(60*60*1000*24));if(day_479 < 10) {day_479 = "0" + day_479;}day_479 = day_479.toString();var hour_479 = parseInt(ost_479/(60*60*1000))%24;if(hour_479 < 10) {hour_479 = "0" + hour_479;}hour_479 = hour_479.toString();var min_479 = parseInt(ost_479/(1000*60))%60;if(min_479 < 10) {min_479 = "0" + min_479;}min_479 = min_479.toString();var sec_479 = parseInt(ost_479/1000)%60;if(sec_479 < 10) {sec_479 = "0" + sec_479;}sec_479 = sec_479.toString(); timethis_479 = day_479 + " : " + hour_479 + " : " + min_479 + " : " + sec_479;$(".timerhello_479 p.result .result-day").text(day_479);$(".timerhello_479 p.result .result-hour").text(hour_479);$(".timerhello_479 p.result .result-minute").text(min_479);$(".timerhello_479 p.result .result-second").text(sec_479);}function getfrominputs_479(){string_was_479 = "Mon Mar 23 2015 15:36:29 GMT+0300 (RTZ 2 (зима))"; string_sec_479 = "115400900"; get_timer_479(string_was_479,string_sec_479);setInterval(function(){get_timer_479(string_was_479,string_sec_479);},1000);}$(document).ready(function(){ getfrominputs_479();});</script>
<style type="text/css">/*третий*/.third-my{width: 260px;padding: 20px;text-align: center;}.third-my .result span.items{padding: 13px 6px;display: inline-block;margin: 0 4px 0 -5px;font-size: 23px;-webkit-border-radius: 28px;-moz-border-radius: 28px;border-radius: 28px;-webkit-box-shadow: 0px 1px 1px 0px rgb(178, 176, 176); -moz-box-shadow: 0px 1px 1px 0px rgb(178, 176, 176);box-shadow: 0px 1px 1px 0px rgb(178, 176, 176);background: rgb(254,187,187);background: -moz-linear-gradient(top, rgba(254,187,187,1) 0%, rgba(254,144,144,1) 45%, rgba(255,92,92,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,187,187,1)), color-stop(45%,rgba(254,144,144,1)), color-stop(100%,rgba(255,92,92,1)));background: -webkit-linear-gradient(top, rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);background: -o-linear-gradient(top, rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);background: -ms-linear-gradient(top, rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);background: linear-gradient(to bottom, rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#febbbb", endColorstr="#ff5c5c",GradientType=0 );color: black;text-shadow: 0px 1px 0px white;font-family: colibri;font-style: italic;font-weight: bold;min-width: 30px;letter-spacing: -1px;margin-top: 6px;}.third-my .result span.dot{ margin: 0 -1px;position: relative;left: -4px;font-size: 20px;font-family: colibri;font-style: italic;font-weight: bold;}.third-my .result span.firstnum{ font-family: colibri;font-style: italic;font-weight: bold;font-size: 22px;}.third-my .result {margin: 0 auto;width: 170px;}.third-my .titles{position: relative;height: 0;right: -23px;width: 300px;}.third-my .titles span{font-size: 10px;position: relative;top: 12px;}.third-my .titles span.mm{right: 18px;}.third-my .titles span.hh{right: 40px; }.third-my .titles span.dd{right: 62px;}.third-my p.titloftimer{ font-size: 22px;margin: 0 auto;left: 10px;position: relative;font-family: colibri;font-style: italic; }/*ресет*/.timerhello span{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline; }.timerhello p{font-size: 100%;font: inherit;color: #191919;font-family: Verdana, sans-serif; font-size: 13px;margin: 0 0 10px 0;line-height: 17px;}.clearf{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0; }p.hellotimercopy{display:none!important;} </style>
<div class="third-my timerhello timerhello_479">
<div class="third-my-content">
<p class="titloftimer">До конца акции:</p>
<br>
<p class="result">
<span class="result-day firstnum">01</span>
<span class="dot"> days</span>
<br>
<span class="result-hour items">08</span>
<span class="dot">:</span>
<span class="result-minute items">01</span>
<span class="dot">:</span>
<span class="result-second items">34</span>
</p>
<div class="clearf"></div>
</div>
</div>
<p class="hellotimercopy"><a href="http://hello-site.ru...>Hello-Site.ru. Бесплатный конструктор сайтов.</a></p>
<!-- HelloTimer http://hello-site.ru/timer/ -->
(брал отсюда: http://hello-site.ru/timer/)
куда-нибудь в это место на странице (прикрепил скриншот), чтобы он отображался на всех страницах?
#67
Отправлено 23 Март 2015 - 16:06
Iuhenio (23 Март 2015 - 15:49) писал:
(брал отсюда: http://hello-site.ru/timer/)
куда-нибудь в это место на странице (прикрепил скриншот), чтобы он отображался на всех страницах?
Код вам добавили, его расположение вы можете изменять в коде(main.css)
.third-my.timerhello.timerhello_479 { position: absolute; left: 1420px; top: 20px; }
#68
Отправлено 31 Март 2015 - 11:12
А то там не написано, как это делается ((
#69
Отправлено 31 Март 2015 - 11:18

#70
Отправлено 01 Апрель 2015 - 12:44
Подскажите, пожалуйста, как это можно исправить? Спасибо
#71
Отправлено 01 Апрель 2015 - 14:26
Iuhenio (01 Апрель 2015 - 12:44) писал:
Подскажите, пожалуйста, как это можно исправить? Спасибо
.third-my.timerhello.timerhello_479 { position: absolute; left: 1267px; top: 20px; }где вы можете поменять расположение таймера изменив значение
left: 1267px;
top: 20px;
#72
Отправлено 01 Апрель 2015 - 18:23


Фото я прикрепил )
#73
Отправлено 01 Апрель 2015 - 19:51
Iuhenio (01 Апрель 2015 - 18:23) писал:


Фото я прикрепил )
<!-- HelloTimer http://hello-site.ru/timer/ --> <script type="text/javascript">function get_timer_479(string_was_479,string_sec_479) {var date_new_was_479 = new Date(string_was_479); var date_new_sec_479 = string_sec_479; var date_479 = new Date();var razn_479,left_479,left_n_479,vraz_479,ost_479;razn_479 = date_479 - date_new_was_479;left_479 = date_new_sec_479 - razn_479;if(left_479>0){left_n_479 = left_479;} else {if(Math.abs(left_479)>date_new_sec_479){vraz_479 = (Math.abs(left_479))/date_new_sec_479;vraz_479 = vraz_479.toString().split(".");left_n_479 = Math.abs(left_479) - (vraz_479[0])*date_new_sec_479;left_n_479 = date_new_sec_479 - left_n_479;} else {left_n_479 = date_new_sec_479 - Math.abs(left_479);}}ost_479 = left_n_479;var day_479 = parseInt(ost_479/(60*60*1000*24));if(day_479 < 10) {day_479 = "0" + day_479;}day_479 = day_479.toString();var hour_479 = parseInt(ost_479/(60*60*1000))%24;if(hour_479 < 10) {hour_479 = "0" + hour_479;}hour_479 = hour_479.toString();var min_479 = parseInt(ost_479/(1000*60))%60;if(min_479 < 10) {min_479 = "0" + min_479;}min_479 = min_479.toString();var sec_479 = parseInt(ost_479/1000)%60;if(sec_479 < 10) {sec_479 = "0" + sec_479;}sec_479 = sec_479.toString(); timethis_479 = day_479 + " : " + hour_479 + " : " + min_479 + " : " + sec_479;$(".timerhello_479 p.result .result-day").text(day_479);$(".timerhello_479 p.result .result-hour").text(hour_479);$(".timerhello_479 p.result .result-minute").text(min_479);$(".timerhello_479 p.result .result-second").text(sec_479);}function getfrominputs_479(){string_was_479 = "Mon Mar 23 2015 15:36:29 GMT+0300 (RTZ 2 (зима))"; string_sec_479 = "115400900"; get_timer_479(string_was_479,string_sec_479);setInterval(function(){get_timer_479(string_was_479,string_sec_479);},1000);}$(document).ready(function(){ getfrominputs_479();});</script> <style type="text/css">/*третий*/.third-my{width: 260px;padding: 20px;text-align: center;}.third-my .result span.items{padding: 13px 6px;display: inline-block;margin: 0 4px 0 -5px;font-size: 23px;-webkit-border-radius: 28px;-moz-border-radius: 28px;border-radius: 28px;-webkit-box-shadow: 0px 1px 1px 0px rgb(178, 176, 176); -moz-box-shadow: 0px 1px 1px 0px rgb(178, 176, 176);box-shadow: 0px 1px 1px 0px rgb(178, 176, 176);background: rgb(254,187,187);background: -moz-linear-gradient(top, rgba(254,187,187,1) 0%, rgba(254,144,144,1) 45%, rgba(255,92,92,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,187,187,1)), color-stop(45%,rgba(254,144,144,1)), color-stop(100%,rgba(255,92,92,1)));background: -webkit-linear-gradient(top, rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);background: -o-linear-gradient(top, rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);background: -ms-linear-gradient(top, rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);background: linear-gradient(to bottom, rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#febbbb", endColorstr="#ff5c5c",GradientType=0 );color: black;text-shadow: 0px 1px 0px white;font-family: colibri;font-style: italic;font-weight: bold;min-width: 30px;letter-spacing: -1px;margin-top: 6px;}.third-my .result span.dot{ margin: 0 -1px;position: relative;left: -4px;font-size: 20px;font-family: colibri;font-style: italic;font-weight: bold;}.third-my .result span.firstnum{ font-family: colibri;font-style: italic;font-weight: bold;font-size: 22px;}.third-my .result {margin: 0 auto;width: 170px;}.third-my .titles{position: relative;height: 0;right: -23px;width: 300px;}.third-my .titles span{font-size: 10px;position: relative;top: 12px;}.third-my .titles span.mm{right: 18px;}.third-my .titles span.hh{right: 40px; }.third-my .titles span.dd{right: 62px;}.third-my p.titloftimer{ font-size: 22px;margin: 0 auto;left: 10px;position: relative;font-family: colibri;font-style: italic; }/*ресет*/.timerhello span{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline; }.timerhello p{font-size: 100%;font: inherit;color: #191919;font-family: Verdana, sans-serif; font-size: 13px;margin: 0 0 10px 0;line-height: 17px;}.clearf{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0; }p.hellotimercopy{display:none!important;} </style> <div class="third-my timerhello timerhello_479"> <div class="third-my-content"> <p class="titloftimer">До конца акции:</p> <br> <p class="result"> <span class="result-day firstnum">01</span> <span class="dot"> days</span> <br> <span class="result-hour items">08</span> <span class="dot">:</span> <span class="result-minute items">01</span> <span class="dot">:</span> <span class="result-second items">34</span> </p> <div class="clearf"></div> </div> </div> <p class="hellotimercopy"><a href="http://hello-site.ru%22%3Ehello-site.ru./">Hello-Site.ru. Бесплатный конструктор сайтов.</a></p> <!-- HelloTimer http://hello-site.ru/timer/ -->поставив его после
<!-- end Корзина -->и в main.css заменив
.third-my.timerhello.timerhello_479 { position: absolute; left: 1250px; top: 20px; }на
.third-my.timerhello.timerhello_479 { float: right; margin-right: -230px; }
#74
Отправлено 02 Апрель 2015 - 21:11
#75
Отправлено 03 Апрель 2015 - 02:04
.third-my.timerhello.timerhello_479 { left: 1250px; position: absolute; top: 20px; }
замените на:
.third-my.timerhello.timerhello_479 { left: 45%; position: absolute; top: -10px; }
#76
Отправлено 03 Апрель 2015 - 11:35

#78
Отправлено 06 Апрель 2015 - 10:21
Iuhenio (05 Апрель 2015 - 22:44) писал:
<!-- HelloTimer http://hello-site.ru/timer/ --> <script type="text/javascript">function get_timer_479(string_was_479,string_sec_479) {var date_new_was_479 = new Date(string_was_479); var date_new_sec_479 = string_sec_479; var date_479 = new Date();var razn_479,left_479,left_n_479,vraz_479,ost_479;razn_479 = date_479 - date_new_was_479;left_479 = date_new_sec_479 - razn_479;if(left_479>0){left_n_479 = left_479;} else {if(Math.abs(left_479)>date_new_sec_479){vraz_479 = (Math.abs(left_479))/date_new_sec_479;vraz_479 = vraz_479.toString().split(".");left_n_479 = Math.abs(left_479) - (vraz_479[0])*date_new_sec_479;left_n_479 = date_new_sec_479 - left_n_479;} else {left_n_479 = date_new_sec_479 - Math.abs(left_479);}}ost_479 = left_n_479;var day_479 = parseInt(ost_479/(60*60*1000*24));if(day_479 < 10) {day_479 = "0" + day_479;}day_479 = day_479.toString();var hour_479 = parseInt(ost_479/(60*60*1000))%24;if(hour_479 < 10) {hour_479 = "0" + hour_479;}hour_479 = hour_479.toString();var min_479 = parseInt(ost_479/(1000*60))%60;if(min_479 < 10) {min_479 = "0" + min_479;}min_479 = min_479.toString();var sec_479 = parseInt(ost_479/1000)%60;if(sec_479 < 10) {sec_479 = "0" + sec_479;}sec_479 = sec_479.toString(); timethis_479 = day_479 + " : " + hour_479 + " : " + min_479 + " : " + sec_479;$(".timerhello_479 p.result .result-day").text(day_479);$(".timerhello_479 p.result .result-hour").text(hour_479);$(".timerhello_479 p.result .result-minute").text(min_479);$(".timerhello_479 p.result .result-second").text(sec_479);}function getfrominputs_479(){string_was_479 = "Mon Mar 23 2015 15:36:29 GMT+0300 (RTZ 2 (зима))"; string_sec_479 = "115400900"; get_timer_479(string_was_479,string_sec_479);setInterval(function(){get_timer_479(string_was_479,string_sec_479);},1000);}$(document).ready(function(){ getfrominputs_479();});</script> <style type="text/css">/*третий*/.third-my{width: 260px;padding: 20px;text-align: center;}.third-my .result span.items{padding: 13px 6px;display: inline-block;margin: 0 4px 0 -5px;font-size: 23px;-webkit-border-radius: 28px;-moz-border-radius: 28px;border-radius: 28px;-webkit-box-shadow: 0px 1px 1px 0px rgb(178, 176, 176); -moz-box-shadow: 0px 1px 1px 0px rgb(178, 176, 176);box-shadow: 0px 1px 1px 0px rgb(178, 176, 176);background: rgb(254,187,187);background: -moz-linear-gradient(top, rgba(254,187,187,1) 0%, rgba(254,144,144,1) 45%, rgba(255,92,92,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,187,187,1)), color-stop(45%,rgba(254,144,144,1)), color-stop(100%,rgba(255,92,92,1)));background: -webkit-linear-gradient(top, rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);background: -o-linear-gradient(top, rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);background: -ms-linear-gradient(top, rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);background: linear-gradient(to bottom, rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#febbbb", endColorstr="#ff5c5c",GradientType=0 );color: black;text-shadow: 0px 1px 0px white;font-family: colibri;font-style: italic;font-weight: bold;min-width: 30px;letter-spacing: -1px;margin-top: 6px;}.third-my .result span.dot{ margin: 0 -1px;position: relative;left: -4px;font-size: 20px;font-family: colibri;font-style: italic;font-weight: bold;}.third-my .result span.firstnum{ font-family: colibri;font-style: italic;font-weight: bold;font-size: 22px;}.third-my .result {margin: 0 auto;width: 170px;}.third-my .titles{position: relative;height: 0;right: -23px;width: 300px;}.third-my .titles span{font-size: 10px;position: relative;top: 12px;}.third-my .titles span.mm{right: 18px;}.third-my .titles span.hh{right: 40px; }.third-my .titles span.dd{right: 62px;}.third-my p.titloftimer{ font-size: 22px;margin: 0 auto;left: 10px;position: relative;font-family: colibri;font-style: italic; }/*ресет*/.timerhello span{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline; }.timerhello p{font-size: 100%;font: inherit;color: #191919;font-family: Verdana, sans-serif; font-size: 13px;margin: 0 0 10px 0;line-height: 17px;}.clearf{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0; }p.hellotimercopy{display:none!important;} </style> <div class="third-my timerhello timerhello_479"> <div class="third-my-content"> <p class="titloftimer">До конца акции:</p> <br> <p class="result"> <span class="result-day firstnum">01</span> <span class="dot"> days</span> <br> <span class="result-hour items">08</span> <span class="dot">:</span> <span class="result-minute items">01</span> <span class="dot">:</span> <span class="result-second items">34</span> </p> <div class="clearf"></div> </div> </div> <p class="hellotimercopy"><a href="http://hello-site.ru%22%3Ehello-site.ru./">Hello-Site.ru. Бесплатный конструктор сайтов.</a></p> <!-- HelloTimer http://hello-site.ru/timer/ -->поставив после
<!-- end Корзина -->и в main.css замените
.third-my.timerhello.timerhello_479 { position: absolute; left: 1250px; top: 20px; }на
.third-my.timerhello.timerhello_479 { position: absolute; right: -300px; top: 20px; }после чего
.third-my .result { margin: 0 auto; width: 170px; }
.third-my .result { margin: 0 auto; width: 190px; }
#79
Отправлено 17 Апрель 2015 - 22:47
При добавлении таймера в правую часть страницы появляется горизонтальный скроллинг... Можно этого как-то избежать?
Аккаунт SL-293324
Спасибо
#80
Отправлено 18 Апрель 2015 - 02:18
{BODY}
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных