黑氏快充播放器改进版
本帖最后由 马黑黑 于 2023-4-6 13:23 编辑 <br /><br /><style>#papa { min-height: 300px; poisition: relative; }
.mplayer {
width: 300px;
height: 30px;
border: 1px solid darkgreen;
border-radius: 6px;
filter: drop-shadow(2px 2px 6px black);
cursor: pointer;
position: relative;
--ww: 0; --bg: dargreen; --time: .2s;
}
.mplayer::before, .mplayer::after {
position: absolute;
content: '';
background: var(--bg);
}
.mplayer::before {
width: var(--ww);
height: 100%;
border-radius: 6px;
opacity: .65;
}
.mplayer::after {
width: 12px;
height: 20px;
top: 5px;
right: -12px;
opacity: 1;
animation: flash var(--time) infinite alternate;
}
@keyframes charging {
to { width: 100%; }
}
@keyframes flash { from { background: darkgreen; } to { background: red; } }
</style>
<div id="papa">
<div class="mplayer"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=27571858" autoplay loop></audio>
<script>
(function() {
let mplayer = document.querySelector('.mplayer');
let mState = () => aud.paused
? (mplayer.style.setProperty('--bg', 'gray'), mplayer.style.setProperty('--time','.2s'))
: (mplayer.style.setProperty('--bg', 'darkgreen'), mplayer.style.setProperty('--time','1s'));
mplayer.onclick = (e) => {
let x = e.offsetX, w = mplayer.offsetWidth;
if(x > w) aud.paused ? aud.play() : aud.pause();
if(x < w) aud.currentTime = aud.duration*x/w;
};
mplayer.onmousemove = (e) => {
let x = e.offsetX, w = mplayer.offsetWidth;
if(x > w) mplayer.title = '播放/暂停';
if(x < w) mplayer.title = '调节进度';
};
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
mplayer.style.setProperty('--ww', aud.currentTime*mplayer.offsetWidth/aud.duration + 'px');
});
})();
</script>
本帖最后由 马黑黑 于 2023-4-6 13:22 编辑
代码
<style>
.mplayer {
width: 200px;
height: 30px;
border: 1px solid darkgreen;
border-radius: 6px;
filter: drop-shadow(2px 2px 6px black);
cursor: pointer;
position: relative;
--ww: 0; --bg: dargreen; --time: .2s;
}
.mplayer::before, .mplayer::after {
position: absolute;
content: '';
background: var(--bg);
}
.mplayer::before {
width: var(--ww);
height: 100%;
border-radius: 6px;
opacity: .65;
}
.mplayer::after {
width: 12px;
height: 20px;
top: 5px;
right: -12px;
opacity: 1;
animation: flash var(--time) infinite alternate;
}
@keyframes charging { to { width: 100%; } }
@keyframes flash { from { background: darkgreen; } to { background: red; } }
</style>
<div class="mplayer"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=27571858" autoplay loop></audio>
<script>
let mplayer = document.querySelector('.mplayer');
let mState = () => aud.paused
? (mplayer.style.setProperty('--bg', 'gray'), mplayer.style.setProperty('--time','.2s'))
: (mplayer.style.setProperty('--bg', 'darkgreen'), mplayer.style.setProperty('--time','1s'));
mplayer.onclick = (e) => {
let x = e.offsetX, w = mplayer.offsetWidth;
if(x > w) aud.paused ? aud.play() : aud.pause();
if(x < w) aud.currentTime = aud.duration*x/w;
};
mplayer.onmousemove = (e) => {
let x = e.offsetX, w = mplayer.offsetWidth;
if(x > w) mplayer.title = '播放/暂停';
if(x < w) mplayer.title = '调节进度';
};
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
mplayer.style.setProperty('--ww', aud.currentTime*mplayer.offsetWidth/aud.duration + 'px');
});
</script>
改进内容：
一、电池正极端（右边）播放时以慢闪烁方式、暂停时以快闪烁示意其可点击行为；
二、鼠标指针滑过电池，有操作提示语弹出，指示不同区域点击动作的含义。 这个好，不但有了闪动做提示，还增加了文字提示，黑黑真细心{:4_199:} 看到黑黑多加了一个播放暂停按钮，还调整了播放和暂停时闪动的不同速度，赶紧跟在后面学习{:4_199:} 点击电池的正极，还可以控制“停止”或“进行”啊！ 按你这个，我套用一下，也改好了{:4_173:} 红影 发表于 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
代码玩的真厉害了。
一般般过得去 不提示还以是一只电子香烟呢{:4_173:} 樵歌 发表于 2023-4-6 21:06
不提示还以是一只电子香烟呢
犯瘾了？ 马黑黑 发表于 2023-4-6 17:41
一般现有设想（设计），然后再去完成，这是基本流程。
完成过程碰上困难，就去找找文档。
我不找文档，只找黑黑老大就行了{:4_173:} 马黑黑 发表于 2023-4-6 17:45
HTML页面里，元素都是可以有 title 的，document 内的元素的 title 指鼠标滑过弹出的提示语：
测试
黑黑厉害，张口就来，如数家珍{:4_199:} 马黑黑 发表于 2023-4-6 17:45
还不错的吧
是啊，这就不会找不到暂停键了{:4_173:} 红影 发表于 2023-4-6 21:25
是啊，这就不会找不到暂停键了
找不着北挺烦人{:5_106:}