Форум

dasser · #1 (**permalink**) 31.07.2014, 19:05

Всем привет! есть задача - сделать таймер с обратным отсчетом времени для формы если выбраны один ели несколько checkbox'ов. value checkbox'ов - количество сумирующихся секунд.
Форма:

<form name="formText">
<input type="checkbox"  id="r1" value="10"> 10 сек<br>
<input type="checkbox"  id="r2" value="20"> 20 сек<br>
<input type="checkbox"  id="r3" value="30"> 30 сек<br>
<input type="checkbox"  id="r4" value="40"> 40 сек<br>
<input type="checkbox"  id="r5" value="50"> 50 сек<br><br>

<input type="button" onclick="sums()" value="считай">
<br>Время на тест:
<input style="width:20px;" type="text" name="sumOut" disabled="false" value="">сек.
</form>
 <div class="pr"></div>

Код:

function sums()
{
 sum=0;
 for(i=1;i<6;i++)
 { 
  var elem=document.getElementById("r"+i);
  if(elem.checked)sum=sum+parseInt(elem.value);
 }
 document.formText.sumOut.value=sum;
}

$(window).load(function(){
var $progressBar = $(".pr"), $legend = $('.prspan');
    count = 0, 
	last_time = 10,
	laster = 0,
    ticks = 100, prc = 0, dt = ticks / last_time, 
    timer = $.timer(function() {
        count++;
        prc = (((count/60) * 100) / (ticks/60)).toFixed(0);
        $progressBar.css({width: prc + "%"});
        laster = last_time - Math.round(count / dt);
        $legend.html(prc + ' %' + ' - <i style="font-size:70%;">' + "(осталось" + laster + " сек)</i>");
        if (count >= ticks) {
            timer.stop();
        }
		return false;
    });
timer.set({ time : 1000 / dt, autostart : true });
});

остановился на обновлении сумы для счетчика после выбора checkbox'ов. Думаю решается через ajax, но как? спс

рони · #2 (**permalink**) 31.07.2014, 20:17

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

Думаю решается через ajax

а причём тут ajax?

dasser · #3 (**permalink**) 31.07.2014, 20:24

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

а причём тут ajax?

так хочется чтобы даже без выбора checkbox'а таймер отсчитывал минимальное значение "sum=0". А без ajax не получиться

рони · #4 (**permalink**) 31.07.2014, 20:44

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

так хочется чтобы даже без выбора checkbox'а таймер отсчитывал минимальное значение "sum=0". А без ajax не получиться

непереводимая игра слов

повторюсь

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

а причём тут ajax?

dasser · #5 (**permalink**) 31.07.2014, 21:13

рони,
а как реализовать вышеупомянутую идею, - через переменную внутри функции ?

рони · #6 (**permalink**) 31.07.2014, 21:25

dasser,
$.timer это что?

dasser · #7 (**permalink**) 01.08.2014, 00:27

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

dasser,
$.timer это что?

береться из http://jquery-timer.googlecode.com/s...query.timer.js

рони · #8 (**permalink**) 01.08.2014, 01:46

dasser,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .pr {
     height: 5px;
     width: 0px;
     background: #FF0000;
   }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
  	(function($)
  	  {
  	    $.timer = function(func, time, autostart) {
  	      this.set = function(func, time, autostart) {
  	        this.init = true;
  	        if(typeof func == 'object') {
  	          var paramList =['autostart', 'time'];
  	          for(var arg in paramList) {if(func[paramList[arg]] != undefined) {eval(paramList[arg] + " = func[paramList[arg]]");}};
  	          func = func.action;
  	        }
  	        if(typeof func == 'function') {this.action = func;}
  	        if(!isNaN(time)) {this.intervalTime = time;}
  	        if(autostart && !this.isActive) {
  	          this.isActive = true;
  	          this.setTimer();
  	        }
  	        return this;
  	      };
  	      this.once = function(time) {
  	        var timer = this;
  	        if(isNaN(time)) {time = 0;}
  	        window.setTimeout(function() {timer.action();}, time);
  	        return this;
  	      };
  	      this.play = function(reset) {
  	        if(!this.isActive) {
  	          if(reset) {this.setTimer();}
  	          else {this.setTimer(this.remaining);}
  	          this.isActive = true;
  	        }
  	        return this;
  	      };
  	      this.pause = function() {
  	        if(this.isActive) {
  	          this.isActive = false;
  	          this.remaining -= new Date() - this.last;
  	          this.clearTimer();
  	        }
  	        return this;
  	      };
  	      this.stop = function() {
  	        this.isActive = false;
  	        this.remaining = this.intervalTime;
  	        this.clearTimer();
  	        return this;
  	      };
  	      this.toggle = function(reset) {
  	        if(this.isActive) {this.pause();}
  	        else if(reset) {this.play(true);}
  	        else {this.play();}
  	        return this;
  	      };
  	      this.reset = function() {
  	        this.isActive = false;
  	        this.play(true);
  	        return this;
  	      };
  	      this.clearTimer = function() {
  	        window.clearTimeout(this.timeoutObject);
  	      };
  	      this.setTimer = function(time) {
  	        var timer = this;
  	        if(typeof this.action != 'function') {return;}
  	        if(isNaN(time)) {time = this.intervalTime;}
  	        this.remaining = time;
  	        this.last = new Date();
  	        this.clearTimer();
  	        this.timeoutObject = window.setTimeout(function() {timer.go();}, time);
  	      };
  	      this.go = function() {
  	        if(this.isActive) {
  	          this.action();
  	          this.setTimer();
  	        }
  	      };
  	      if(this.init) {
  	        return new $.timer(func, time, autostart);
  	      } else {
  	        this.set(func, time, autostart);
  	        return this;
  	      }
  	    };
  	  }
  	)(jQuery);
  	$(function()
  	  {
  	    function sums()
  	    {
  	      var sum = 0;
  	      for(i = 1; i<6; i++)
  	      {
  	        var elem = document.getElementById("r"+i);
  	        if(elem.checked)sum = sum+parseInt(elem.value);
  	      }
  	      document.formText.sumOut.value = sum;
  	      var $progressBar = $(".pr"), $legend = $('.prspan');
  	      count = 0,
  	      last_time = sum,
  	      laster = 0,
  	      ticks = 100, prc = 0, dt = ticks / last_time,
  	      timer = $.timer(function()
  	        {
  	          count++;
  	          prc = (((count/60) * 100) / (ticks/60)).toFixed(0);
  	          $progressBar.css({width: prc + "%"});
  	          laster = last_time - Math.round(count / dt);
  	          $legend.html(prc + ' %' + ' - <i style="font-size:70%;">' + "(осталось" + laster + " сек)</i>");
  	          if (count >= ticks) {
  	            timer.stop();
                s.prop({disabled : false})
  	          }
  	          return false;
  	        }
  	      );
  	      timer.set({time: sum*10, autostart: true});
  	    }
  	    var s = $('[type="button"]');
  	    s.click(function()
  	      { s.prop({disabled : true})
  	        sums()
  	      }
  	    );
  	  }
  	);
  </script>
</head>

<body>
<form name="formText">
<input type="checkbox"  id="r1" value="10"> 10 сек<br>
<input type="checkbox"  id="r2" value="20"> 20 сек<br>
<input type="checkbox"  id="r3" value="30"> 30 сек<br>
<input type="checkbox"  id="r4" value="40"> 40 сек<br>
<input type="checkbox"  id="r5" value="50"> 50 сек<br><br>

<input type="button" value="считай">
<br>Время на тест:
<input style="width:20px;" type="text" name="sumOut" disabled="false" value="">сек.
</form>
 <div class="pr"></div>
 <div class="prspan"></div>
</body>

</html>

dasser · #9 (**permalink**) 01.08.2014, 02:05

рони,
Спасибо, решено! чувтствую сломал бы голову сам.

Форум

Справочник

Discord чат

Курсы javascript