马黑黑 发表于 2024-1-31 21:03

《记忆》背景闪烁替换之定时器方法

<p>效果：</p>
<p><br></p>

<style>
#papa {
        margin: auto;
        width: 600px;
        height: 630px;
        background: radial-gradient(circle, transparent, rgba(0,200,10,var(--opa))), url('https://638183.freep.cn/638183/t23/3/ts1.jpg') no-repeat center/cover;
        box-shadow: 3px 3px 8px gray;
        --opa: .6;
}
</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=477964" autoplay loop></audio>

<script>

setInterval (function() { if(!aud.paused) papa.style.setProperty('--opa', Math.random()); },100);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>

醉美水芙蓉 发表于 2024-1-31 21:06

马黑黑 发表于 2024-1-31 21:06

本帖最后由 马黑黑 于 2024-1-31 21:09 编辑

代码<style>
#papa {
      margin: auto;
      width: 600px;
      height: 630px;
      background: radial-gradient(circle, transparent, rgba(0,200,10,var(--opa))), url('https://638183.freep.cn/638183/t23/3/ts1.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 8px gray;
      --opa: .6;
}
</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=477964" autoplay loop></audio>

<script>

setInterval (function() { if(!aud.paused) papa.style.setProperty('--opa', Math.random()); },100);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>解释：

记忆 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! (huachaowang.com) 帖子，通过 audio 控件的 timeupdate 监听事件驱动背景闪烁效果，但如果使用了播放器插件，该监听事件不能再使用，所以需要一个替换方案，最简单的就是 setInterval 定时器，让它一直驱动背景闪烁，只要音频不是暂停中。

setInterval 定时器的时间频率可以调整，代码中的第 17 行，毫秒时间单位， 1000 表示1秒，例中使用 100。

马黑黑 发表于 2024-1-31 21:06

醉美水芙蓉 发表于 2024-1-31 21:06
黑黑老师速度可以减慢吗？

定时器都有间隔时间，3楼代码中的第 17 行

醉美水芙蓉 发表于 2024-1-31 21:17

马黑黑 发表于 2024-1-31 22:13

醉美水芙蓉 发表于 2024-1-31 21:17
我占用了老师的位置！

没关系

红影 发表于 2024-1-31 22:23

马黑黑 发表于 2024-1-31 21:06
代码解释：

记忆 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! (huachaowang.com) 帖子，通过 audio 控 ...

今天还回复到《记忆》里又一个背景闪烁的方式，又换了一种定时器啊。
这个例子的背景闪烁真美{:4_187:}

红影 发表于 2024-1-31 22:25

这个可以设置闪烁频率，更好了{:4_199:}

马黑黑 发表于 2024-1-31 22:32

红影 发表于 2024-1-31 22:23
今天还回复到《记忆》里又一个背景闪烁的方式，又换了一种定时器啊。
这个例子的背景闪烁真美

这里说明清楚了的：若使用播放器插件做帖子，音频控件的 timeupdate 不能再使用，所以才提供这个方案。

马黑黑 发表于 2024-1-31 22:33

红影 发表于 2024-1-31 22:25
这个可以设置闪烁频率，更好了
定时器有运行频率参数

红影 发表于 2024-1-31 22:50

马黑黑 发表于 2024-1-31 22:32
这里说明清楚了的：若使用播放器插件做帖子，音频控件的 timeupdate 不能再使用，所以才提供这个方案。

这个方案好，通常肯定会想用播放器的，所以这个更有用{:4_187:}

红影 发表于 2024-1-31 22:50

马黑黑 发表于 2024-1-31 22:33
定时器有运行频率参数

嗯嗯，知道的，是千分之一秒的单位。

马黑黑 发表于 2024-1-31 23:54

红影 发表于 2024-1-31 22:50
这个方案好，通常肯定会想用播放器的，所以这个更有用

{:4_181:}

马黑黑 发表于 2024-1-31 23:54

红影 发表于 2024-1-31 22:50
嗯嗯，知道的，是千分之一秒的单位。

对，1000毫秒等于一秒

红影 发表于 2024-2-1 21:25

马黑黑 发表于 2024-1-31 23:54


在黑黑的帖子里学习不冲突的技巧{:4_187:}

红影 发表于 2024-2-1 21:26

马黑黑 发表于 2024-1-31 23:54
对，1000毫秒等于一秒

以毫秒为单位，真够精细的。

马黑黑 发表于 2024-2-1 21:30

红影 发表于 2024-2-1 21:26
以毫秒为单位，真够精细的。

定时器是这样设定的

马黑黑 发表于 2024-2-1 21:32

红影 发表于 2024-2-1 21:25
在黑黑的帖子里学习不冲突的技巧

冲突的，轻一些的后果，是抵消，重一点的，不能运行

红影 发表于 2024-2-1 23:17

马黑黑 发表于 2024-2-1 21:30
定时器是这样设定的

其实人的眼睛没那么高的分辨能力呢。

红影 发表于 2024-2-1 23:17

马黑黑 发表于 2024-2-1 21:32
冲突的，轻一些的后果，是抵消，重一点的，不能运行

嗯嗯，冲突是很严重的事。
页: [1] 2 3 4
查看完整版本: 《记忆》背景闪烁替换之定时器方法