вторник, 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>

воскресенье, 23 октября 2011 г.

Созвездие Миротворец

Второй (и, надеюсь, окончательный) вариант созвездия нашей гильдии для проекта "Звёздное небо Годвилля". Первый вариант был практически таким же, за исключением нескольких названий.

А вот и гипотетический снимок этого созвездия со спутника.

Называется, нагуглил в интернете урок для Фотошопа «Как нарисовать звёздное небо». :)

понедельник, 4 июля 2011 г.

JavaScript. Таймер или динамичный последний отсчёт

А теперь другой вариант последнего отсчёта. На этот раз самый настоящий, динамичный.

<div id="datecounter2">--:--:--</div>

<script type="text/javascript">

onload = function start() {
  timesp();
}

function timesp() {
  var ts = new Date(2012,11,21) - new Date();
  var html = "уже наступил!";
  if (ts>0) {
    var h = ts/3600000;
    var m = (h-Math.floor(h))*60;
    var s = (m-Math.floor(m))*60;
    html = ctime(h)+" : "+ctime(m)+" : "+ctime(s);
    t = setTimeout("timesp()",300);
  } else {
    clearTimeout(t);
  }
  document.getElementById("datecounter2").innerHTML=html;
}

function ctime(i) {
  i = Math.floor(i);
  if (i<10) {
    i = "0"+i;
  }
  return i;
}

</script>

После загрузки страницы отрабатывает функция start(), которая запускает функцию timesp(). А timesp() уже при помощи команды setTimeout('timesp()',300) будет запускать сама себя через каждые 300 милисекунд. Функция ctime(i) округляет передаваемый аргумент и, если его значение меньше 10, добавляет "0". Это нужно для того, чтобы вместо "1:2:3" было "01:02:03", как в настоящих электронных таймерах.

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

До Нового года:

--:--:--

А, собственно, само время, оставшееся до следующего Нового года, посчиталось так:

var d = new Date();
var ts = new Date(d.getFullYear() + 1,0,1) - d;

вторник, 28 июня 2011 г.

JavaScript. Последний отсчёт

Будем считать количество часов или дней до какой-нибудь знаменательной даты. Например, до дня рождения, до Нового года, до начала отпуска, ну, или как у меня. :) Как всегда, добавляем новый гаджет «HTML/JavaScript» и копируем такой код:

<div id="datecounter"></div>
<script type="text/javascript">
var ts = new Date(2012,0,15) - new Date();
var str = "" + Math.round(ts / 3600000);
var len = str.length;
var html = "<b>уже наступил!</b>";
var t = "часов";
if (ts > 0) {
  if (len == 1 || (len > 1 && str[len - 2] != '1')) {
    switch (str[len - 1]) {
      case '1':
        t = "час";
        break;
      case '2':
      case '3':
      case '4':
        t = "часа";
    }
  }
  html = "через <b>" + str + "</b> " + t;
}
document.getElementById("datecounter").innerHTML = html;
</script>

Дата нашего события задаётся в строчке:

var ts = new Date(2012,0,15) - new Date();

В скобках указываем год, месяц, день. Обратите внимание: счёт месяцев начинается с нуля! Т.е. дата в нашем примере — это 15 января 2012 года. Если интересующее событие начинается не в 0:00, а, скажем, в пол-первого, можно учесть и это, добавив в строчке с датой и время:

var ts = new Date(2012,0,15,12,30) - new Date();

Следующая строка кода переводит отрезок времени (который измеряется в милисекундах) в часы. Если нас интересует измерение в днях, то придётся изменить эту строку так:

var str = "" + Math.round(ts / 86400000);

Кроме того, Капитан Очевидность подсказывает, что дальше в коде нужно заменить "часов" на "дней", "час" на "день", а "часа" на "дня". :)

пятница, 24 июня 2011 г.

JavaScript. Случайная фраза из списка

Итак, у нас есть список наших любимых фраз, цитат, анекдотов или чего-то там ещё. Нужно выбрать наугад одну из этих фраз и показать у себя на сайте или в бложике, чтобы тем самым порадовать себя и позабавить посетителей. Для бложика перейдите в «Дизайн», добавьте новый гаджет «HTML/JavaScript» и скопируйте туда следующий код:

<div id="myphrase">
</div>
<script type="text/javascript">
var div = document.getElementById("myphrase");
var lst = new Array();
lst.push("Моя любимая фраза номер один.");
lst.push("Моя любимая фраза номер два."); 
lst.push("Моя любимая фраза номер три."); 
lst.push("..."); 
lst.push("Моя любимая фраза номер стопицот."); 
div.innerHTML = lst[Math.floor(Math.random() * lst.length)];
</script>

Пример работы этого скрипта можно видеть справа (под ссылкой на мой профиль). Фраза меняется при каждом обновлении страницы. Учтите только, что если в вашем списке мало фраз, то одна и та же фраза может радовать ваш взор несколько раз подряд. А чем фраз больше, тем, соответственно, меньше вероятность выбора одной и той же.

Первая строка кода — это блок div, в котором будет помещаться выбранная фраза. При желании можно поработать со стилем этого блока, задав, к примеру, цвет текста или шрифт. В таком случае первая строка примет какой-то такой вид:

<div id="myphrase" style="color: green; font-size: small; font-style: italic;">
</div>

В данном случае мы установили зелёный цвет текста, малый размер шрифта и наклонный стиль. Если вы хотите поменять стиль блока как-то ещё, можете посмотреть справочник по CSS.

При помощи строк lst.push("какой-то текст"); мы добавляем наши фразы. Строчек этих можно добавить сколько угодно, но не забывайте про точку с запятой в конце каждой строки. Кстати, в тексте фраз можно использовать теги HTML.

Го вверх!