新的一页了。。。
今天仔细看了黑黑的分享，感觉这个才是真正的教程哦{:4_173:}
代码后面的备注太仔细了，一目了然的，小辣椒其实许多代码的意思今天看了才知道
黑黑也是速度的，已经第八讲了{:4_199:}
小辣椒 发表于 2024-7-29 23:32
黑黑也是速度的，已经第八讲了
何止？只是这里久久不能翻页
<style>
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18px / 26px sans-serif; }
.artbox mark { color: black; background: lightblue; padding: 2px 4px; }
.textRed { color: red; }
.showDiv { position: relative; }
</style>
<div class="artbox">
<h2 class="textMid">第九讲：在帖子中添加大批量的子元素</h2>
<p>上一讲我们留下的思考题是如何更简洁地添加成百上千的子元素。这不是一个异想天开的问题，它有实用的场景需求，例如给帖子或帖子的播放器添加粒子。本讲，我们将给播放器元素添加粒子。先看看播放器的代码和运行效果：</p>
<div class="hE" id="hE1"><pre>
<style>
.player {
position: absolute;
width: 200px;
height: 200px;
border: 12px solid lightblue;
border-style: double dotted;
border-radius: 50%;
}
</style>
<div class="player"></div>
</pre></div>
<p><button id="btn1" type="button" value="1">点击查看长的啥样</button></p>
<div id="sbox1" class="showDiv"></div>
<p>现在，我们要往里面安置100个 10*10 的小球充当粒子，这些粒子随机放在圈圈里面。如果使用CSS+HTML来完成，我们要写大量的 :nth-of-type(N) 和100个粒子标签，这也太多了，所以，我们改用JS来批量完成。在使用JS批量添加粒子之前，我们需要做一些简单的准备工作，设计一个小球专属的class选择器，加在 CSS代码里：</p>
<div class="hE"><pre>
.ball {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
}
</pre></div>
<p>这是基本的小球样式，有了这个JS就可以干活了：</p>
<div class="hE"><pre>
var total = 100; //声明小球总数变量并赋值
Array.from({length: total}).forEach(b => {
b = document.createElement('div');
b.className = 'ball';
b.style.cssText += `
left: ${Math.random() * 200}px;
top:${Math.random() * 200}px;
background: #{Math.random().toString(16).substring(2,8)};
`;
player.appendChild(b);
});
</pre></div>
<p>解释一下上述代码：</p>
<p>第1行：典型的变量声明与负值，total 是我们命名的变量名。</p>
<p>第3和12行：这两行结构为 <mark>数组.forEach(数组元素 => { 咋样咋样 });</mark>，数组是临时构建的，使用关键字 <mark>Array.from({length: total})</mark> 方法，Array 数组，from 来自，length 长度，total 是我们前面声明并赋值的变量，也可以直接写一个数字。遍历这个临时创建的数组，用 <mark>forEach()</mark> 方法，前面介绍过，b是自定义的名称，这里指代遍历到的每一个数组元素。然后是一组花括号，里面就是函数体具体代码，即遍历这个数组元素要做什么。</p>
<p>第5行：数组元素变量 b 转为一个元素变量，因为 b 本身只是指向数组元素，这个我们临时创建的数组是空的，b并没有什么实际意义，所以借用它来充当元素变量即标签变量，免得重新声明一个变量。这里，我们用 document.createElement('元素名') 方法创建一个 div 并赋值给 b 变量，b 从空数组元素摇身一变成了一个div元素。</p>
<p>第5行：给div元素 b 指明类名，className 类名，指向先前定义的CSS选择器 .ball，这样，所创建的div元素实际上是这样子：<mark><div class="ball"></div></mark>。</p>
<p>第6~10行：设置 b 这个div的新样式。我们使用 <span class="textRed">style.cssText</span> 属性，将多个样式设置以添加的方式（<mark>+=</mark>）追加给具体的 b 这个 div 元素，用反引号 <mark>``</mark> 将各行内容包裹起来。反引号的打法：英文输入状态下按键盘左上角自上而下的第二个键，就是哪儿标有~和`的那个键位。然后，分别设置新增的属性———</p>
<p>第7、8行：设置 left 和 top 定位置，给 b 定位。这里使用了JS随机数生成方法 <mark>Math.random()</mark> 生成一个 0~0.999... 的随机数，乘以 200 是设置 left 和 top 的范围，这样会得到 0~199.999... 之间的数值，b 元素就在这个范围内安身，这个范围以 b 的父元素做参照。反引号里的 <mark>${...}</mark> 是一种特殊的表达方式，用来表明花括号里的内容是JS变量或计算式子。</p>
<p>第9行：设置背景色。这里，先生成一个随机数，然后将其变为16进制，再从16进制的长字串中截取一段文本，构成一个16进制颜色值，结果长类似酱紫，<mark>#fc33e6</mark>。</p>
<p>第11行：使用JS内置方法 appendChild 将已经设置好的元素 b 追加给 player 元素。appendChild 是追加孩子的意思，现在不是主张生二宝三宝四宝吗，用这个JS方法会很高效，可惜上面没人知道这个东东。</p>
<p>OK，酱紫，100个 class="ball" 的div元素就创建好了，并及时过继给了 id="player" 的元素做儿子（子元素）。我们来整合一下代码，感受一下一下子就能拥有100个儿子的喜悦：</p>
<div class="hE" id="hE2"><pre>
<style>
.player {
position: absolute;
width: 200px;
height: 200px;
border: 12px solid lightblue;
border-style: double dotted;
border-radius: 50%;
}
.ball {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
}
</style>
<!-- id="player" 是JS操作标识，class="player" 是挂钩 .player选择器 -->
<div id="player" class="player"></div>
<script>
var total = 100;
Array.from({length: total}).forEach(b => {
b = document.createElement('div');
b.className = 'ball';
b.style.cssText += `
left: ${Math.random() * 200}px;
top:${Math.random() * 200}px;
background: #${Math.random().toString(16).substring(2,8)};
`;
player.appendChild(b);
});
</script>
</pre></div>
<p><button id="btn2" type="button" value="2">点击查看添加100个子元素的样子</button></p>
<div id="sbox2" class="showDiv"></div>
<p>嗯，貌似有一些粒子长外面去了。这没关系，都是自己的屋檐下，暂时不用去精准调整，我们主要是看看添加100个小球球的效果。可以根据需要添加更多，不过提示一下，过多的子元素是消耗资源的，道理非常简单：人口多了消耗的粮食也多，所以加多少自己拿捏好，300之内一般不为过。</p>
<p>这些追加的子元素可以是非静止状态的，我们可以让它们做CSS关键帧动画，这只需设计一个 @keyframes 关键帧动画并在对应的CSS选择器中使用animation属性调用动画即可，当然还需要在JS代码中给每一个子元素加上动画延时令其提前运行以营造错落有致的运动秩序。以下实例，我们给 id="player1" 的小播添加80个粒子，并让粒子向上飞行，飞行的同时还变化透明度以便让过程看起来不那么生硬。这次，我们使用自定义HTML标签，li-zi 来取代 div 标签，li-zi 是自命名的标签名称：</p>
<div class="hE" id="hE3"><pre>
<style>
#player1 {
position: absolute;
width: 200px;
height: 200px;
border: 12px solid lightgreen;
border-style: dotted double solid;
border-radius: 50%;
}
li-zi {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
animation: fly 6s linear infinite;
}
@keyframes fly {
0% { transform: translateY(0); opacity: 0; }
15% { transform: translateY(-60px); opacity: 1; }
100% { transform: translateY(-240px); opacity: 0; }
}
</style>
<!-- id="player1" 既是JS操作依据又是挂钩 #player1选择器 -->
<div id="player1"></div>
<script>
Array.from({length: 80}).forEach(lz => {
lz = document.createElement('li-zi');
lz.style.cssText += `
left: ${30 + Math.random() * 130}px;
top: ${30 + Math.random() * 130}px;
background: #${Math.random().toString(16).substring(2,8)};
animation-delay: -${Math.random() * 6}s;
`;
player1.appendChild(lz);
});
</script>
</pre></div>
<p><button id="btn3" type="button" value="3">点击查看运行效果</button></p>
<div id="sbox3" class="showDiv"></div>
<p>效果看上去还不错。关于动画设计，除了以前提到的关键字 from 和 to 还可以使用百分比设计更细致的运动方案，大家可以细细体会，可以尝试添加更多的百分比和运动描述。</p>
<p>本讲主要介绍如何使用JS动态生成元素，并将生成的元素作为子元素添加到已有的容器元素中。所生成的元素使用 JS 内置的 <mark>document.createElement('元素名')</mark> 方法创建，<span class="textRed">createElement</span> 就是创建元素的意思。创建的元素可以设置新的CSS属性样式，使用 <mark>style.cssText</mark> 逐一设置，和写CSS代码差不多，重点是它可以使用特殊的方式 <mark>${ js代码 }</mark>带入JS代码给CSS相关属性赋值。准备就绪后，将子元素追加给父元素，使用 appendChild() 方法。JS所创建的元素可以是div、p、span等等任何一个有效的HTML标签，甚至可以使用自定义的标签。</p>
<p>作业：改造本讲最后的实例代码，使得小播的“口”往右开、粒子向右飞行。提示：@keyframes 关键帧动画设计中，平移转换原例使用的是 translateY，它是向上或向下平移，这取决与平移的距离是正数还是负数，正数的话在原位置基础上继续加大距离所以往下，反之，负数的话是在原位置基础上减去距离所以往上移动。水平方向的平移使用 translateX，请自行尝试使用什么样的数值去实现并分析原由。</p>
<p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307&extra=page%3D1">返回目录</a></p>
</div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
var runCodes = (str,ele,height) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
ele.style.height = height + 'px';
ele.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
var code1 = hE1.querySelector('pre').innerText,
code2 = hE2.querySelector('pre').innerText,
code3 = hE3.querySelector('pre').innerText;
btn1.onclick = () => {
runCodes(code1, sbox1, 220);
btn1.disabled = true;
};
btn2.onclick = () => {
runCodes(code2, sbox2, 240);
btn2.disabled = true;
};
btn3.onclick = () => {
runCodes(code3, sbox3, 240);
btn3.disabled = true;
};
</script>
马黑黑 发表于 2024-7-29 23:42
何止？只是这里久久不能翻页
哦，这样啊，这里回帖太少？
那今天我多回几个{:4_173:}
一定要翻页才可以下一个
黑黑辛苦的，噶迟了还在
第九讲了，估计翻页后就第十了
黑黑讲的也是快的，已经讲到粒子效果了
小辣椒 发表于 2024-7-29 23:49
第九讲了，估计翻页后就第十了
看看明天
马黑黑 发表于 2024-7-29 23:53
看看明天
还没有翻页的
小辣椒 发表于 2024-7-29 23:47
哦，这样啊，这里回帖太少？
学习热情不高。可能不需要酱紫的入门级教程吧估计
小辣椒 发表于 2024-7-29 23:54
还没有翻页的
{:4_190:}
马黑黑 发表于 2024-7-29 23:44
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18 ...
appendChild 是追加孩子的意思，现在不是主张生二宝三宝四宝吗，用这个JS方法会很高效，可惜上面没人知道这个东东。
看得笑，现实里要是也能入代码里生宝宝，那就人口无处容纳了{:4_173:}
这里的粒子效果下的代码边框不一样呢，很漂亮{:4_187:}
来学习。谢谢黑黑，辛苦了。
红影 发表于 2024-7-30 17:55
appendChild 是追加孩子的意思，现在不是主张生二宝三宝四宝吗，用这个JS方法会很高效，可惜上面没人知道 ...
这些都是有条件的，且纳入了智能管控，根据条件来合理运作
马黑黑 发表于 2024-7-30 12:29
学习热情不高。可能不需要酱紫的入门级教程吧估计
别这么想，可能大家没注意。{:4_187:}