JSFiddle - React, Tailwind, and code Playground
HTML
<input id="getR" type="button" value="get Random" />
<div id="loopsWr">loops: <span id="loops"></span></div>
<div class="lbl">generation: <span id="old"></span></div>
CSS
body{
font-family:"lucida grande","Helvetica Neue", Helvetica, Arial, sans-serif;
}
input#getR{
padding:10px;
text-transform:uppercase;
color:#787878;
}
div.lbl{
color:#ABABAB;
padding:5px
}
div#loopsWr{
color:#676767;
padding:15px;
text-align:center;
font-size:56px;
}
JavaScript
var upperBound = 1000;
var loops = 0;
var myRandomNumbers = [];
$('getR').addEvent('click', generate);
function generate() {
//resetting everything
$('old').innerHTML = "";
$('loops').innerHTML = "";
var myRandomNumbers = [];
loops = 0;
for (var i = 0; i < upperBound; i++) {
myRandomNumbers[i] = i;
}
for (var i = myRandomNumbers.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = myRandomNumbers[i];
myRandomNumbers[i] = myRandomNumbers[j];
myRandomNumbers[j] = tmp;
}
$('loops').innerHTML = loops;
$('old').innerHTML = myRandomNumbers.join(' - ');
}