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>