JS代码点滴

花简静

凡哥 发表于 2024-5-23 20:06
本帖最后由 凡哥 于 2024-5-23 20:07 编辑 2024年5月23日 星期四
关于函数：
函数，通俗讲，指功能的封装 ...

老师开课了，函数第一课，小板凳搬过来了。

凡哥

花简静 发表于 2024-5-23 21:52
老师开课了，函数第一课，小板凳搬过来了。

这个应该不难吧

花简静

凡哥 发表于 2024-5-23 22:17
这个应该不难吧

这是万里长征第一步，基础课

凡哥

花简静 发表于 2024-5-23 22:29
这是万里长征第一步，基础课

会1+1了，就会1+2，或者应该反过来说

凡哥

2024年5月24日 星期五

关于帖子中的联动函数 mState

音画帖以 audio 控件的播放与暂停作为依据对帖子的其他元素进行科学有效的联动控制，比如帖子中按钮的CSS关键帧动画、背景视频的播放暂停等等。假设帖子容器元素标签 id="papa"、播放器控件 audio 标签 id="aud"，我们来讲讲 mState() 函数的编写，看示例：

var mState = () => {
     //控制 关键帧动画，要求 animation 属性有 var(--state) 参数
    papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    //控制视频 : 与音频的播放暂停同步，这里假设 video 标签 id="vid"
    aud.paused ? vid.pause() : vid.play();
};

以上 mState() 函数，控制了CSS变量 --state 的值和 视频的播放暂停，以达到关键帧动画、背景视频与音频同步联动的效果。这个函数，至少需要绑定到 audio 标签的两个事件之上：

aud.onplaying = aud.onpause = () => mState();

音频控件 playing 和 pause 事件，就是播放和暂停事件，这两个事件一旦触发都运行 mState() 函数，而函数又依据音频是否暂停来控制 --state 的值和 vid 的播放或暂停，从而实现了同步联动目的。
音频的播放/暂停的控制，则通过按钮的点击事件来完成，假设按钮的 id="player"，则：

player.onclick = () => aud.paused ? aud.play() : aud.pause();

click 事件就是单击事件，该事件被触发时，假如 audio 标签处于暂停中，则令其播放，反之令其暂停。

以上这些，有必要集中一下（注意HTML代码中 id 的对应关系）：

<script>
    var mState = () => {
        papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.paused ? vid.pause() : vid.play();
    };
    aud.onplaying = aud.onpause = () => mState();
    player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

mState() 函数可以扩展，比如我们希望多个按钮都可以控制音频、我们在帖子中使用了多个背景视频并且也想能够联动控制，这是可以实现的，明天继续。

花简静

凡哥 发表于 2024-5-23 22:34
会1+1了，就会1+2，或者应该反过来说

这怎么反~~还是1+1先会好了。。

花简静

凡哥 发表于 2024-5-24 20:20
2024年5月24日 星期五

关于帖子中的联动函数 mState

这个专门拎出来讲了，平时最常用的就是控制。。
随意加个视频，歌词等都会碰到控制的问题。
这贴必须要好好学习一下。

凡哥

花简静 发表于 2024-5-24 21:32
这个专门拎出来讲了，平时最常用的就是控制。。
随意加个视频，歌词等都会碰到控制的问题。
这贴必须要好 ...

徒手写的代码，未经测试，如有问题请反馈

凡哥

花简静 发表于 2024-5-24 21:30
这怎么反~~还是1+1先会好了。。

1+1的证明至今未能实现，韦神也不行。陈景润先生先证明了 1+2

花简静

凡哥 发表于 2024-5-24 21:51
徒手写的代码，未经测试，如有问题请反馈

敲代码的样子很帅。。代码也帅