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

马黑黑

效果：

马黑黑

代码

1. <style>
   
2. #papa {
   
3.         margin: auto;
   
4.         width: 600px;
   
5.         height: 630px;
   
6.         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;
   
7.         box-shadow: 3px 3px 8px gray;
   
8.         --opa: .6;
   
9. }
   
10. </style>
    
11. 
    
12. <div id="papa"></div>
    
13. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=477964" autoplay loop></audio>
    
14. 
    
15. <script>
    
16. 
    
17. setInterval (function() { if(!aud.paused) papa.style.setProperty('--opa', Math.random()); },100);
    
18. papa.onclick = () => aud.paused ? aud.play() : aud.pause();
    
19. 
    
20. </script>

复制代码

解释：

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

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

马黑黑

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

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

马黑黑

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

没关系

红影

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

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

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

红影

这个可以设置闪烁频率，更好了

马黑黑

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

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

马黑黑

红影 发表于 2024-1-31 22:25
这个可以设置闪烁频率，更好了

定时器有运行频率参数

红影

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

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

红影

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

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

马黑黑

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

马黑黑

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

对，1000毫秒等于一秒

红影

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

在黑黑的帖子里学习不冲突的技巧

红影

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

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

马黑黑

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

定时器是这样设定的

马黑黑

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

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

红影

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

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

红影

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

嗯嗯，冲突是很严重的事。