VPF::Обратный отсчет - Форум программистов

Alix36

Дата 23.3.2009, 14:50 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 478
Регистрация: 6.11.2006

Репутация: нет
Всего: 3

Как можно сделать счетчик, который будет считать сколько осталось Месяцев, Дней, Часов, минут и секунд до 1 декабря 2009 года?

По идеи нужно получить текущее время, вычесть его из времени соответствующему 1-12-2009, получим количество миллисекунд.
Вопрос, как правильнее это сделать и как потом разбить переменную на месяцы, дни и тд.

--------------------

Наши лица как дым, И никто не узнает как мы победим. (С)Пикник.

bars80080

Дата 23.3.2009, 15:08 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315

дык, в любой книжке по js

Код


//текущая дата

var cur = new Data();

//целевая дата

var tar = new Date(2009,11,1);

//разница

var dif = tar.getTime() - cur.getTime;

//вывод:

var day = 86400000;
var hour = 3600000;
var minute = 60000;
var days = Math.floor(time/day);
var hours = Math.floor(time/hour);
var minutes = Math.floor(time/minute);
var txt = days + ' дней, ' + hours + ' часов, ' + minutes + ' минут';
alert('осталось ' + txt);

Это сообщение отредактировал(а) bars80080 - 23.3.2009, 15:08

Alix36

Дата 23.3.2009, 16:02 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 478
Регистрация: 6.11.2006

Репутация: нет
Всего: 3

3 строка date
11 строка, не хватает "()"
это, если кому-то понадобиться так.

Но мне не так нужно,
мне нужно, чтоб показывало сколько осталось месяцев+сколько дней+сколько часов
т.е. чтоб была верна такая формула

(((Колл.Месяцев*30+Колл.Дней)*24+колл.Часов)*60+колл.минут)*60+колл.секунд = сколько секунд осталось до часа Х

А в том примере
Колл.Месяцев*30*24*60*60=Колл.Дней*24*60*60=....=сколько секунд осталось до часа Х

--------------------

Наши лица как дым, И никто не узнает как мы победим. (С)Пикник.

Soah

Дата 23.3.2009, 18:52 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 512
Регистрация: 18.2.2009

Репутация: 13
Всего: 54

Код


var cur = new Date();

//целевая дата

var tar = new Date(2009, 11, 1);

//разница

var time = tar.getTime() - cur.getTime();

//вывод:
var month = 2592000000; //1000*60*60*24*30 = 2592000000, 30 дней в месяце
var day = 86400000;
var hour = 3600000;
var minute = 60000;
var second = 1000;

var months = Math.floor(time/month);
var days = Math.floor(time%month/day);
var hours = Math.floor(time%day/hour);
var minutes = Math.floor(time%hour/minute);
var seconds = Math.floor(time%minute/second);
var txt = months + ' месяцев, ' + days + ' дней, ' + hours + ' часов, ' + minutes + ' минут, ' + seconds + ' секунд';
alert('осталось ' + txt);

так нормально?

ksnk

Дата 23.3.2009, 20:04 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Soah, оно забавно ведет себя на границе смена дат...

Почему-то всегда, накануне 1 апреля такие темы возникают, может в поиске чего найдется?

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Soah

Дата 23.3.2009, 20:21 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 512
Регистрация: 18.2.2009

Репутация: 13
Всего: 54

ksnk, я код не тестировал,
к тому же, мы считаем что в месяце 30.

имхо, надо вычитать секунды из секунд, если не хватает, минуты -1, а секунды + 60, и вычитать... всё как в школе

liliana2

Дата 8.5.2010, 02:50 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

Облазила весь инет так и не нашла, как же сделать обратный отсчет только секунд, начиная с 30 например и далее 29, 28 и т.д. при момощи jquery, гуру скрипта, помогите, подскажите пожалуйста, а кому не жалко, может и на пример наведете...

SelenIT

Дата 8.5.2010, 03:53 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 7
Всего: 401

liliana2, вот первое, что нашлось в Гугле по запросу "обратный отсчет jquery": если из timeDifference выбросить всё, не относящееся к seconds, а конечную дату задать как-нибудь вроде (new Date(new Date() + 30000)) - не решение?

Кстати, имхо, подсчет интервалов в том скрипте сделан грамотнее, чем предложил Soah. Только автору надо бы пойти до конца и учесть "граничные эффекты" при переходе не только между годами и месяцами, но и сутками, часами и минутами (на что намекает последний коммент к статье)...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

liliana2

Дата 8.5.2010, 09:43 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

я не смогла даже так это раз, а во-вторых, глупо, мне кажется использовать такие мега цифра ради обратного отсчета из 15

ksnk

Дата 8.5.2010, 10:07 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Код


<input style="width:100px;" type="button" value="start 30 sec interval" onclick='startInterval(this,30)'>
<script>
function time(){var d=new Date(); return d.getTime();}
var _interval;
function startInterval(el,sec){
  if (_interval) return;
  var startTime=time()
     ,oldValue=el.value;
  _interval =setInterval(function(){
     var cur=Math.round(sec-(time()-startTime)/1000);
     if(cur<0) {
         el.value=oldValue;
         clearInterval(_interval);
         _interval=null;
     } else 
         el.value=cur ;
  },500);
  el.value=sec;
}
</script>

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

liliana2

Дата 8.5.2010, 14:07 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

Спасибо, но вот опять загвоздка, не могу заставить работать это одновременно, и чтобы таймер был допустим в диве...

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
<script type="text/javascript" src="jquery.js"></script>
    
  <style>
.box { 
background-color:white; 
width:300px; 
border:1px solid black;
height: 22px;
margin-bottom: 12px;
}
.progress {
background-color:orange; 
width:0; 
height: 22px;
}
.progress1 {
background-color:orange; 
width:0; 
height: 22px;
}
.progress2 {
background-color:orange; 
width:0; 
height: 22px;
}

.progress4 {
background-color:red; 
width:0; 
height: 50px;
}
.style1 span {
    display: block;
    float: left;
    margin: 10px;
}
.countdown_amount, .countdown_section  {
    display: none;
}
</style>



</head>
<body>

    <button id="go">&raquo; Run</button>

<div class="box">
    <div class="progress"></div>
</div>
<div class="box">
    <div class="progress1"></div>
</div>
<div class="box">
    <div class="progress2"></div>
</div>

    <div class="progress4"></div>

<input style="width:100px;" type="button" value="start 30 sec interval" onclick='startInterval(this,30)'>

<script>

// Using multiple unit types within one animation.
$("#go").click(function(){
  $(".progress").animate({ 
    width: "100%",
  }, 15000, function() {

  $(".progress1").animate({ 
    width: "100%",
  }, 15000, function (){
  $(".progress2").animate({
    width: "100%",
  }, 15000 );
  });
  });
  
});
</script>



<script>
function time(){var d=new Date(); return d.getTime();}
var _interval;
function startInterval(el,sec){
  if (_interval) return;
  var startTime=time()
     ,oldValue=el.value;
  _interval =setInterval(function(){
     var cur=Math.round(sec-(time()-startTime)/1000);
     if(cur<0) {
         el.value=oldValue;
         clearInterval(_interval);
         _interval=null;
     } else 
         el.value=cur ;
  },500);
  el.value=sec;
}
</script>
</body>
</html>

Вот ссылка:
http://liliana2.glina.net.ru/work_folder/index.html

EmilRegis

Дата 8.5.2010, 14:38 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: 3
Всего: 4

сильно не смотрел, но, чтобы то же самое было в диве надо в функции startInterval заменить el.value на el.innerHTML

кстати проверьте - по ссылке у вас не может найти файл jquery.js

liliana2

Дата 10.5.2010, 19:41 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

нет, не помогло
Но нашла другой способ
Теперь не могу вывести массив...

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
<script type="text/javascript" src="jquery.js"></script>
    
  <style>
.box { 
background-color:white; 
width:300px; 
border:1px solid black;
height: 22px;
margin-bottom: 12px;
}
.progress {
background-color:orange; 
width:0; 
height: 22px;
}
.progress1 {
background-color:orange; 
width:0; 
height: 22px;
}
.progress2 {
background-color:orange; 
width:0; 
height: 22px;
}

.progress4 {
background-color:red; 
width:0; 
height: 50px;
}
.style1 span {
    display: block;
    float: left;
    margin: 10px;
}
.countdown_amount, .countdown_section  {
    display: none;
}
</style>
</head>


<body>
    <button id="go">&raquo; Run</button>

<div class="box">
    <div class="progress"></div>
</div>
<div class="box">
    <div class="progress1"></div>
</div>
<div class="box">
    <div class="progress2"></div>
</div>

    <div class="progress4"></div>

<div id="timer_inp">15</div>


<script type="text/javascript">
$("#go").click(function(){


function timer(){
 var obj=document.getElementById('timer_inp');
 obj.innerHTML--;



  $(".progress").animate({ 
    width: "100%",
  }, 14000, function() {

  $(".progress1").animate({ 
    width: "100%",
  }, 14000, function (){
  $(".progress2").animate({
    width: "100%",
  }, 14000 );
  });
  });
  



  
 if(obj.innerHTML==0){
 
 alert('Hello');
 
 setTimeout(function(){},3000);}
 else{setTimeout(timer,3000);}
}
setTimeout(timer,3000);

  });
</script>

</body>
</html>

Вот этот массив рядом с прогрессбаром нужно вывести

Код


var duration = 3000;
var files = ['index.html', '2.php', '3.txt'];
var interval = duration/files.length;

function show_file() {

var el = files.pop();
if (el == undefined) return;

$('.files').html(el);
setTimeout(function() {
show_file();
}, interval);
}


function show_file() {

var el = files.pop();
if (el == undefined) return;

$('.files').html(el);
setTimeout(function() {
show_file();
}, interval);
}

Это сообщение отредактировал(а) liliana2 - 10.5.2010, 21:05

ksnk

Дата 10.5.2010, 20:37 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Код


.progress,.progress1,.progress2{
   text-align:center;
   text:black;
}

Код


   startInterval($(".progress")[0],14);
   $(".progress").animate({ 
     ...

вот так можно модифицировать анимацию. 14 секунд, так как 15 не всегда успевает дотикать
и вот так

Код


function startInterval(el,sec){
//  if (startInterval._interval) return; 
  var startTime=time()
     ,oldValue=el.innerHTML;
  startInterval._interval =setInterval(function(){
     var cur=Math.round(sec-(time()-startTime)/1000);
     if(cur<0) {
         el.value=oldValue;
         clearInterval(startInterval._interval);
         startInterval._interval=null;
     } else 
         el.innerHTML=cur ;
  },500);
  el.innerHTML=sec;
}

Добавлено через 1 минуту и 19 секунд
Эффект скорее забавный, чем полезный, но для полезности надо еще чего-нибудь дописать...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

liliana2

Дата 10.5.2010, 21:07 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

не работает *хнык*
Мне надо чтобы еще рядом с прогрессбаром верхним по мере его заполнения,мигали типа как при загрузке файлы.. у меня есть массив но как его применить не могу дотумкать.. и как все это связать все вместе... тоже пока проблема *хнык хнык*
Если не очень сложно smile

Это сообщение отредактировал(а) liliana2 - 10.5.2010, 21:08

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »