作业估计肯定有问题，我用getmouseKey(e) + '返回原始颜色#FFC0CB'; 没办法得到“双击”两字，只能手动加上了{:4_173:}
红影 发表于 2024-8-14 12:12
作业估计肯定有问题，我用getmouseKey(e) + '返回原始颜色#FFC0CB'; 没办法得到“双击”两字，只能手动加上 ...
单击、双击、右击都是独立的事件，在该事件中表明是单击、双击、右击很正常，无需去获取什么击，你要获取的是按钮名称，但又不是所有的击都能获取按键名称，这点教程里说清楚的。
你的代码：
hy12.onclick = (e) => { hy12.style.background = '#DDA0DD'; hy12.innerText = '单击' + getmouseKey(e) + '变为颜色#DDA0DD'; }
hy12.ondblclick = (e) => { hy12.style.background = '#FFC0CB'; hy12.innerText = '双击返回原始颜色#FFC0CB'; }
hy12.onmouseup = (e) => { if(e.button !== 2) return; hy12.style.background = '#87CEFA'; hy12.innerText = '单击' + getmouseKey(e) + '变为颜色#87CEFA'; }
hy12.oncontextmenu = (e) => e.preventDefault();
红色的部分，e 参数在后续中没有用上，所以应该去掉。有参数而不使用，从严格意义上讲是问题，但无伤大雅也不碍事。
红影 发表于 2024-8-14 12:11
#hy12 {
width: 400px;
height: 100px;
100√
<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; }
.textMid { text-align: center; }
.showDiv { position: relative; }
</style>
<div class="artbox">
<h2 class="textMid">第二十四讲：学一点点JS（四）动态追加元素</h2>
<p>动态给帖子追加元素是做高级音画帖必备的能力，有必要用一个章节专门讨论。本讲概念和方法都不会太多，难度 <span class="textRed">★★★☆</span>。</p>
<p>有多种方法可以给既有元素追加新的子元素，我们以给元素追加一张图片为例加以说明，假设帖子元素 <mark>id="tz"</mark>：</p>
<div class="hE"><pre>
//方法一 ：使用 element.innerHTML = '图片HTML代码'
var imgHtml = '<p><img alt="" src="图片地址" /></p>'; //编写图片代码并赋值给变量 imgHtml
tz.innerHTML += imgHtml; //令帖子容器的内容再加上图片标签
//tz.innerHTML = imgHtml + tz.innerHTML; //将图片添加到帖子其他内容之前
//方法二 ：使用 element.appendChild() 或 prepend() 方法
var image = document.createElement('img'); //创建 img 标签
image.alt = ''; //img 标签不能缺少alt属性
image.src = '图片地址'; //给 img 标签的src属性赋值（指定图片地址）
//image.title = '图片响应式弹出的标题';
//image.className = 'mypic'; //使用 .mypic 选择器的样式
tz.appendChild(image); //加载图片到 tz 容器中 : 向后追加
//tz.prepend(image); //加载图片到 tz 容器中 ：向前追加
</pre></div>
<p>第一种方法其实是改变帖子容器的 <span class="textRed">innerHTML</span> 即内部HTML代码内容，此法想加多少加多少。类似 innerHTML 的元素JS属性还有 <span class="textRed">innerText</span> 内部文本，<span class="textRed">textContent</span> 文本内容，后二者都是基于文本而非HTML代码，它们能加文本但加不了元素，所以要用 <span class="textRed">innerHTML</span> 来实现。请特别注意这三个关键字属性的大小写。</p>
<p>第二种方法是专业的追加元素方法，先根据需要创建对应的标签，我们要追加的是图片标签，所以基于 document（web文档）的 createElement 创建元素方法使用的是 <mark>'img'</mark> 标签做参数，元素标签是字符名称，所以用小角单引号或双引号包裹起来。如果创建的是div标签，就用 <mark>'div'</mark> 做参数，其余标签依此类推。接着，根据标签的相应属性和自己设计要求，给足标签所有的属性和属性值。最后，使用 <span class="textRed">容器.appendChild()</span> 或 <span class="textRed">容器.prepend()</span> JS内置方法将所创建的元素追加给容器，其中，appendChild() 追加到容器所有子元素的后面，prepend() 方法追加到容器所有子元素的前面。向前还是向后追加根据情况而定，比如，不想让追加的元素挡住容器里的既有元素，则用 prepend() 方法，如果层级关系不必关心，则用哪一个都行，又或者，如果想让添加的元素不被兄弟元素遮挡，则使用 appendChild() 方法。</p>
<p>方法二通常会使用CSS做些配套，以避免要写的JS代码量过大。以下两个例子都给图片设置了CSS样式，绝对定位是和按钮一块儿设置，第一个示例的图片还专门设置了一个class选择器、第二个示例则给待添加图片设置一个id选择器，然后分别使用 appendChild() 和 prepend() 方法追加图片到容器元素中，运行代码后注意观察新追加的图片和既有元素的层级关系。</p>
<p>【例一】appendChild() 方法：</p>
<div class="hE"><pre id="pre1">
<style>
#tz1 {
margin: 30px auto;
width: 600px;
height: 300px;
border: 1px solid gray;
position: relative;
}
#tz1 > img, #tz1 > button { position: absolute; }
.pic { max-width: 90%; max-height: 90%; left: 60px; }
#btnAdd1 { bottom: 10px; right: 10px; }
</style>
<div id="tz1">
<img alt="" src="https://638183.freep.cn/638183/web/svg/3star.svg" title="图一" />
<button id="btnAdd1" type="button" value="add1">点击我使用 appendChild() 方法向后追加图片</button>
</div>
<script>
btnAdd1.onclick = () => {
var image1 = document.createElement('img');
image1.className = 'pic';
image1.alt = '';
image1.src = 'https://638183.freep.cn/638183/web/svg/sunfl-1.svg';
image1.title = '图二';
tz1.appendChild(image1);
btnAdd1.disabled = true;
};
</script>
</pre></div>
<p><button id="btn1" type="button" value="1">点击查看效果</button></p>
<div id="sbox1" class="showDiv"></div>
<p>【例二】prepend() 方法：</p>
<div class="hE"><pre id="pre2">
<style>
#tz2 {
margin: 30px auto;
width: 600px;
height: 300px;
border: 1px solid gray;
position: relative;
}
#tz2 > img, #tz2 > button { position: absolute; }
#pic { max-width: 90%; max-height: 90%; left: 60px; }
#btnAdd2 { bottom: 10px; right: 10px; }
</style>
<div id="tz2">
<img alt="" src="https://638183.freep.cn/638183/web/svg/3star.svg" title="图一" />
<button id="btnAdd2" type="button" value="add2">点击我使用 prepend() 方法向前追加图片</button>
</div>
<script>
btnAdd2.onclick = () => {
var image2 = document.createElement('img');
image2.id = 'pic'
image2.alt = '';
image2.src = 'https://638183.freep.cn/638183/web/svg/sunfl-1.svg';
image2.title = '图二';
tz2.prepend(image2);
btnAdd2.disabled = true;
};
</script>
</pre></div>
<p><button id="btn2" type="button" value="2">点击查看效果</button></p>
<div id="sbox2" class="showDiv"></div>
<p>有些应用场合不方便加CSS，我们也可以在JS代码中完成所有的CSS设置，可以使用元素的 style 属性一个一个属性地写CSS各属性代码，也可以使用 style.cssText 属性批量写所需的CSS各属性代码。下面是两种实现方法的代码举例：</p>
<div class="hE"><pre>
<!-- 方法一 ：分开写图片标签的CSS属性 -->
<div id="tz"></div>
<script>
var pic = document.createElement('img');
pic.style.position = 'absolute';
pic.style.left = '20px';
pic.style.top = '20px';
pic.style.width = '200px';
pic.style.height = '200px';
pic.style.title = '图片美美哒';
pic.style.alt = '';
pic.src = 'https://638183.freep.cn/638183/web/svg/flower_3.svg';
pic.onclick = () => alert('谢谢你点击我！');
tz.appendChild(pic);
</script>
<!-- 方法二 ：批量写图片标签的CSS属性 -->
<div id="tz"></div>
<script>
var pic = document.createElement('img');
pic.style.cssText = `
position: absolute;
left: 20px;
top: 20px;
width: 200px;
height: 200px;
`;
pic.style.title = '图片美美哒';
pic.style.alt = '';
pic.src = 'https://638183.freep.cn/638183/web/svg/flower_3.svg';
pic.onclick = () => alert('谢谢你点击我！');
tz.appendChild(pic);
</script>
</pre></div>
<p>以上代码可以分别拿到 <a href="http://mhh.52qingyin.cn/api/pccc/" target="_blank">pencil code</a> 运行，运行前勾选一下界面右下角的复选框以令小窗口程序运行时不过左偏移。</p>
<p>作业：假设有一个自设宽高尺寸的元素，它里面有一行h2标题、一张小图片，现在，请给该元素追加一个 audio 标签。要求：① 图片另起一行，以确保布局整齐有序；② audio 播放器以追加的方式放在既有子元素之后，给它指定音频地址并令其自动播放、循环播放。</p>
<p>提示：本次作业的目的主要是理解元素的追加和追加元素前的设置，所以可以参考如下代码结构完成作业，但请尽量不要复制！可以理解好代码再去盲做——</p>
<div class="hE"><pre>
<style>
#mydiv {
margin: 30px auto;
width: 700px;
height: 360px;
position: relative;
}
</style>
<div id="mydiv">
<h2>h2标题</h2>
<!-- p标签能保证图片独占一行 ：图片是行内标签 -->
<p><img src="图片地址" alt="" /></p>
</div>
<script>
var aud = document.createElement('audio');
/* audio标签各属性不是CSS属性，是HTML属性，注意以下属性不能出现 style */
aud.src = 'MP3地址';
aud.autoplay = true; //false不自动播放
aud.loop = true; //false不循环播放
aud.controls = true; //缺省或false不显示界面
mydiv.appendChild(aud); //向后追加播放器
</script>
</pre></div>
<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) => {
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.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
.forEach((btn,key) => {
var pres = ,
outs = ;
btn.onclick = () => {
runCodes(pres.innerText, outs);
btn.disabled = true;
}
});
</script>
马黑黑 发表于 2024-8-14 13:24
单击、双击、右击都是独立的事件，在该事件中表明是单击、双击、右击很正常，无需去获取什么击，你要获取 ...
哦，对的，e根本没用上，我还留着了，学习的深度不够。{:4_187:}
马黑黑 发表于 2024-8-14 13:25
100√
过关了？太好了，谢谢黑黑{:4_204:}
“appendChild() 追加到容器所有子元素的后面，prepend() 方法追加到容器所有子元素的前面。”
看例子演示，这个前后貌似效果类似层级关系，加在元素后面的是在上面，前面的在下面。
这次的作业等于已经给出做法了啊{:4_173:}
audio标签各属性不是CSS属性，是HTML属性，注意以下属性不能出现 style *
这个没看懂，那么怎样给它定义位置呢？
红影 发表于 2024-8-14 21:12
audio标签各属性不是CSS属性，是HTML属性，注意以下属性不能出现 style *
这个没看懂，那么怎样给它定义 ...
和其他元素一样设置
马黑黑 发表于 2024-8-14 21:46
和其他元素一样设置
哦，知道了，谢谢黑黑{:4_187:}
<style>
#hy {
margin: 30px auto;
width: 700px;
height: 360px;
position: relative;
}
</style>
<div id="hy">
<h2 style="color: blue; font-size: 24px;">拼凑24讲作业</h2>
<p><img src="https://638183.freep.cn/638183/web/svg/3star.svg" alt="" /></p>
</div>
<script>
var aud = document.createElement('audio');
aud.src = 'https://music.163.com/song/media/outer/url?id=2113820733';
aud.autoplay = true;
aud.loop = true;
aud.controls = true;
hy.appendChild(aud);
</script>
小图和音乐都帖子里粘来的{:4_173:}
这个加上背景图，加上定位以及和音乐关联，也跟帖子差不多了{:4_173:}
红影 发表于 2024-8-14 22:00
这个加上背景图，加上定位以及和音乐关联，也跟帖子差不多了
这不是最终目的了吗
红影 发表于 2024-8-14 21:59
#hy {
margin: 30px auto;
width: 700px;
100√
马黑黑 发表于 2024-8-14 22:14
这不是最终目的了吗
也是啊，最终的目的本来就是做帖子{:4_187:}
马黑黑 发表于 2024-8-14 22:15
100√
开心通过，谢谢黑黑{:4_204:}
{:4_173:}
已经讲了这么多了，老师辛苦了{:4_204:}