绿叶清舟 发表于 2024-8-31 21:51

马黑黑 发表于 2024-8-31 21:43
那也不至于，大学老师可不是都是厦大的

尤其现在的老师啥怪象都能接受的了

马黑黑 发表于 2024-8-31 22:28

绿叶清舟 发表于 2024-8-31 21:51
尤其现在的老师啥怪象都能接受的了

是的，包括给学生下跪

马黑黑 发表于 2024-8-31 22:29

绿叶清舟 发表于 2024-8-31 21:45
现在就在手机上了，就是字有点小了

一切可以设置

花飞飞 发表于 2024-9-3 14:58

本帖最后由 花飞飞 于 2024-9-3 15:01 编辑 <br /><br />马黑黑 发表于 2024-8-25 10:46
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18 ...

<style>
#divbox3 {
        width: 600px;
        height: 200px;
        font-size: 2rem;
        text-shadow: 1px 1px 2px gray;
        background: lightblue;
        border: 2px solid gray;
        padding: 10px;
}
</style>

<div id="divbox3">移入时前景红 ，背景绿；<br>移出时前景黑，背景蓝</div>
<script>

divbox3.onpointerover = () => {
divbox3.style.cssText +='color:red; background : green';
}
divbox3.onpointerout = () => {
divbox3.style.cssText +='color:black; background : lightblue';
}
</script>

花飞飞 发表于 2024-9-3 15:01

本帖最后由 花飞飞 于 2024-9-3 15:02 编辑 <br /><br />《小白音画教程》第二十五讲作业一：
有一个元素，部分代码如下所示，它已经拥有CSS样式，
但我们还希望在交互时它能动态地产生一些变化，
具体是，设备指针（pointer）移入元素界面时前景色是红色、背景色是浅绿色，
移出时前景色是黑色、背景色是浅蓝色。






<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<div class="mum">
<cl-cd data-idx="1">&lt;<span class="tDarkRed">style</span>&gt;</cl-cd>
<cl-cd data-idx="2">#divbox3 {</cl-cd>
<cl-cd data-idx="3">&nbsp; &nbsp; <span class="tBlue">width:</span> 600px;</cl-cd>
<cl-cd data-idx="4">&nbsp; &nbsp; <span class="tBlue">height:</span> 200px;</cl-cd>
<cl-cd data-idx="5">&nbsp; &nbsp; <span class="tBlue">font-size:</span> 2rem;</cl-cd>
<cl-cd data-idx="6">&nbsp; &nbsp; <span class="tBlue">text-shadow:</span> 1px 1px 2px gray;</cl-cd>
<cl-cd data-idx="7">&nbsp; &nbsp; <span class="tBlue">background:</span> lightblue;</cl-cd>
<cl-cd data-idx="8">&nbsp; &nbsp; <span class="tBlue">border:</span> 2px solid gray;</cl-cd>
<cl-cd data-idx="9">&nbsp; &nbsp; <span class="tBlue">padding:</span> 10px;</cl-cd>
<cl-cd data-idx="10">}</cl-cd>
<cl-cd data-idx="11">&lt;<span class="tDarkRed">/style</span>&gt;</cl-cd>
<cl-cd data-idx="12">&nbsp;</cl-cd>
<cl-cd data-idx="13">&lt;<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"divbox3"</span>&gt;移入时前景红，背景绿；&lt;<span class="tDarkRed">br</span>&gt;移出时前景黑，背景蓝&lt;<span class="tDarkRed">/div</span>&gt;</cl-cd>
<cl-cd data-idx="14">&lt;<span class="tDarkRed">script</span>&gt;</cl-cd>
<cl-cd data-idx="15">&nbsp;</cl-cd>
<cl-cd data-idx="16">divbox3.onpointerover = () =&gt; {</cl-cd>
<cl-cd data-idx="17">divbox3.style.cssText +=<span class="tMagenta">'<span class="tBlue">color:</span>red; background&nbsp;: green'</span>;</cl-cd>
<cl-cd data-idx="18">}</cl-cd>
<cl-cd data-idx="19">divbox3.onpointerout = () =&gt; {</cl-cd>
<cl-cd data-idx="20">divbox3.style.cssText +=<span class="tMagenta">'<span class="tBlue">color:</span>black; background&nbsp;: lightblue'</span>;</cl-cd>
<cl-cd data-idx="21">}</cl-cd>
<cl-cd data-idx="22">&lt;<span class="tDarkRed">/script</span>&gt;</cl-cd>
</div>

花飞飞 发表于 2024-9-3 15:03

{:4_173:}
艾玛，虽然做过一次作业，但还是重新温习好几节课之后才写出来。。

马黑黑 发表于 2024-9-3 18:15

花飞飞 发表于 2024-9-3 15:03
艾玛，虽然做过一次作业，但还是重新温习好几节课之后才写出来。。

{:4_190:}

马黑黑 发表于 2024-9-3 18:22

本帖最后由 马黑黑 于 2024-9-3 19:49 编辑 <br /><br /><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">第二十七讲：在帖子中实现LRC歌词同步</h2>
        <p>LRC歌词同步在帖子中的实现离不开CSS和JS的加持，CSS主要负责包含动画在内的歌词界面的定制、JS侧重管理和驱动歌词的动态变化。本讲主要讲讲实现原理，以及如何通过使用插件来实现LRC歌词同步。</p>
        <p>先简单说说实现LRC歌词同步的原理：使用元素+伪元素分别装载当前演唱的同一句歌词，宿主元素装载的是偏暗或偏灰的歌词，伪元素则装载亮色的歌词并令其宽度从0变到100%。以下是一个模拟性质的演示实例：</p>

<div class="hE"><pre id="pre1">
&lt;style&gt;
.lrcBox {
        width: fit-content; /* 自适应宽度 ：根据文本决定 */
        height: 40px;
        font: bold 20px/40px sans-serif; /* 行高与盒子高度一致以保证文本垂直居中 */
        color: silver; /* 歌词底色 */
        white-space: pre; /* white-space属性用于控制折行行为 */
        padding: 10px;
        border: 1px solid;
        position: relative; /* 父元素相对或绝对定位均可 */
}
.lrcBox::before {
        position: absolute; /* 伪元素必须绝对定位 */
        content: attr(data-text); /* 伪元素文本使用CSS函数 attr(变量名) */
        overflow: hidden; /* 必须设定防止溢出属性为hidden隐藏 */
        width: 0; /* 开始时宽度是 0 */
        height: 100%; /* 高度是父元素的100% */
        color: red; /* 歌词同步颜色 */
        transition: 3s; /* transition动画周期时长 */
}
/* 伪元素通过伪类属性运行transition动画 */
.lrcBox:hover::before {
        width: 100%; /* 宽度变为 100% */
}
&lt;/style&gt;

&lt;div class="lrcBox" data-text="LRC歌词演示 : 鼠标移入移出看效果"&gt;LRC歌词演示 : 鼠标移入移出看效果&lt;/div&gt;
</pre></div>

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

        <p>上面演示的示例没有JS代码的参与，仅通过CSS的 <span class="textRed">transition</span> 动画加以模拟，通过元素的伪类选择器 <mark>:hover</mark> 触发，意在展示歌词同步的原理。真正要实现歌词同步时，我们将使用CSS的 <span class="textRed">@keyframes</span> 属性设计动画并通过元素的 <span class="textRed">animation</span> 属性运行动画，JS要做的事情则是一个庞大而细致的工作，如果代码都放在帖子里，那帖子的代码量可能会大得惊人，因此，JS代码应该封装成插件或其他资源，帖子里仅需引用和配置插件或资源即可。本人写有一些lrc歌词同步的播放器插件，有基于精准同步的花潮lrc歌词格式和基于不那么精准同步的原生LRC歌词同步两种类型，前者需要单独制作歌词，后者可以使用现成的LRC歌词。有些歌如果找不到合适的元素lrc歌词也可以自己制作，如果手头没有制作软件，可以使用本人配套插件而开发的<a href="http://mhh.52qingyin.cn/api/pencilcode/yslrc.html" target="_blank">《原生lrc在线制作工具》</a>制作lrc歌词。讲义推荐使用原生lrc歌词同步播放器插件，至于花潮格式精准同步插件感兴趣的童鞋可以访问 <a href="http://mhh.52qingyin.cn/api/player/" target="_blank">《HCPlayer插件汇总》</a> 学习了解。下面就说说原生LRC歌词同步播放器插件的引用和配置。</p>
        <p>一、了解原生LRC歌词结构与歌词声明</p>
        <p>专业的LRC歌词结构略微有些复杂，这里只谈谈插件支持的基本结构。很简单：</p>

<div class="hE"><pre>
/* LRC歌词每句歌词的结构如下：

   歌词

   其中，中括号里面是时间信息，注意连接符 : 和 . ：
   mm 分，二位数，例 00 或 02
   ss 秒，二位数，例 06 或 56
   xx(x) 毫秒，二或三位数，例 80 或 954

   下面是帖子JS代码中声明歌词变量的方法，注意反引号的使用，
   其作用主要是歌词信息可以分行写、支持歌词中出现小角引号
*/

/* 方法一：连着写，用 \n 连接各句歌词 */
var lrcText = `歌词1\n歌词2\n……\n歌词N\n`;

/* 方法二：歌词分行写（必须使用反引号包裹歌词） */
var lrcText = `
        歌词1
        歌词2
        ……
        歌词N
`;
</pre></div>

        <p>二、引用LRC歌词同步播放器插件</p>
        <p>不同的插件引用的方法都一样。下面以圆环斜频谱插件为例加以说明：</p>

<div class="hE"><pre>
/* JS代码 ：论坛发帖引用播放器插件代码 */
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/pinpux_yslrc.js';
document.body.appendChild(sf);
</pre></div>

        <p>这其实是给页面追加 script 标签：先声明 sf 变量用来存储待创建的 script 标签对象，标签的字符集为 UTF-8 以避免英文以外的字符出现乱码，标签的 src 属性（属于HTML属性）即为插件的地址，然后将创建好的 script 标签追加给页面的 body 标签，body 是页面中的大容器标签，俗称老大，是web页现实意义上辈分最高的父元素，不过它之上还有html标签，是web页总集团董事长，body对总集团来说只是一个相当重要的基层单位，但body对web页要呈现的内容来说是大部门的老总。</p>
        <p>三、配置插件</p>
        <p>在论坛，插件的配置需要配套插件的加载，只有插件加载完毕所做的配置才会生效。上面的 sf 对象变量因此在做插件配置时还会用到，<mark>sf.onload({<span class="textRed">...</span>})</mark>，即 sf 这个script标签对象加载完毕时在 <mark><span class="textRed">...</span></mark> 处配置插件：</p>

<div class="hE"><pre>
/* JS代码 ：配置插件
   sf加载完毕操作配置
*/
sf.onload = () => {
        /* 配置开始 :HCPlayer({ ... }); 是插件通用配置结构 */
        HCPlayer({
                papa: '#mydiv', /* 指定帖子元素选择器 */
                geci: lrcText, /* 指定歌词变量 : 变量名与歌词声明的变量要相一致 */
                pinpu: { num: 40, color: 'linear-gradient(orange, transparent, orange)' }, /* 频谱设置 */
                lrc_css: `left: 20%; top: 30px; `, /* LRC歌词CSS设置 */
                player_css: `right: 60px; bottom: 20px;`, /* 播放器CSS设置 */
                fs_css: `left: 30px; bottom: 20px;`, /* 全屏按钮CSS设置 */
        });
};

/* 下面是最简单的配置，这意味着一切使用插件默认的参数值 */
sf.onload = () => HCPlayer({papa: '#mydiv'});
</pre></div>

        <p>所有插件的配置一定不能少的是 papa 参数，不过不见得是靠谱的配置，事实上，一切应根据帖子的设计配置插件。不同的插件，配置参数不尽一致，但都用共性，例如 papa 参数、geci 参数、lrc_css 参数、player_css 参数、fs_css 参数等等，每一个插件都会有，其中参数名为 *_css 的参数都是基于CSS的参数，建议使用反引号<mark> `` </mark>将参数值包裹起来，这样里面的每一个CSS属性都可以分行写；而像上例的 pinpu 参数，其值使用花括号<mark> {} </mark>包裹，是插件定义的频谱对象参数，键值对之间用小角逗号隔开，天然地支持分行写各个键值对，要注意的是，对象参数值中的键值值如果是字符串必须使用小角引号包裹。插件提供的参数，以及参数值的子项目，不便在此一一说明，可以访问<a href="http://mhh.52qingyin.cn/art/show.php?st=2&sd=2&art=mahei_1723978735" target="_blank">《原生lrc歌词同步插件列表》</a>，找到自己希望使用的插件，里面有每一个插件的说明和示例链接，研究好之后再使用。</p>
        <p>顺便提一下，上面代码中，绿色文本为注释文本，熟悉了代码意义之后，做帖时可以不要这些注释。</p>
        <p>前面提到过，花潮格式的LRC歌词同步更为精准，这是因为本人设计的歌词结构包含了每一句歌词的具体演唱用时。依此道理，原生LRC歌词如果不太准确也可以略作改造，弄得好也可以达到相对精准的同步效果：一是给间隔过长的两句歌词间加一个时间+额外的相关信息或干脆歌词留空也行，以压缩它们的间隔；二是给出合适的 average 参数值，它可以抵消一些不合理的间隔，但确定参数值的难度较大，一般的判断依据是歌词的起唱、中间过渡、末尾止唱是否存在较大间隔的无歌词过程，它们与大概的各句歌词的平均用时是否存在较大的偏差等等，这些可能需要操作上的经验。</p>
        <p>最后给出一个简单的使用原生LRC歌词同步播放器的示例，以结束本讲的讲义：</p>

<div class="hE"><pre id="pre2">
&lt;style&gt;
#tz {
        width: 740px;
        height: 350px;
        background: linear-gradient(lightblue, black);
        position: relative;
}
&lt;/style&gt;

&lt;div id="tz"&gt;
        &lt;audio src="https://music.163.com/song/media/outer/url?id=1363152402" loop autoplay&gt;&lt;/audio&gt;
&lt;/div&gt;

&lt;script&gt;
var lrcStr = `
        纯音乐 - 凡尘
        歌手 - 九鸢Pro
       
`;
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/pinpux_yslrc.js';
document.body.appendChild(sf);

sf.onload = () => {
        HCPlayer({
                papa: '#tz',
                geci: lrcStr,
                pinpu: {
                        num: 20,
                },
        });
};
&lt;/script&gt;
</pre></div>

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

        <p><span class="textRed">作业</span>：参照本讲最后一个示例，挑选一个中意的插件，制作一个真正的LRC歌词同步帖子。要求帖子要有背景图片，并能根据需要调整歌词、播放器和全屏按钮的位置和颜色。作业主要目的是尝试使用插件，因此帖子漂亮与否不是重点，重点在驾驭插件，让插件为己所用。</p>

        <p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307">返回目录</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-9-3 19:50

{:4_190:}

花飞飞 发表于 2024-9-3 20:19

马黑黑 发表于 2024-9-3 18:15


{:4_174:}

花飞飞 发表于 2024-9-3 20:26


<style>
#mhh {
    width: 600px;
    height: 200px;
    font-size: 2rem;
    text-shadow: 1px 1px 2px gray;
    background: lightblue;
    border: 2px solid gray;
    padding: 10px;
}
#mhh:hover { color:red; background : green; }
</style>
<div id="mhh">移入时前景红，背景绿；<br>移出时前景黑，背景蓝</div>

马黑黑 发表于 2024-9-3 20:27

花飞飞 发表于 2024-9-3 20:26
#mhh {
    width: 600px;
    height: 200px;


100√

花飞飞 发表于 2024-9-3 20:27

《小白音画教程贴》第二十五讲作业二：
同样使用上述代码结构，请通过纯CSS方式实现作业一JS能实现的功能。
提示：本作业不使用JS，仅需给 CSS 加一个伪类选择器。


<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<div class='mum'>
<cl-cd data-idx="1">&nbsp;</cl-cd>
<cl-cd data-idx="2">&lt;<span class="tDarkRed">style</span>&gt;</cl-cd>
<cl-cd data-idx="3">#mhh {</cl-cd>
<cl-cd data-idx="4">    <span class="tBlue">width:</span> 600px;</cl-cd>
<cl-cd data-idx="5">    <span class="tBlue">height:</span> 200px;</cl-cd>
<cl-cd data-idx="6">    <span class="tBlue">font-size:</span> 2rem;</cl-cd>
<cl-cd data-idx="7">    <span class="tBlue">text-shadow:</span> 1px 1px 2px gray;</cl-cd>
<cl-cd data-idx="8">    <span class="tBlue">background:</span> lightblue;</cl-cd>
<cl-cd data-idx="9">    <span class="tBlue">border:</span> 2px solid gray;</cl-cd>
<cl-cd data-idx="10">    <span class="tBlue">padding:</span> 10px;</cl-cd>
<cl-cd data-idx="11">}</cl-cd>
<cl-cd data-idx="12">#<span class="tBlue">mhh:</span>hover { <span class="tBlue">color:</span>red; background&nbsp;: green; }</cl-cd>
<cl-cd data-idx="13">&lt;<span class="tDarkRed">/style</span>&gt;</cl-cd>
<cl-cd data-idx="14">&lt;<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"mhh"</span>&gt;移入时前景红，背景绿；&lt;<span class="tDarkRed">br</span>&gt;移出时前景黑，背景蓝&lt;<span class="tDarkRed">/div</span>&gt;</cl-cd>
</div>

马黑黑 发表于 2024-9-3 20:28

花飞飞 发表于 2024-9-3 20:27
《小白音画教程贴》第二十五讲作业二：
同样使用上述代码结构，请通过纯CSS方式实现作业一JS能实现的功能 ...

hover伪类选择器还是挺好用的，实现了 toggle 功能

花飞飞 发表于 2024-9-3 20:28

马黑黑 发表于 2024-9-3 20:27
100√

{:4_173:}
老师面批面改啊。。好快。
这个是作业二。。只用css实现的

马黑黑 发表于 2024-9-3 20:29

花飞飞 发表于 2024-9-3 20:28
老师面批面改啊。。好快。
这个是作业二。。只用css实现的

挺好挺好

花飞飞 发表于 2024-9-3 20:29

马黑黑 发表于 2024-9-3 20:28
hover伪类选择器还是挺好用的，实现了 toggle 功能

同样的效果，这个比JS好懂还好用。。

马黑黑 发表于 2024-9-3 20:30

花飞飞 发表于 2024-9-3 20:29
同样的效果，这个比JS好懂还好用。。

JS需要有编程基础，CSS主要是直观地描述

花飞飞 发表于 2024-9-3 20:34

马黑黑 发表于 2024-9-3 20:29
挺好挺好

这个凭记忆整出来的，比一容易一丢丢

花飞飞 发表于 2024-9-3 20:35

马黑黑 发表于 2024-9-3 20:30
JS需要有编程基础，CSS主要是直观地描述

最大的感受就是两天不看就回生。。{:4_173:}
页: 15 16 17 18 19 20 21 22 23 24 [25] 26 27 28 29 30 31 32 33
查看完整版本: 小白音画帖教程（完结）