第十二讲是一个 div+span模拟表格 的应用实例，另外开帖
<style>
#mama {
margin: 50px auto 0;
position: relative;
width: 400px;
height: 400px;
display: grid;
grid-template-rows: repeat(8,8fr);
grid-template-columns: repeat(8,8fr);
border-radius: 50%;
overflow: hidden;
}
#mama > span {
width: 40px;
height: 40px;
border-radius: 0 100%;
opacity: .75;
}
</style>
<div id="papa">
<div id="mama"></div>
</div>
<script>
for(j=0; j<64; j++) {
let span = document.createElement('span');
let size = Math.random()*30 + 20;
span.style.cssText = `
width: ${size}px;
height: ${size}px;
background: linear-gradient(135deg, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});
transform: rotate(${Math.random()*180}deg);
`;
mama.appendChild(span);
}
</script>
本帖最后由 马黑黑 于 2022-11-9 18:11 编辑
82#代码：
<style>
#mama {
margin: 50px auto 0;
position: relative;
width: 400px;
height: 400px;
display: grid;
grid-template-rows: repeat(8,8fr);
grid-template-columns: repeat(8,8fr);
border-radius: 50%;
overflow: hidden;
}
#mama > span {
width: 40px;
height: 40px;
border-radius: 0 100%;
opacity: .75;
}
</style>
<div id="mama"></div>
<script>
for(j=0; j<64; j++) {
let span = document.createElement('span');
let size = Math.random()*30 + 20;
span.style.cssText = `
width: ${size}px;
height: ${size}px;
background: linear-gradient(135deg, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});
transform: rotate(${Math.random()*180}deg);
`;
mama.appendChild(span);
}
</script>
82# 是网格布局简单应用实例：
父元素 mama 定义了自身尺寸和 8*8 的网格布局；CSS里还设定了 mama 第一代子元素的基础样式。
在JS，生成 8*8=64 个子元素，这些子元素：
① 随机定义了尺寸
let size = Math.random()*30 + 20;
Math.random()*30 会得到 0 - 30 的随机数，再加上 20，则子元素的宽高在 20 - 50 之间随机获取（宽高是一样的值）。
② 定义所生成子元素的额外样式
span.style.cssText = `
width: ${size}px;
height: ${size}px;
background: linear-gradient(135deg, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});
transform: rotate(${Math.random()*180}deg);
`;
span 是前面定义的变量，指向要添加的 span 标签。这里，用符号 `` 将CSS样式一一定义，和写 CSS 代码基本一样，不同的地方是JS变量的表示方法，用如下方式——
width: ${size}px;
红色部分，就是JS在 `` 符号里表示变量和（或）算式的方式。
此处，定义了宽度高度、背景颜色、旋转，都是随机的。