<html>
<head>
<style>
table{
width: 30%;
height: 50%;
}
th, td{
border: 1px solid #000;
}
</style>
<script>
var C=new Array(0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F");
var i,j;
var size=6;
function cancella()
{
var el=document.getElementsByTagName("td");
for(i=0;i<el.length;i++)
{
el[i].style.background="white";
el[i].style.borderColor = "black";;
}
}
function flash(e)
{
document.getElementById(e.id).style.background="#ffff00";
setTimeout(flash(e),10);
}
function colora(e){
cancella();
var colore="#"+C[Math.floor(Math.random()*16)]+C[Math.floor(Math.random()*16)]+C[Math.floor(Math.random()*16)]+C[Math.floor(Math.random()*16)]+C[Math.floor(Math.random()*16)]+C[Math.floor(Math.random()*16)];
var numero=parseInt(e.id);
document.getElementById(numero.toString()).style.background="black";
if(numero%size!=0)
{
document.getElementById((numero+1).toString()).style.background="black";
}
if(numero%size!=1){
document.getElementById((numero-1).toString()).style.background="black";
}
if(numero<size*size-size){
document.getElementById((numero+size).toString()).style.background="black";
}
if(numero>size){
document.getElementById((numero-size).toString()).style.background="black";
}
flash(e);
}
</script>
</head>
<div id="bodyys">
</div>
<script>
let table = document.createElement('table');
let tr,td;
var k=1;
document.getElementById('bodyys').appendChild(table);
for(i=0;i<size;i++)
{
tr= document.createElement('tr');
table.appendChild(tr);
for(j=0;j<size;j++)
{
td= document.createElement('td');
td.setAttribute("id", k++);
td.addEventListener("mouseover",function (){
colora(this);
});
tr.appendChild(td);
}
}
</script>
</html>
Post Views: 167
