< >

test-inhalt3.php


Quell Code


?<style>

#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>

<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>