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

红影 发表于 2024-8-9 21:53

<style>
#hy1 { position: relative;
        margin: auto;
        width: 800px;
        height: 500px;
        overflow: hidden;
        filter: hue-rotate(0deg);
}
#vid1 { position: absolute;
        width: 100%;
        height: 110%;
        object-fit: cover;
}
.tt11 { position: absolute; font: normal 22px/24px sans-serif;
        top: 20px;
        left: 40px;
        color: blue;
}       
.tt12 { position: absolute;
        top: 60px;
        left: 80px;
        color: transparent;
}               
</style>

<div id="hy1">
<video id="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/217c73e80652e10cbf5b9c830acf3a0e_preview.mp4" autoplay loop muted></video>
<p class="tt11"><output id="yy1">filter: hue-rotate(0deg);</output></p>
<p class="tt12"><input id="hh1" type="range" min="0" max="360" value="0" /></p></div>

<script>
hh1.oninput = () => {
        yy1.value = 'filter: hue-rotate(' + hh1.value + 'deg);';
        vid1.style.filter = 'hue-rotate(' + hh1.value + 'deg)';
};
</script>

红影 发表于 2024-8-9 21:53

改了，黑黑再看看{:4_187:}

马黑黑 发表于 2024-8-9 22:04

红影 发表于 2024-8-9 21:53
改了，黑黑再看看

改后效果不变。但要知道原理，同时注意审题。

马黑黑 发表于 2024-8-9 22:06

红影 发表于 2024-8-9 21:53
#hy1 { position: relative;
        margin: auto;
        width: 800px;


初始作业使用父元素的色相改变去影响视频的色相，更改后直接改变视频色相。两者效果一样，后者才符合题意

100√

马黑黑 发表于 2024-8-9 22:08

作业笑话：

我妈妈是一个40来岁的中年妇女。

老师批：
我妈妈是一个40来岁的中年妇女。【多余无用】

学生改：

我妈妈是一个多余无用的中年妇女。

红影 发表于 2024-8-9 22:36

马黑黑 发表于 2024-8-9 22:04
改后效果不变。但要知道原理，同时注意审题。

是的，没仔细审题，是我的疏忽。惭愧{:4_173:}

红影 发表于 2024-8-9 22:38

马黑黑 发表于 2024-8-9 22:08
作业笑话：

我妈妈是一个40来岁的中年妇女。


哈哈，老师的意思是“40多岁”“中年”是重复的，多余的字句可以去掉，结果学生理解错了，直接替换了{:4_173:}

马黑黑 发表于 2024-8-9 22:40

红影 发表于 2024-8-9 22:36
是的，没仔细审题，是我的疏忽。惭愧

作业的意图是：filter滤镜可以作用于视频。

作业过程的曲折其实也是好事，至少从中知晓，父元素的色相变化具备继承性，子元素会跟着改变

马黑黑 发表于 2024-8-9 22:40

红影 发表于 2024-8-9 22:38
哈哈，老师的意思是“40多岁”“中年”是重复的，多余的字句可以去掉，结果学生理解错了，直接替换了{:4_ ...
也挺符合现实的{:4_170:}

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

<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>和CSS相比，JS是一门高级编程语言，它是完备的、独立的，其代码能直接运行在浏览器和其他相关应用中，无需额外的程序库支持，无需编译。JS是做交互音画帖必须的代码模块，例如音频、视频、CSS关键帧动画乃至文本输出的智能管控，必须由JS来操纵才能完美实现。</p>
        <p>JS没有我们想象的那么难，也没有我们想象的那么容易。入门，有人只需要不到一个钟的时间，而有人穷其一生对之探索还自认为自己尚处在初级阶段。然弱水三千我只取一瓢饮，用我用到的、要用的，仅此而已，却也其乐无穷。一切围绕做帖，所以我们不会分门别类地去逐一学习专业的JS，而是由浅入深、以点带面地去触碰一下我们绕不开的东东。本节，我们就先从JS<span class="textRed">变量</span>开始。</p>
        <p>变量大概是指和代数一样性质的东东，就像x、y、z常分别用来代表一些数一样，有些东东可能不确定或在程序运行时会动态改变，我们就用xyz一样的东东暂时指代它——JS变量就是如此，用自定义命名来代表什么。变量需要声明，一般用 <span class="textRed">var</span> 做声明关键字，还有 <span class="textRed">let</span> 和 <span class="textRed">const</span>，这两个有点讲究，我们先不管，暂且用 var 关键字吧。下面我们试着声明几个自己定义名称的变量：</p>

<div class="hE"><pre id="pre1">
&lt;!-- HTML代码 ：设置一个元素输出JS执行的结果 --&gt;
&lt;div id="jbox1"&gt;JS运行结果：&lt;/div&gt;

&lt;!-- JS代码 ：声明变量并运行计算 --&gt;
&lt;script&gt;
var a = 12; // 声明变量 a 变量并给它赋值 12
var b = 36; // 声明变量 a 变量并给它赋值 36
//上面的两个声明像下面那样写在一行，中间用小角逗号隔开
//var a = 12, b = 36;
var c =a + b; // 声明 c 变量并令其等于 a + b
jbox1.innerText += c; // 在指定元素输出变量 c 的值
&lt;/script&gt;
</pre></div>

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

        <p>JS代码解释：第6、7行性质一样，分别声明了两个变量 a 和 b，并用等号分别给它们赋值，每一行结束加上小角分号 <mark> ; </mark>表示该句结束，这是JS结束一句代码和其他相关模块的符号。第10行声明一个变量 c，也给它赋值，它的值不是直接赋值，而是用前面两个变量相加。第11行，我们在 id= "jbox1" 的HTML元素内输出变量 c 的值，其中 innerText 是元素的纯文本，JS内置的一个基于 div 等元素属性之一，类似的还有 innerHTML（内部的HTML代码）、textContent（文本内容）。</p>
        <p>上面的示例其实有4个变量：a、b、c 是我们声明的变量，前两个变量我们直接给它们赋值，都是数字值，所以这两个变量叫<span class="textRed">数值型变量</span>；第3个变量是 c，它等于变量 a 和 b 之和，所以c也是数值型变量。这三个变量是显性声明的，还有一个变量我们没有声明，直接使用，它是 <mark>jbox1</mark>，它指向 <mark>id="jbox1"</mark> 的 div 元素（看第2行代码）。我们之前说过，web页中的元素 id 是唯一的，就像人的身份证号一样，所以我们无需为之声明操作标识变量，JS通过 id 识别并操作元素，所以说 jbox1 这里是作为 div 元素的 id 也是一个变量，属于基于元素的<span class="textRed">对象变量</span>。第8行代码的意思是，jbox1 这个元素的文本内容在其自身基础上加上 c 变量的值，组合赋值运算符号 <mark>+=</mark> 就是这个意思，更具体说是，左边的值等于左边的值再加上右边的值。</p>

        <p>变量类型做帖子可能会经常用到的还有字符类型，字符变量赋值的时候要用小角单引号或双引号包裹起来以表明其字符类型身份。字符变量可以使用加号<mark> + </mark>运算符进行运算，但并不是数值运算，而是字符拼接运算，但和上面的计算运算性质不同。试看一下示例：</p>
       
<div class="hE"><pre id="pre2">
&lt;div id="jbox2"&gt;JS运行结果：&lt;/div&gt;

&lt;script&gt;
var s1 = '12'; //引号表示12是字符值，s1因此是字符变量，下同
var s2 = '36';
var s3 =s1 + s2;
jbox2.innerText += s3;
&lt;/script&gt;
</pre></div>

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

        <p>JS是弱变量类型语言，例如，字符变量和数值变量也可以用<mark> + </mark>运算符进行拼接，拼接出来的新变量类型是字符类型，也可以通过特殊处理让它变成数值类型。看例子：</p>

<div class="hE"><pre id="pre3">
&lt;div id="jbox3"&gt;JS运行结果：&lt;/div&gt;

&lt;script&gt;
var a1 = 12;
var a2 = '36';
var a3 =a1 + a2;
// 强制数值类型使用下面的语句(但它的能力有限，仅能处理 数字+字符 的格式字符)
// var a3 =a1 + parseInt(a2);
jbox3.innerText += a3;
&lt;/script&gt;
</pre></div>

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

        <p>还有数组变量是帖子经常会用到的一个变量类型。数组是数据的集合，一系列的数据以数组的形式存储在一个变量中以方便后续操作的调取。数组里的每一个数据叫数组元素，以下例子了展示数组结构：</p>

<div class="hE"><pre id="pre4">
&lt;div id="jbox4"&gt;JS运行结果：&lt;/div&gt;

&lt;script&gt;
var ar1 = ; // ar1 数组变量有 5 个数组元素，所有数组元素都是数值型
var ar2 = ['张三', '李四', '王五']; //ar2 数组变量有 3 个数组元素，所有数组元素都是字符型
var ar3 = ; //ar3 数组变量有 4 个数组元素，数组元素是数值和字符混合在一起
//下面输出结果 ：三个数组分别取出对应数组的第一、二、三个元素
//读取数组的数据用 数组变量 方法， 表示数组的下标，下标从 0 开始，下标 0 表示数组的第一个数据
jbox4.innerText += ar1 + ar2 + ar3;
&lt;/script&gt;
</pre></div>

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

        <p>以上的数组变量例子，经常在帖子中用来存储一些元素的数据和lrc歌词等，这样帖子可以在运行过程中动态地使用相关数据。数组还可以用来储存元素对象，比方说一大堆的按钮或粒子我们要对它们进行控制，我们就需要获得它们的操作句柄，即识别它们的标识。以下例子，就像使用元素的id一样，我们用另外的方式获取元素的操作标识，然后存入所声明的数组中：</p>

<div class="hE"><pre>
/* JS代码 ：常用获取诸多元素操作标识的方法 */

//① 获取文档中所有的 button 标签并存入数组变量 buttons 中
var buttons = document.getElementsByTagName('button');

//② 获取 id="mydiv" 标签里所有的 button 标签并存入数组变量 btns 中
var btns = mydiv.getElementsByTagName('button');

//③ 获取文档中所有 class="mypic" 的标签并存入数组变量 elems 中
var elems = document.querySelectorAll('.mypic');

//④ 获取 id="mydiv" 标签里所有的 p 标签并存入数组变量 els 中
var els = mydiv.querySelectorAll('p');
</pre></div>

        <p>上例，变量名 buttons、btns 等是自定义的命名，等号后面信息量很庞大：document 是JS内置的DOM即文档的名称，指基于整个文档，mydiv 是自命名的某个元素的id号，基于元素；getElementsByTagName() 和 querySelectorAll() 都是JS内置的获取元素标识的方法，前者通过标签名称、后者通过 class 名称拿到相应元素操作标识，得到的标识与id等效。这些，都是做音画帖必备的技能与方法。</p>
        <p>数组的更多知识点如果有必要我们在后续讲义中会穿插介绍，这里只需掌握上面例子演示的数组的结构与简单的读取数组元素值的方法即可。同样的，JS变量还有其他的类型，这里点到为止，先学习可能会经常用到的。</p>

        <p>本讲主要介绍JS变量，我们学习了四种类型的变量，分别是<span class="textRed">数值型变量</span>、<span class="textRed">字符型变量</span>、<span class="textRed">数组变量</span>和基于HTML元素id的<span class="textRed">对象变量</span>。JS变量是弱类型变量，通过赋值的方式表明其变量类型，变量类型在程序运行中可能会发生改变。</p>
        <p>作业：设计四个变量，变量一、二是字符型，分别赋值“今年”、“岁”，变量三是数值型，变量四是人名数组，请分别给它们赋值。然后从数组中读取任意一个数组元素，并和前面的三个变量值进行拼接，得出的结果预期是“某某今年几岁”。请将结果输出到一个自定义id的元素中。</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) => {
        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-10 08:49

红影 发表于 2024-8-9 21:53
#hy1 { position: relative;
        margin: auto;
        width: 800px;


对这个滤镜最不感冒， 特别是应用在人物的正面青面獠牙特别恐怖。

红影 发表于 2024-8-10 10:10

马黑黑 发表于 2024-8-9 22:40
作业的意图是：filter滤镜可以作用于视频。

作业过程的曲折其实也是好事，至少从中知晓，父元素的色相 ...

“父元素的色相变化具备继承性，子元素会跟着改变”
嗯嗯，得到这个收获也不错{:4_187:}

红影 发表于 2024-8-10 10:13

马黑黑 发表于 2024-8-9 22:40
也挺符合现实的

不一定，40多岁正是年富力强的时候，而且工作经验也足够了，混得好的人在单位基本都是挑大梁的时候了。

红影 发表于 2024-8-10 10:19

起个网名好难 发表于 2024-8-10 08:49
对这个滤镜最不感冒， 特别是应用在人物的正面青面獠牙特别恐怖。

是的，我也感觉到了，所以使用的背景很关键，用得好效果也很不错呢{:4_187:}

马黑黑 发表于 2024-8-10 10:37

红影 发表于 2024-8-10 10:13
不一定，40多岁正是年富力强的时候，而且工作经验也足够了，混得好的人在单位基本都是挑大梁的时候了。

运动员，程序员等过了35没人要了

红影 发表于 2024-8-10 11:04

“常用获取诸多元素操作标识的方法”

前面的还好，就到这里，一串串的字母，看着头晕{:4_173:}

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

获取标签并存入数组变量，用document.getElementsByTagName（）
获取某标签里的标签存入数组，用 某标签.getElementsByTagName（）
获取文档中所有 class="某某" 的标签存入数组，用 document.querySelectorAll('.某某')
获取 id="mydiv" 标签里所有的 p 标签存入数组，用 mydiv.querySelectorAll('p')


真够晕的{:4_173:}

红影 发表于 2024-8-10 11:48

<div id="hy4">作业试验结果：</div>

<script>
var yy1 = ['今年'];
var yy2 = ['岁'];
var yy3 = ;
var yy4 = ['张三', '李四', '王五'];
hy4.innerText += yy4 + yy1 + yy3 + yy2;
</script>

红影 发表于 2024-8-10 11:49

红影 发表于 2024-8-10 11:48
作业试验结果：




套用代码直接出现结果了，怎么没有那个点击出现的按钮啊{:4_173:}

红影 发表于 2024-8-10 11:50

作业做完了，不知道对不对{:4_173:}

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