БлогNot. Таблица умножения с кликабельными ячейками :)

Таблица умножения с кликабельными ячейками :)

Этот "детский" пример понадобился мне вчера для иллюстрации пары приёмов PHP/Javascript программирования. Вот ссылка и полный код скрипта:

 Скрипт в работе

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="utf-8">
 <title>Кликабельная таблица умножения с параметрами число строк и число столбцов</title>
</head>
<body>
<script type="text/javascript">
 function color (i,j) {
  var id=i+'t'+j;
  var oldcolor=document.getElementById(id).style.backgroundColor;
  var color;
  if (oldcolor=='') { 
   var ints=new Array ('9','A','B','C');
   var len=ints.length-1;
   color='#';
   for (var k=0;k<6;k++) {
    var digit=ints[Math.round(Math.random()*len)];
	color+=digit;
   }
  }
  else  {
   color='';
  }
  if (i && j) document.getElementById(id).style.backgroundColor=color;
  document.getElementById(i+'t0').style.backgroundColor=color;
  document.getElementById('0t'+j).style.backgroundColor=color;
 }
</script>
<?php
 function trimall($string) { return trim(preg_replace('/\s+/','',$string)); }
 $params = array ('rows','cols');
 foreach ($params as $num=>$var) {
  if (!empty($_POST[$var])) $$var = trimall(htmlspecialchars($_POST[$var],ENT_QUOTES,'UTF-8'));
  else if (!empty($_GET[$var])) $$var = trimall(htmlspecialchars($_GET[$var],ENT_QUOTES,'UTF-8'));
  else $$var = '';
 }
 $max_val = 100; //максимальный размер
 if (empty($rows) or $rows<1 or $rows>$max_val)  $rows=9;
 if (empty($cols) or $cols<1 or $cols>$max_val)  $cols=9;
 echo '<font size="1">Таблица умножения с параметрами 
 "число строк" и "число столбцов" (до '.$max_val.'); ячейки с данными кликабельны</font><br>'."\n".
 '<form name="f1" method="get">'."\n".
 ' Строк: <input type="text" size="4" maxlength="3" name="rows" value="'.$rows.'">'."\n".
 ' Столбцов: <input type="text" size="4" maxlength="3" name="cols" value="'.$cols.'">'."\n".
 ' <input type="submit" value="Таблица">'."\n".
 '</form>'."\n".
 '<pre><table border="1" cellpadding="4" cellspacing="0">'."\n";
 $maxr = mb_strlen($rows*$cols,'UTF-8');
 echo '<tr><td id="0t0" onclick="color(0,0)">&nbsp;</td>'."\n";
 for ($j=1; $j<=$cols; $j++) echo 
  '<td align="center" valign="middle" id="0t'.$j.'" onclick="color(0,'.$j.')"><b>'.$j.'</b></td>'."\n";
 echo '</tr>'."\n";
 for ($i=1; $i<=$rows; $i++) {
  echo '<tr><td align="center" valign="middle" id="'.$i.'t0" onclick="color('.$i.',0)"><b>'.$i.'</b></td>'."\n";
  for ($j=1; $j<=$cols; $j++) {
   $n=$i*$j;
   $n=sprintf ("%{$maxr}d",$n);
   echo  '<td id="'.$i.'t'.$j.'" onclick="color('.$i.','.$j.')">'.$n.'</td>'."\n";
  }
  echo '</tr>'."\n";
 }
 echo '</table></pre>'."\n";
?>
</body></html>

Функция color генерирует в одноимённой переменной фоновый цвет из интенсивностей, заданных массивом ints, который легко расширить. Сгенерированный цвет выставляется фоновым на ячейке, по которой сделали клик, плюс на заголовке строки и столбца. При повторном щелчке фоновый цвет сбрасывается (если oldcolor - текущий цвет, фона полученный из ячейки, не пуст). Следует учесть, что, в зависимости от браузера, свойство document.getElementById(id_объекта).style.backgroundColor может вернуть цвет и обычным 16-ричным кодом #40e0d0, и как rgb(64, 224, 208), то есть, списком десятичных значений интенсивностей красного, зелёного и синего цветов.

Если нужно удобно пометить идентификаторами ячейки таблицы, это можно сделать в виде строка_разделитель_столбец, причём строки и столбцы с содержимым нумеруются с единицы, а строка заголовка и левый столбец имеют номер 0. Пустая ячейка в верхнем левом углу таблицы, соответственно, называется 0t0.

Вывод чисел в таблице - форматированный, с лидирующими нулями. Общее количество цифр гибко меняется в зависимости от максимальной разрядности числа в таблице. А узнать разрядность числа в PHP проще всего строкой кода вида

$maxr = strlen(число);

Если число может оказаться не целым или отрицательным, подойдёт код

$maxr = strlen(floor(abs(число)));

Сам форматированный вывод с числом разрядов, заданным переменной $maxr, выполнит оператор

$n=sprintf ("%0{$maxr}d",$n);

с последующей печатью значения $n оператором echo или print.

Здесь вывод чисел выполняется с лидирующими нулями, если это не нужно, шаблон изменится на "%{$maxr}d".

15.09.2013, 12:31 [12244 просмотра]


теги: javascript цвет php числа

К этой статье пока нет комментариев, Ваш будет первым