Please don't edit

by Salem Yaslim

HTML

<button value="Roll" id="roll" onclick="ROLL_x();return false;">Roll</button>

<div><p><span id="number_animate_roll" style="display: none;margin: 20px auto;"></span></p></div>

<p id="showaf" style="color:green;display:none;">
Success
</p>

JavaScript

function ROLL_x(){
  $("#roll").html("Rolling...");
  $("#roll").attr("value", 'Rolling...');
  $("#roll").attr("disabled", true);
  $("#roll").attr("class", 'roll-btn btn disabled');
document.getElementById('number_animate_roll').style.display='inline-block';
  var target = 3000;
  var number = 1000;
  while(true){
  		$('#number_animate_roll').text(number);
      if (number >= target){
        ROLL_y();
        break;
      };
    	number++;  
  }
}
function ROLL_y() {
  document.getElementById('number_animate_roll').style.display='none';
  $("#roll").attr("disabled", true);
  $("#roll").attr("class", 'roll-btn btn disabled');
  $("#roll").html("Rolled");
  $("#roll").attr("value", 'Rolled');
  document.getElementById('showaf').style.display='block';
}