var MIN_PRESET = 1; var MAX_PRESET = 50; //--- var inputRandom = document.getElementById( 'txtInputRandom' ); var inputMin = document.getElementById( 'txtInputMin' ); var inputMax = document.getElementById( 'txtInputMax' ); var inputRemove = document.getElementById( 'txtInputRemove' ); var outputRandom = document.getElementById( 'txtOutputRandom' ); var outputGenerated = document.getElementById( 'txtOutputGenerated' ); var btInit = document.getElementById( 'btInit' ); var btGenerate = document.getElementById( 'btGenerate' ); var btRemove = document.getElementById( 'btRemove' ); var initiated = false; var min = MIN_PRESET; var max = MAX_PRESET; var randomValue; var randomValueIndex; var randomValueHolder; var randomValueAlreadyUsedHolder; //--- inputRandom.onkeyup = function() { this.value = this.value.replace( /[^\d, ]+/g, '' ); init(); }; inputMin.onkeyup = inputMax.onkeyup = function() { this.value = this.value.replace( /[^\d]/, '' ); init(); }; inputRemove.onkeyup = function() { this.value = this.value.replace( /[^\d ]/, '' ); }; inputMin.value = min.toString(); inputMax.value = max.toString(); btInit.addEventListener( 'click', btInitHandler, false ); btGenerate.addEventListener( 'click', btGenerateHandler, false ); btRemove.addEventListener( 'click', btRemoveHandler, false ); //--- function btInitHandler( e ) { init(); }; function btGenerateHandler( e ) { generate(); }; function btRemoveHandler( e ) { removeFromList(); }; //--- function init() { var i, j; //--- initiated = true; //--- if ( inputMin.value.length != 0 ) { min = parseInt( inputMin.value ); } if ( inputMax.value.length != 0 ) { max = parseInt( inputMax.value ); } //--- outputRandom.value = ''; outputGenerated.value = ''; //--- if ( min >= max ) { alert( 'MAX must be greater than MIN' ); return; } //--- randomValueIndex = -1; randomValueHolder = []; for ( i = min; i <= max; i++ ) { randomValueHolder.push( i ); } shuffle( randomValueHolder ); //--- if ( inputRandom.value.length > 0 ) { randomValueAlreadyUsedHolder = inputRandom.value.split( ',' ); for ( i = 0; i < randomValueAlreadyUsedHolder.length; i++ ) { randomValueAlreadyUsedHolder[ i ] = parseInt( randomValueAlreadyUsedHolder[ i ] ); } //--- var removeIndexHolder = []; var tempHolder = []; for ( i = 0; i < randomValueAlreadyUsedHolder.length; i++ ) { var index = randomValueHolder.indexOf( randomValueAlreadyUsedHolder[ i ] ); if ( index > -1 ) { randomValueIndex++; randomValueHolder.splice( index, 1 ); tempHolder[ i ] = randomValueAlreadyUsedHolder[ i ]; } } randomValueHolder = tempHolder.concat( randomValueHolder ); for ( i = 0; i < tempHolder.length; i++ ) { if ( i === tempHolder.length - 1 ) { outputGenerated.value += tempHolder[ i ].toString(); } else { outputGenerated.value += tempHolder[ i ].toString() + ", "; } } } }; //--- function generate() { if ( !initiated ) { alert( 'INIT first!' ); return; } randomValue = getRandomValue(); if ( randomValue != null ) { outputRandom.value = randomValue.toString(); if ( randomValueIndex === 0 && inputRandom.value.length === 0 ) { outputGenerated.value += outputRandom.value; } else { outputGenerated.value += ", " + outputRandom.value; } } }; //--- function removeFromList() { if ( inputRemove.value.length > 0 ) { var valueToRemoveStr = inputRemove.value; var valueToRemoveInt = parseInt( valueToRemoveStr ); var tempStringTop = inputRandom.value; var tempString = outputGenerated.value; var tempArray; var found = false; if ( tempString.indexOf( valueToRemoveStr + ', ' ) > -1 ) { tempString = tempString.replace( valueToRemoveStr + ', ', '' ); found = true; } else if ( tempString.indexOf( ', ' + valueToRemoveStr ) > -1 ) { tempString = tempString.replace( ', ' + valueToRemoveStr, '' ); found = true; } outputGenerated.value = tempString; //--- if ( tempStringTop.indexOf( valueToRemoveStr + ', ' ) > -1 ) { tempStringTop = tempStringTop.replace( valueToRemoveStr + ', ', '' ); } else if ( tempStringTop.indexOf( ', ' + valueToRemoveStr ) > -1 ) { tempStringTop = tempString.replace( ', ' + valueToRemoveStr, '' ); } inputRandom.value = tempStringTop; //--- if ( found ) { var index = randomValueHolder.indexOf( valueToRemoveInt ); randomValueHolder.splice( index, 1 ); randomValueHolder.push( valueToRemoveInt ); tempArray = randomValueHolder.splice( randomValueIndex, randomValueHolder.length - randomValueIndex ); shuffle( tempArray ); randomValueHolder = randomValueHolder.concat( tempArray ); randomValueIndex--; inputRemove.value = ''; } } }; //--- function getRandomValue() { if ( randomValueIndex < randomValueHolder.length - 1 ) { randomValueIndex++; return randomValueHolder[ randomValueIndex ]; } else { alert( 'You already got all numbers between MIN and MAX' ); return null; } }; //--- function shuffle( array ) { for ( var i = array.length - 1; i >= 0; i-- ) { var randomIndex = Math.floor( Math.random() * ( i + 1 ) ); var itemAtIndex = array[ randomIndex ]; array[ randomIndex ] = array[ i ]; array[ i ] = itemAtIndex; } }; //--- init();
<div class="content borderimg"> <div class="wrapper"> <img src="http://www.nkunited.de/ExternalImages/jsfiddle/BeastyqtLogo.png" alt="BEASTYQT" height="53" width="65"><br/><span class="fontStyle">BEASTYQT - RANDOM NUMBER GENERATOR</span><br/><br/> <span class="fontStyle">Already used numbers: </span><br/><textarea id="txtInputRandom" class="fontStyle" cols="57" rows="4" placeholder="If you already have numbers from a previous round and you don't want them to be considered again. For exmaple: 1, 4, 5, 6, 9, 13"></textarea><br/> <input type="text" id="txtInputMin" class="fontStyle" placeholder="MIN"/> <input type="text" id="txtInputMax" class="fontStyle" placeholder="MAX"/><br/> <br/><button type="button" id="btInit" class="fontStyle">INIT/RESET</button> <button type="button" id="btGenerate" class="fontStyle">GENERATE</button><br/><br/> <span class="fontStyle">Current number: </span><br/><input type="text" id="txtOutputRandom" class="fontStyle" readonly/><br/> <span class="fontStyle">Generated numbers: </span><br/><textarea type="text" id="txtOutputGenerated" class="fontStyle" cols="57" rows="4" readonly></textarea><br/><br/> <button type="button" id="btRemove" class="fontStyle">REMOVE NUMBER</button><input type="text" id="txtInputRemove" class="fontStyle" placeholder="NUMBER TO REMOVE FROM LIST"/> </div> </div>
@import url(//fonts.googleapis.com/css?family=Share+Tech+Mono); body { background-color: #000; margin: 0; padding: 0; } input, textarea { margin: 2px 2px 2px 2px; -moz-box-shadow: inset 0px -3px 7px 0px #29bbff; -webkit-box-shadow: inset 0px -3px 7px 0px #29bbff; box-shadow: inset 0px -3px 7px 0px #29bbff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000e25), color-stop(1, #000e25)); background: -moz-linear-gradient(top, #000e25 5%, #000e25 100%); background: -webkit-linear-gradient(top, #000e25 5%, #000e25 100%); background: -o-linear-gradient(top, #000e25 5%, #000e25 100%); background: -ms-linear-gradient(top, #000e25 5%, #000e25 100%); background: linear-gradient(to bottom, #000e25 5%, #000e25 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000e25', endColorstr='#000e25',GradientType=0); background-color: #000e25; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #46b8f1; display: inline-block; color: #ffffff; font-size: 15px; padding: 9px 9px; text-decoration: none; text-shadow: 0px 1px 0px #263666; } button { margin: 2px 2px 2px 2px; -moz-box-shadow: inset 0px -3px 7px 0px #29bbff; -webkit-box-shadow: inset 0px -3px 7px 0px #29bbff; box-shadow: inset 0px -3px 7px 0px #29bbff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000e25), color-stop(1, #000e25)); background: -moz-linear-gradient(top, #000e25 5%, #000e25 100%); background: -webkit-linear-gradient(top, #000e25 5%, #000e25 100%); background: -o-linear-gradient(top, #000e25 5%, #000e25 100%); background: -ms-linear-gradient(top, #000e25 5%, #000e25 100%); background: linear-gradient(to bottom, #000e25 5%, #000e25 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000e25', endColorstr='#000e25',GradientType=0); background-color: #000e25; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #46b8f1; display: inline-block; color: #ffffff; font-size: 15px; padding: 9px 23px; text-decoration: none; text-shadow: 0px 1px 0px #263666; cursor: pointer; } button:active { position:relative; top:1px; } textarea { width:80%; } #txtInputMin { width:37%; } #txtInputMax { width:37%; } #txtInputRemove { width:37%; } .borderimg { border: 106px solid transparent; padding: 0px; -webkit-border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage.png) 106 round; /* Safari 3.1-5 */ -o-border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage.png) 106 round; /* Opera 11-12.1 */ border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage.png) 106 round; } .wrapper { margin-top: -75px; margin-left: -75px; margin-right: -75px; } .content { width: 40%; height: 60%; max-width: 480px; background-color: #000e25; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; text-align: center; } .fontStyle { color: #46b7f1; font-family: 'Share Tech Mono', monospace; text-align: center; }