вторник, 29 ноября 2011 г.

JavaScript. Рандомайзер

А вот небольшой скрипт для получения случайного числа в заданном диапазоне. Диапазон задаётся в текстовых полях: первое поле — минимальное возможное число, второе — максимальное. Генерация начинается при нажатии на кнопку. На время генерации текстовые поля и кнопка блокируются. Время генерации зависит от значения милисекунд системного таймера в момент нажатия кнопки, и может составлять от 3 до 10 секунд. Это сделано для придания результату ещё большей «случайности».

<div align="center">
<input type="text" id="gorndtbfrom" value="1" maxlength="9" size="4" />
<input type="text" id="gorndtbto" value="100" maxlength="9" size="4" />
<p><font size="5"><b id="gorndlbl">--</b></font></p>
<input type="button" id="gorndbtn" value="Gornd!" onclick="gorndbegin()"></div>
<script type="text/javascript">

function gorndbegin() {
 gorndc = (new Date()).getMilliseconds();
 if (gorndc < 300) {
  gorndc += 300;
 }
 gorndfrom = document.getElementById("gorndtbfrom").value * 1;
 gorndto = document.getElementById("gorndtbto").value * 1 - gorndfrom + 1;
 document.getElementById("gorndtbfrom").readOnly = true;
 document.getElementById("gorndtbto").readOnly = true;
 document.getElementById("gorndbtn").disabled = true;
 gorndproc();
}

function gorndproc() {
 if (gorndc > 0) {
  document.getElementById("gorndlbl").innerHTML = Math.floor(Math.random() * gorndto) + gorndfrom;
  gorndc--;
  gorndt = setTimeout("gorndproc()",10);
 } else {
  clearTimeout(gorndt);
  document.getElementById("gorndtbfrom").readOnly = false;
  document.getElementById("gorndtbto").readOnly = false;
  document.getElementById("gorndbtn").disabled = false;
 }
}

</script>

По традиции, пример работы скрипта:

--


Приведённый выше скрипт с эффектом анимации удобно использовать при необходимости получить одно случайное число (например, номер победителя при розыгрыше «кофеток»). Если же таких чисел нужно много, больше подойдёт скоростной вариант скрипта без анимации (см. ниже). Генерация тут происходит не по событию таймера (как в предыдущем случае) а в цикле.

<div align="center">
<input type="text" id="gorndtbfrom" value="1" maxlength="9" size="4" />
<input type="text" id="gorndtbto" value="100" maxlength="9" size="4" />
<p><font size="5"><b id="gorndlbl">--</b></font></p>
<input type="button" id="gorndbtn" value="Gornd!" onclick="gorndbegin()"></div>
<script type="text/javascript">

function gorndbegin() {
 gorndc = (new Date()).getMilliseconds();
 if (gorndc < 300) {
  gorndc += 300;
 }
 gorndfrom = document.getElementById("gorndtbfrom").value * 1;
 gorndto = document.getElementById("gorndtbto").value * 1 - gorndfrom + 1;
 document.getElementById("gorndbtn").disabled = true;
 var i = 0;
 for (i = 0; i < gorndc; i++) {
  document.getElementById("gorndlbl").innerHTML = Math.floor(Math.random() * gorndto) + gorndfrom;
 }
 document.getElementById("gorndbtn").disabled = false;
}

</script>

1 комментарий:

Го вверх!