论坛 › 马黑黑教程专版 › 小白音画帖教程（完结）

马黑黑 发表于 2024-8-11 23:19

小辣椒 发表于 2024-8-11 22:11
二十二讲，黑黑的速度也是快的

一般一般

马黑黑 发表于 2024-8-11 23:19

红影 发表于 2024-8-11 22:09
可惜奥运会比赛没这两个赛项

今后会有的

红影 发表于 2024-8-11 23:39

<style>
#hy11 {
        width: 400px;
        height: 100px;
        border: 1px solid gray;
        padding: 12px;
        color: Cyan;
        text-shadow: 1px 1px 2px #111;
}
</style>
<div id="hy11" title="作业22讲"></div>
<script>
quzhi = (max) => Math.floor(Math.random() * max);
yanse = () => `hsl(${quzhi(360)}, ${Math.round(Math.random() * 100)}%, 50%)`
hy11.onclick = () => hy11.textContent = hy11.style.background = yanse();
hy11.onclick();
</script>

红影 发表于 2024-8-11 23:39

作业完成了，不知理解得对不对{:4_173:}

马黑黑 发表于 2024-8-12 07:34

红影 发表于 2024-8-11 23:39
作业完成了，不知理解得对不对
你的代码：
<style>
#hy11 {
      width: 400px;
      height: 100px;
      border: 1px solid gray;
      padding: 12px;
      color: Cyan;
      text-shadow: 1px 1px 2px #111;
}
</style>
<div id="hy11" title="作业22讲"></div>
<script>
quzhi = (max) => Math.floor(Math.random() * max);
yanse = () => `hsl(${quzhi(360)}, ${Math.round(Math.random() * 100)}%, 50%)`
hy11.onclick = () => hy11.textContent = hy11.style.background = yanse();
hy11.onclick();
</script>100√
color: Cyan; 这句CSS代码，现在的标准是颜色值用小写，尽管大字母的颜色值不会影响渲染。

马黑黑 发表于 2024-8-12 07:35

<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（三）元素的JS相关事件</h2>
        <p>web页的很多交互通过元素的某一事件来完成。CSS也有简单的事件交互，比如选择器的 :hover 伪类，它可以实现设备指针移动到元素之上时让元素自身或其它元素发生改变，这是简单交互。要实现更复杂多样的交互，需要JS的相关事件来完成。同样是鼠标指针移进移出，JS有针对鼠标指针的 mouseover（移入）和 mouseout（移出）以及 mousemove（移动），针对所有指针设备的则有 pointer* 系列事件。本讲只讨论元素的鼠标相关事件，我们先来看看基于鼠标指针移动相关的例子：</p>

<div class="hE"><pre id="pre1">
&lt;style&gt;
#ediv1 {
        margin: 30px auto;
        width: 400px;
        height: 150px;
        background: tan;
        padding: 12px;
        box-sizing: border-box;
        position: relative;
}
&lt;/style&gt;

&lt;div id="ediv1"&gt;请将鼠标指针移过来&lt;/div&gt;

&lt;script&gt;
//以下演示元素的三个事件，监听对应事件时事件名称前面加 on
//比如事件名称为 mouseover，监听事件写成 onmouseover

//鼠标经过事件 ：mouseover 鼠标指针移入元素界面
ediv1.onmouseover = () =&gt; ediv1.style.background = 'plum';
//鼠标移出事件 ：mouseout 鼠标指针移出元素界面
ediv1.onmouseout = () =&gt; ediv1.style.background = 'tan';
//鼠标移动事件 ：mousemove 鼠标指针在元素界面上滑动
ediv1.onmousemove = (e) =&gt; ediv1.innerText = 'X : ' + e.offsetX + '\nY : ' + e.offsetY;
&lt;/script&gt;
</pre></div>

        <p><button id="btn1" type="button" value="1">点击查看效果</button></p>
        <div id="sbox1" class="showDiv"></div>

        <p>上例的三个事件，每一个事件其实都是一个函数，所以事件语句的写法上和写一个函数结构大体一致。前两个事件，即鼠标指针移入移出事件，没有参数，它们直接运行改变元素背景色的语句，<mark>元素.style.background</mark> 这句指元素（ediv1）CSS样式（style）的背景属性（background），函数体代码令其等于 plum 或 tan，结果就是，鼠标指针移入元素界面时，元素背景色是 plum 这个颜色，移出后则是 tan 这个颜色。第三个事件是鼠标指针在元素上移动的事件，带一个参数 e，但这个参数不是调用者传递参数之用，而是元素特定的标识，可以用其他字母替代它，习惯上用 e 而已，e 这里是事件的标识，事件英文叫 event，用了该单词的头一个字母；函数体是显示鼠标指针在元素上移动时指针所在点的xy坐标值，e.offsetX 指事件发生时指针的X偏移坐标值，e.offsetY则是Y偏移坐标值，偏移参照均指向元素自身，即例中的 id="ediv1" 的 div 标签。 </p>
        <p>点击事件应该是大家更熟悉的，音画帖的小播就是通过点击达到控制音乐播放、暂停及其他联动控制的目的。下面的例子，可以点击音频标签界面上的播放暂停按钮、也可以其下方另外设计的按钮来控制音频的播放、暂停。由于我们引入了联动函数，它依据音频标签的暂停与否来联动控制一些需要动态变化的东东，演示时会发现，不论通过那个按钮控制音乐，我们设计的按钮都会有按钮上的文本变化：</p>

<div class="hE"><pre id="pre2">
&lt;p&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=32341779" controls&gt;&lt;/audio&gt;
&lt;/p&gt;
&lt;p&gt;
        &lt;button id="btnPlay" type="button" value="play"&gt;播放&lt;/button&gt;
&lt;/p&gt;

&lt;script&gt;
//自定义的联动函数 ：
mState = () =&gt; btnPlay.innerText = aud.paused ? '播放' : '暂停';
//audio标签监听事件 ：运行联动函数
aud.oncanplay = aud.onplaying = aud.onpause = () =&gt; mState();
//按钮点击事件 ：播放或暂停音乐
btnPlay.onclick = () =&gt; aud.paused ? aud.play() : aud.pause();
&lt;/script&gt;
</pre></div>

        <p><button id="btn2" type="button" value="2">点击查看效果</button></p>
        <div id="sbox2" class="showDiv"></div>

        <p>14行代码就是 id="btnPlay" 按钮的点击事件，该事件名称为 <span class="textRed">click</span>，监听它时前面要有前缀 <span class="textRed">on</span>，合起来写成 <span class="textRed">onclick</span>。监听的内容是有条件地控制音频标签：音频标签是否暂停中？如是，则播放音乐，反之，则暂停之。<span class="textRed">aud.paly()</span> 和 <span class="textRed">aud.pause()</span> 分别是audio标签的播放和暂停方法，要有小括号跟在后面。</p>
        <p>大家还可以注意观察音频播放结束后按钮的变化，看看我们设计的按钮和audio空间的按钮是否同步、为什么会这样？这是因为，不同类型的元素拥有不同的事件。上例代码，id="aud" 的音频 audio 标签我们一口气使用了三个事件，<span class="textRed">canplay</span>（可以播放事件）、<span class="textRed">playing</span>（开始播放事件） 和 <span class="textRed">pause</span>（暂停事件，注意和暂停属性 <span class="textRed">paused</span> 以及和 <span class="textRed">pause()</span> 暂停方法的区别），通过对这三个事件的监听，运行联动函数 mState() 以控制函数里预设的机制。至于什么样的标签拥有什么样的JS事件这里不作讨论，也不会做专题讨论，碰上了再说。</p>
        <p>常规标签如div、p、span等都拥有设备指针移入移出、点击等事件，现在我们还是回到点击事件。点击事件不止一个 click 事件，还有双击 <span class="textRed">dblclick</span>，还有设备按键如鼠标的左、右键按下和弹起等事件。下面代码演示对常规鼠标左键、右键和中键（滚轮被视为中键，可以按下）被按下和弹起的检测：</p>

<div class="hE"><pre id="pre3">
&lt;style&gt;
#cbox1 {
        width: 400px;
        height: 100px;
        background: #4a7ebb;
        user-select: none; /* 禁止选中内容 */
        padding: 12px;
}
&lt;/style&gt;

&lt;div id="cbox1"&gt;请在本窗口按下和弹起鼠标任意键&lt;/div&gt;

&lt;script&gt;
//函数 ：获取鼠标按下或弹起的是哪一个键
getmouseKey = (event) =&gt; {
        var keynames = ['左键','中键','右键','第四键','第五键'];
        return keynames; //event.button，事件的按键索引，依次为 0、1、2
};

cbox1.onmousedown = (e) =&gt; cbox1.innerText = '您按下了鼠标' + getmouseKey(e);
cbox1.onmouseup = (e) =&gt; cbox1.innerText = '鼠标' + getmouseKey(e) + '弹起';
cbox1.oncontextmenu = (e) =&gt; e.preventDefault(); //禁止右键菜单
&lt;/script&gt;
</pre></div>

        <p><button id="btn3" type="button" value="3">点击查看效果</button></p>
        <div id="sbox3" class="showDiv"></div>

        <p>上述演示，交互时可以按久一点再松开鼠标按键，以便可以看得更清楚一些。代码中对鼠标按钮按下弹起是哪一个键的检测针对的是常规鼠标，如果鼠标按钮在操作系统中做了人为设置，检测依据的是设置后的效果而非物理按键，还有一些鼠标会有更多的按键，程序会识别为第四键和第五健。</p>
        <p>下面的例子演示单击和双击事件，注意，单击和双击仅针对鼠标左键：</p>

<div class="hE"><pre id="pre4">
&lt;style&gt;
#cbox2 {
        width: 400px;
        height: 100px;
        background: #4a7ebb;
        user-select: none;
        padding: 12px;
}
&lt;/style&gt;

&lt;div id="cbox2"&gt;请在本窗口单击或双击&lt;/div&gt;

&lt;script&gt;
cbox2.ondblclick = (e) =&gt; cbox2.innerText = '双击';
cbox2.onclick = (e) =&gt; cbox2.innerText = '单击';
&lt;/script&gt;
</pre></div>

        <p><button id="btn4" type="button" value="4">点击查看效果</button></p>
        <div id="sbox4" class="showDiv"></div>

        <p>元素的鼠标事件在音画帖中会经常用到，尤其是单击事件 click，监听单击事件写成 <mark>元素标识.onclick = () => ...</mark>，我们要做的通常是使用小播的单击事件去控制音频的播放与暂停，然后再去监听音频标签的几个事件，一般是 <span class="textRed">oncanplay、onplaying、onpause</span> 三个，它们写在一块儿，运行的是自定义的联动控制函数。复杂的交互帖子可能需要监听更多的事件，但一切建立在最简单的基础上，学好上面的内容，日后才有可能做出更精致优雅而到位的交互效果。</p>
        <p>作业：做一个自定义尺寸的元素，给它指定一个id，背景颜色是自定义颜色一。该元素左键单击时背景色变为自定义颜色二，右键单击时背景色是自定义颜色3，双击时背景颜色变回自定义颜色一。</p>
        <p>提示：左键单击使用 onclick 事件，双击使用 ondblclick 事件。右键单击可以使用 onmouseup 监听事件，要检测一下 event.button 是否等于 2，参考代码如下，发布作业时请把注释去掉 ：</p>

<div class="hE"><pre>
//监听鼠标按键弹起事件
元素标识.onmouseup = (e) => {
        if(e.button !== 2) return; //如果按键索引号不是2，放弃，否则执行下面语句
        元素标识.style.background = '#008000';
};
元素标识.oncontextmenu = (e) => e.preventDefault(); //屏蔽鼠标右键菜单
</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-12 21:12

马黑黑 发表于 2024-8-12 07:34
你的代码：
100√
color: Cyan; 这句CSS代码，现在的标准是颜色值用小写，尽管大字母的颜色值不会影响 ...

哦，知道了，谢谢黑黑{:4_187:}

红影 发表于 2024-8-12 21:23

马黑黑 发表于 2024-8-12 07:35
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18 ...

“元素的鼠标相关事件”
对这一章节的内容不是很熟，需要好好学习了{:4_187:}

红影 发表于 2024-8-12 21:31

ediv1.onmousemove = (e) => ediv1.innerText = 'X : ' + e.offsetX + '\nY : ' + e.offsetY;

这句拿出去测试，xy是分行的，这里的是并列的。

红影 发表于 2024-8-12 21:33

红影 发表于 2024-8-12 21:31
ediv1.onmousemove = (e) => ediv1.innerText = 'X : ' + e.offsetX + '\nY : ' + e.offsetY;

这句拿出 ...

当移动速度快了，从上方移出鼠标，y还有残留值，其他各个方向上也一样。
慢慢移动鼠标到外头，对应的值才是真正的各边应该出现的值。

也就是说鼠标太快的时候，电脑来不及反应吧{:4_173:}

红影 发表于 2024-8-12 21:41

“监听它时前面要有前缀 on”
嗯嗯，知道了{:4_187:}

红影 发表于 2024-8-12 21:59

这次作业没看懂，为什么要检测 event.button 是否等于 2？这个是做什么用的？

小辣椒 发表于 2024-8-12 22:15

马黑黑 发表于 2024-8-11 23:19
不够用呢，啥都贵了，开销大

你都土豪级别的人了，看看我们小老百姓的生活才是钱不够用的，每天辛辛苦苦的，就混了三顿饭{:4_189:}

小辣椒 发表于 2024-8-12 22:16

马黑黑 发表于 2024-8-11 23:19
一般一般

反正我现在是来不及看的，现在脑子是一片浆糊的

马黑黑 发表于 2024-8-13 07:51

小辣椒 发表于 2024-8-12 22:15
你都土豪级别的人了，看看我们小老百姓的生活才是钱不够用的，每天辛辛苦苦的，就混了三顿饭

俺连老百姓的资格都木有，以前住桥洞，现在不给住了，只能四处游荡

马黑黑 发表于 2024-8-13 07:53

红影 发表于 2024-8-12 21:59
这次作业没看懂，为什么要检测 event.button 是否等于 2？这个是做什么用的？

教程也没看懂。教程提到，指针设备按键有左键、中键、右键、第四键、第五键，索引号依次为 0、1、2、3、4

小辣椒 发表于 2024-8-13 21:03

马黑黑 发表于 2024-8-13 07:51
俺连老百姓的资格都木有，以前住桥洞，现在不给住了，只能四处游荡

哈哈，我就当黑黑在唱山歌了{:4_170:}

马黑黑 发表于 2024-8-13 21:25

小辣椒 发表于 2024-8-13 21:03
哈哈，我就当黑黑在唱山歌了

嗯，山野之人，也只能常常山歌了

红影 发表于 2024-8-14 12:09

马黑黑 发表于 2024-8-13 07:53
教程也没看懂。教程提到，指针设备按键有左键、中键、右键、第四键、第五键，索引号依次为 0、1、2、3、4

这个也是作业要求的内容之一吧，右键需要用这样的方式实现。

红影 发表于 2024-8-14 12:11

<style>
#hy12 {
        width: 400px;
        height: 100px;
        background: #FFC0CB;
        user-select: none;
        padding: 12px;
}
</style>

<div id="hy12">原始背景颜色#FFC0CB</div>

<script>

getmouseKey = (event) => {
        var keynames = ['左键','双击','右键'];
        return keynames;
};

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();
</script>

查看完整版本: 小白音画帖教程（完结）