Kacheln
Erstelle mit Javascript ein Schachbrett Muster in verschiedene Größen
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete 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();
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)/2;
var pix=fg*9;
var kacheln=fg;
$('#conti').css('width',big+'px');
$('#conti').css('height',big+'px');
$('#conti').css('font-size',pix+'px');
$('#conti').css('margin-left',l+'px');
let 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=big/fg+'px';
box.style.width=big/fg+'px';
box.innerHTML=x1;
row.appendChild(box);
}
}
});
</script>
</body>
</html>