|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="es"> |
| 3 | +<head> |
| 4 | +<meta charset="utf-8"> |
| 5 | +<title></title> |
| 6 | +<style> |
| 7 | +table { |
| 8 | + border-collapse: collapse; |
| 9 | +} |
| 10 | +#tblStat { |
| 11 | + font-size: 26pt; |
| 12 | +} |
| 13 | +</style> |
| 14 | +</head> |
| 15 | +<body> |
| 16 | + |
| 17 | +Tamaño |
| 18 | +<select id="selSize"> |
| 19 | + <option value="3">3</option> |
| 20 | + <option value="4">4</option> |
| 21 | + <option value="5">5</option> |
| 22 | + <option value="6">6</option> |
| 23 | + <option value="7">7</option> |
| 24 | + <option value="8">8</option> |
| 25 | + <option value="9">9</option> |
| 26 | + <option value="10">10</option> |
| 27 | + <option value="11" selected>11</option> |
| 28 | + <option value="12">12</option> |
| 29 | + <option value="13">13</option> |
| 30 | + <option value="14">14</option> |
| 31 | + <option value="15">15</option> |
| 32 | + <option value="16">16</option> |
| 33 | + <option value="17">17</option> |
| 34 | + <option value="18">18</option> |
| 35 | + <option value="19">19</option> |
| 36 | + <option value="20">20</option> |
| 37 | +</select> |
| 38 | +<br> |
| 39 | +<br> |
| 40 | +<table> |
| 41 | + <tbody id="tblMosaic"></tbody> |
| 42 | +</table> |
| 43 | +<br> |
| 44 | +<br> |
| 45 | +<table> |
| 46 | + <tbody id="tblStat"></tbody> |
| 47 | +</table> |
| 48 | + |
| 49 | +</body> |
| 50 | +<script> |
| 51 | + |
| 52 | +function g(id){ |
| 53 | + return document.getElementById(id) |
| 54 | +} |
| 55 | + |
| 56 | +function c(tagName, container){ |
| 57 | + var el |
| 58 | + el = document.createElement(tagName) |
| 59 | + if (container && container.appendChild) container.appendChild(el) |
| 60 | + return el |
| 61 | +} |
| 62 | + |
| 63 | +var selSize = g('selSize') |
| 64 | +var tblMosaic = g('tblMosaic') |
| 65 | +var tblStat = g('tblStat') |
| 66 | + |
| 67 | +function calcColor(row, col, size){ |
| 68 | + var color |
| 69 | + |
| 70 | + if ( |
| 71 | + row==0 && col!=0 // all row 0 but corner |
| 72 | + || row==size-1 && col!=size-1 // all last row but corner |
| 73 | + || col==0 && row!=0 |
| 74 | + || col==size-1 && row!=size-1 |
| 75 | + ){ |
| 76 | + color = 'white' |
| 77 | + } else { |
| 78 | + color = 'gray' |
| 79 | + } |
| 80 | + |
| 81 | + return color |
| 82 | +} |
| 83 | + |
| 84 | +function renderMosaic(){ |
| 85 | + var size = parseInt(selSize.value) |
| 86 | + if ( isNaN(size) || size<3 || size>20 ) return |
| 87 | + tblMosaic.innerHTML = '' |
| 88 | + var row, col |
| 89 | + var tr, td |
| 90 | + var stat = { white: 0, gray: 0 } |
| 91 | + var color |
| 92 | + for(row=0; row<size; row++){ |
| 93 | + tr = c('tr',tblMosaic) |
| 94 | + for(col=0; col<size; col++){ |
| 95 | + td = c('td',tr) |
| 96 | + td.style.border = '1px solid black' |
| 97 | + td.width = "20" |
| 98 | + td.height = "20" |
| 99 | + color = calcColor(row,col,size) |
| 100 | + if ( typeof stat[color] === 'undefined' ){ |
| 101 | + stat[color] = 1 |
| 102 | + } else { |
| 103 | + stat[color]++ |
| 104 | + } |
| 105 | + td.style.backgroundColor = color |
| 106 | + } |
| 107 | + } |
| 108 | + // render stat |
| 109 | + tblStat.innerHTML = '' |
| 110 | + for( key in stat ){ |
| 111 | + tr = c('tr',tblStat) |
| 112 | + td = c('th',tr) |
| 113 | + td.innerHTML = key |
| 114 | + td = c('td',tr) |
| 115 | + td.innerHTML = stat[key] |
| 116 | + } |
| 117 | +} |
| 118 | +renderMosaic() |
| 119 | + |
| 120 | +selSize.onchange = renderMosaic |
| 121 | + |
| 122 | +</script> |
| 123 | +</html> |
0 commit comments