黑氏快充播放器改进版

马黑黑

马黑黑

代码

1. <style>
   
2. .mplayer {
   
3.         width: 200px;
   
4.         height: 30px;
   
5.         border: 1px solid darkgreen;
   
6.         border-radius: 6px;
   
7.         filter: drop-shadow(2px 2px 6px black);
   
8.         cursor: pointer;
   
9.         position: relative;
   
10.         --ww: 0; --bg: dargreen; --time: .2s;
    
11. }
    
12. .mplayer::before, .mplayer::after {
    
13.         position: absolute;
    
14.         content: '';
    
15.         background: var(--bg);
    
16. }
    
17. .mplayer::before {
    
18.         width: var(--ww);
    
19.         height: 100%;
    
20.         border-radius: 6px;
    
21.         opacity: .65;
    
22. }
    
23. .mplayer::after {
    
24.         width: 12px;
    
25.         height: 20px;
    
26.         top: 5px;
    
27.         right: -12px;
    
28.         opacity: 1;
    
29.         animation: flash var(--time) infinite alternate;
    
30. }
    
31. @keyframes charging { to { width: 100%; } }
    
32. @keyframes flash { from { background: darkgreen; } to { background: red; } }
    
33. </style>
    
34. 
    
35. <div class="mplayer"></div>
    
36. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27571858" autoplay loop></audio>
    
37. 
    
38. <script>
    
39. let mplayer = document.querySelector('.mplayer');
    
40. let mState = () => aud.paused
    
41.         ? (mplayer.style.setProperty('--bg', 'gray'), mplayer.style.setProperty('--time','.2s'))
    
42.         : (mplayer.style.setProperty('--bg', 'darkgreen'), mplayer.style.setProperty('--time','1s'));
    
43. mplayer.onclick = (e) => {
    
44.         let x = e.offsetX, w = mplayer.offsetWidth;
    
45.         if(x > w) aud.paused ? aud.play() : aud.pause();
    
46.         if(x < w) aud.currentTime = aud.duration*x/w;
    
47. };
    
48. mplayer.onmousemove = (e) => {
    
49.         let x = e.offsetX, w = mplayer.offsetWidth;
    
50.         if(x > w) mplayer.title = '播放/暂停';
    
51.         if(x < w) mplayer.title = '调节进度';
    
52. };
    
53. 
    
54. aud.addEventListener('play', mState, false);
    
55. aud.addEventListener('pause', mState, false);
    
56. aud.addEventListener('timeupdate', () => {
    
57.         mplayer.style.setProperty('--ww', aud.currentTime*mplayer.offsetWidth/aud.duration + 'px');
    
58. });
    
59. 
    
60. </script>

复制代码

马黑黑

改进内容：

一、电池正极端（右边）播放时以慢闪烁方式、暂停时以快闪烁示意其可点击行为；
二、鼠标指针滑过电池，有操作提示语弹出，指示不同区域点击动作的含义。

红影

这个好，不但有了闪动做提示，还增加了文字提示，黑黑真细心

红影

看到黑黑多加了一个播放暂停按钮，还调整了播放和暂停时闪动的不同速度，赶紧跟在后面学习

梦油

点击电池的正极，还可以控制“停止”或“进行”啊！

红影

按你这个，我套用一下，也改好了

马黑黑

红影 发表于 2023-4-6 14:59
按你这个，我套用一下，也改好了

一般现有设想（设计），然后再去完成，这是基本流程。

完成过程碰上困难，就去找找文档。

马黑黑

梦油 发表于 2023-4-6 14:39
点击电池的正极，还可以控制“停止”或“进行”啊！

对

马黑黑

红影 发表于 2023-4-6 14:29
这个好，不但有了闪动做提示，还增加了文字提示，黑黑真细心

HTML页面里，元素都是可以有 title 的，document 内的元素的 title 指鼠标滑过弹出的提示语：

<div id="mydiv" title="花潮论坛提示您：过马路要小心">测试</div>

在JS中，我们可以动态给元素赋予不同的提示语

马黑黑

红影 发表于 2023-4-6 14:37
看到黑黑多加了一个播放暂停按钮，还调整了播放和暂停时闪动的不同速度，赶紧跟在后面学习

还不错的吧

梦油

马黑黑 发表于 2023-4-6 17:41
对

你的设计越来越先进了。

庶民

代码玩的真厉害了。

马黑黑

庶民 发表于 2023-4-6 18:40
代码玩的真厉害了。

一般般过得去

樵歌

不提示还以是一只电子香烟呢

马黑黑

樵歌 发表于 2023-4-6 21:06
不提示还以是一只电子香烟呢

犯瘾了？

红影

马黑黑 发表于 2023-4-6 17:41
一般现有设想（设计），然后再去完成，这是基本流程。

完成过程碰上困难，就去找找文档。

我不找文档，只找黑黑老大就行了

红影

马黑黑 发表于 2023-4-6 17:45
HTML页面里，元素都是可以有 title 的，document 内的元素的 title 指鼠标滑过弹出的提示语：

测试

黑黑厉害，张口就来，如数家珍

红影

马黑黑 发表于 2023-4-6 17:45
还不错的吧

是啊，这就不会找不到暂停键了

马黑黑

红影 发表于 2023-4-6 21:25
是啊，这就不会找不到暂停键了

找不着北挺烦人