FinlayDaG33k/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<title>Button</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="http://bootswatch.com/united/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<input type="text" id="inputTime" value="100"> Sekundy
		<br />
		<button id="start">Nachalo</button>
		<button id="stop">ostanovit'</button>
		<button id="reset">Sbros</button>
		<br />
		<br />
		<br />
		<span id="timer"></span>
		<div class="progress">
		  <div class="progress-bar progress-bar-success" id="progress" style="width: 0%"></div>
		</div>
	</body>
</html>

## script.js
var initial = 100000;
var count = initial;
var counter; //10 will  run it every 100th of a second
var initialMillis;
var percent = 0; // The percentage
var start = 0;

function timer() {
  if (count <= 0) {
		clearInterval(counter);
		return;
  }
  var current = Date.now();
  count = count - (current - initialMillis);

  initialMillis = current;
  displayCount(count);
}

function displayCount(count) {
	var res = count / 1000;
	var hrs = ~~(res / 3600);
	var mins = ~~((res % 3600) / 60);
	var secs = res % 60;
	var millis = secs - Math.floor(secs);
	secs = secs - millis;
	millis = Math.round(millis.toString().substr(1) + "e+3");
	if(isNaN(millis)){millis = 000;} // Just to bypass a little bug :)
	percent = Math.round((~~((initial / 1000) - res) / start) * 100);
	$("#timer").html(("0" + hrs).slice(-2)+":"+("0" + mins).slice(-2)+":"+("0" + secs).slice(-2) + "." +millis);
	$("#progress").css("width",~~(percent) + "%");
	$("#progress").html(~~(percent)+"%");
}

$(function(){
	$('#start').on('click', function () {
		clearInterval(counter);
		count = $('#inputTime').val() * 1000;
		initial = $('#inputTime').val() * 1000;
		start = $('#inputTime').val();
		console.log(initial + "|" + count);
		initialMillis = Date.now();
		counter = setInterval(timer, 1);
	});

	$('#stop').on('click', function () {
		clearInterval(counter);
	});

	$('#reset').on('click', function () {
		clearInterval(counter);
		count = initial;
		displayCount(count);
	});

	displayCount(initial,percent);
});
	<!DOCTYPE html>
	<html>
	<head>
	<title>Button</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="http://bootswatch.com/united/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
	<input type="text" id="inputTime" value="100"> Sekundy
	<br />
	<button id="start">Nachalo</button>
	<button id="stop">ostanovit'</button>
	<button id="reset">Sbros</button>
	<br />
	<br />
	<br />
	<span id="timer"></span>
	<div class="progress">
	<div class="progress-bar progress-bar-success" id="progress" style="width: 0%"></div>
	</div>
	</body>
	</html>
	var initial = 100000;
	var count = initial;
	var counter; //10 will run it every 100th of a second
	var initialMillis;
	var percent = 0; // The percentage
	var start = 0;

	function timer() {
	if (count <= 0) {
	clearInterval(counter);
	return;
	}
	var current = Date.now();
	count = count - (current - initialMillis);

	initialMillis = current;
	displayCount(count);
	}

	function displayCount(count) {
	var res = count / 1000;
	var hrs = ~~(res / 3600);
	var mins = ~~((res % 3600) / 60);
	var secs = res % 60;
	var millis = secs - Math.floor(secs);
	secs = secs - millis;
	millis = Math.round(millis.toString().substr(1) + "e+3");
	if(isNaN(millis)){millis = 000;} // Just to bypass a little bug :)
	percent = Math.round((~~((initial / 1000) - res) / start) * 100);
	$("#timer").html(("0" + hrs).slice(-2)+":"+("0" + mins).slice(-2)+":"+("0" + secs).slice(-2) + "." +millis);
	$("#progress").css("width",~~(percent) + "%");
	$("#progress").html(~~(percent)+"%");
	}

	$(function(){
	$('#start').on('click', function () {
	clearInterval(counter);
	count = $('#inputTime').val() * 1000;
	initial = $('#inputTime').val() * 1000;
	start = $('#inputTime').val();
	console.log(initial + "\|" + count);
	initialMillis = Date.now();
	counter = setInterval(timer, 1);
	});

	$('#stop').on('click', function () {
	clearInterval(counter);
	});

	$('#reset').on('click', function () {
	clearInterval(counter);
	count = initial;
	displayCount(count);
	});

	displayCount(initial,percent);
	});