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

Помощь дата->рейтинг Поиск Почта RSS канал Статистика nickolay.info Домой

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta  http-equiv="content-type" content="text/html; 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)); }
 function magic ($path) { @ini_set('magic_quotes_runtime', '0'); @ini_set('magic_quotes_sybase', '0'); 
  if (@get_magic_quotes_gpc()=='1') $path=stripslashes($path); return $path;
 } 
 $params = array ('rows','cols');
 while (list($num,$var) = each($params)) {
  if (!empty($_POST[$var])) $$var = trimall(htmlspecialchars(magic($_POST[$var])));
  else if (!empty($_GET[$var])) $$var = trimall(htmlspecialchars(magic($_GET[$var])));
  else $$var = '';
 }
 if (empty($rows) or $rows<1 or $rows>99)  $rows=9;
 if (empty($cols) or $cols<1 or $cols>99)  $cols=9;
 echo '<font size="1">Таблица умножения с параметрами 
 "число строк" и "число столбцов"; ячейки с данными кликабельны</font><br>'."\n".
 '<form name="f1" method="get">'."\n".
 ' Строк: <input type="text" size="3" maxlength="2" name="rows" value="'.$rows.'">'."\n".
 ' Столбцов: <input type="text" size="3" maxlength="2" name="cols" value="'.$cols.'">'."\n".
 ' <input type="submit" value="Таблица">'."\n".
 '</form>'."\n".
 '<table border="1" cellpadding="4" cellspacing="0">'."\n";
 $maxr = strlen($rows*$cols);
 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 ("%0{$maxr}d",$n);
   echo  '<td id="'.$i.'t'.$j.'" onclick="color('.$i.','.$j.')">'.$n.'</td>'."\n";
  }
  echo '</tr>'."\n";
 }
 echo '</table>'."\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".


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

комментарии (0)

15.09.2013, 12:31; рейтинг: 9105

  свежие записипоиск по блогуоткомментироватьстатистика

Наверх Яндекс.Метрика
© PerS
вход