Lösungen ,kacheln

kacheln.php

Quell Code

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
height:1092px;
width:1022px;
overflow:auto;
}
#conti{
margin-top:40px;
  border:1px solid red;
  text-align:center;
font-size:10px;
font-weight:900;

}

 


.gridbox {

text-align:center;
  display: inline-block;
  
        }
        #ff div:nth-child(odd) .gridbox:nth-child(odd) {
            background-color: blue;
        }
        #ff div:nth-child(odd) .gridbox:nth-child(even) {
            background-color: lightgray;
        }
        #ff div:nth-child(even) .gridbox:nth-child(even) {
            background-color: blue;
        }
        #ff div:nth-child(even) .gridbox:nth-child(odd) {
            background-color: lightgray;
        }
span{
height:28px;
display:inline.block;
text-align:center;
}


#ww{
display:flex;
flex-direction:column;
}
</style>
 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

 </head>
<body>
<div id="ww">
<span>
<label>Grösse des Feldes in Pixel :<input type="number" id="xx" min="100" max="1000" step="50" value="500"></label>
<label>Menge der Kacheln :<input type="number" id="yy" min="4" max="100" step="1" value="49"></label>
<input type="button" id="erstelle" value="erstelle Kacheln mit Texte"><span>
  <br>

<div id="conti"></div> 
</div>
<script>
$('#erstelle').click(function(){
$('#conti div').remove();
gesamt=$('#yy').val();
big=$('#xx').val();


arra=['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60','61','62','63','64','65','66','67','68','69','70','71','72','73','74','75','76','77','78','79','80','81','82','83','84','85','86','87','88','89','90','91','92','93','94','95','96','97','98','99','100'];

//gesamt=arra.length;
if(gesamt<=1){
  var fg=1;
}else if(gesamt<=4){
  var fg=2;
}else if(gesamt<=9){
  var fg=3;
}else if(gesamt<=20){
  var fg=4;
}else if(gesamt<=25){
  var fg=5;
}else if(gesamt<=36){
  var fg=6;
}else if(gesamt<=49){
  var fg=7;
}else if(gesamt<=64){
  var fg=8;
}else if(gesamt<=81){
  var fg=9;
}else if(gesamt<=100){
  var fg=10;
}
l=1000-big;
l=l/2;
var pix=fg*9;
var kacheln=fg;//=7+7
$('#conti').css('width',big+'px');
$('#conti').css('height',big+'px');
$('#conti').css('font-size',pix+'px');
ml=big/fg;

$('#conti').css('margin-left',l+'px');
x=ml;
y=ml;
 x1=0;
        var ff = document.createElement("div");
        ff.id = 'ff';
        document.getElementById('conti').appendChild(ff);
 
        for (var i = 0; i < fg; i++) {
            var row = document.createElement("div");
            ff.appendChild(row);
            for (var j = 0; j < fg; j++) {
              x1++;
                var box = document.createElement("div");
                box.className = "gridbox";
             box.style.height=''+x+'px';
              box.style.width=''+y+'px';
              inbox=arra[x1];
              box.innerHTML=inbox;
                row.appendChild(box);
            }
        }

});
</script>

</body>
</html>