Generating Graphical Bars
This generates random amount of graphical bars and times the encounter.
HTML
<div class='float'>
<button id='percent'>Randomize %</button>
</div>
<div id='bars-container'></div>
CSS
.float {
position:fixed;
right:0px;
text-align:right;
}
JavaScript
/*Creates a random amount of bars*/
function runBars() {
var start = new Date().getTime();
/*Sets the maximuim amount of bars, 10 if NaN or less than 1*/
var max_bars = parseInt($('#max_bars').val());
if (isNaN(max_bars) || max_bars < 1) {
max_bars = 10;
}
/*Grabs a random number of bars*/
var bars = getRandom(max_bars);
/*clears bars container*/
$('#bars-container').html('');
/*Appends progress bars.*/
for (var i = 0; i < bars; i++) {
var element = $('<label>Number ' + (i + 1) + '</label><div class="progress"><div class="progress-bar"></div></div>');
$('#bars-container').append(element);
}
var end = new Date().getTime();
var time = end - start;
$('#bar_time').text(time);
$('#bar_amount').text(bars);
/*Populates bars with percents*/
runPercent();
}
/*Random int with max*/
function getRandom(max) {
return Math.floor((Math.random() * max) + 1);
}
/*Gets percent based on maxium number, making the percent scale */
function getPercent(x, total, biggest) {
return Math.floor(x / biggest * 100) + '%';
}
/*Populates percent in each progress bar*/
function runPercent() {
var start = new Date().getTime();
var length = $('.progress-bar').size();
var data = [];
var total = 0;
var biggest = 0;
/*pushes random ints to array*/
for (var i = 0; i < length; i++) {
var temp = getRandom(50);
data.push(temp);
total += temp;
if (biggest < temp) {
biggest = temp
}
}
/*Each progress bar gets a width percentage and sets the text.*/
$('.progress-bar').each(function (index) {
$(this).width(getPercent(data[index], total, biggest));
$(this).text(data[index] + ' / ' + total);
});
var end = new Date().getTime();
var time = end - start;
$('#percent_time').text(time);
}
/*handles button events*/
$('#percent').click(runPercent);
$('#bars').click(runBars);
/*initiates...