夕阳黄昏 发表于 2025-10-12 13:09

玩玩 progress 进度条控制

本帖最后由 夕阳黄昏 于 2025-10-13 19:18 编辑 <br /><br /><style>
#pBlk        {width:500px;height:200px;margin:auto;position:relative;text-align:center;}
#dprg        {width:100%;appearance: none;height:8px; overflow:hidden; border-radius: 4px;position:relative;margin-bottom:16px;margin-top:16px;}
#dprg::-webkit-progress-value        {background:linear-gradient(-45deg, red, yellow, green, purple, blue);}
#dprg::-webkit-progress-bar        {background:linear-gradient(45deg, red, yellow, green, purple, blue);}
#incBlk        {width:12px;height:12px;overflow:hidden;border-radius:50px;background-color:brown;position:absolute; }
#curpos {color: #f00;position: relative; }
#endpos {color: #00f;position: relative;}
#perTxt {width: 100px;height: 6px;font-size: 12px;line-height: 10px;left: 0;position: relative;margin: 2px auto;}
</style>
<div id="pBlk">
        <span id="curpos">00:00</span> / <span id="endpos">00:00</span>
        <div id="perTxt">0%</div>
        <progress id="dprg" value='0' max="100" ></progress>
        <div id="incBlk"></div>
        <button id="ctrlBtn" >播放</button>
</div>
<audio id="aud" src="https://cccimg.com/view.php/aa761e148027a311dfb213e0976bb941.aac" loop ></audio>
<script>
incBlk.style.top = (dprg.offsetTop - (incBlk.offsetHeight - dprg.offsetHeight) / 2) + 'px';
incBlk.style.left = -0.5 * incBlk.clientWidth + 'px';
const pblkWidth = pBlk.offsetWidth
const initIndicatorLeft = incBlk.offsetLeft;
        aud.addEventListener("timeupdate", () => {
                dprg.value = parseFloat((aud.currentTime / aud.duration) * 100);
                perTxt.innerText = (dprg.value.toFixed(2)) + "%"
               
                incBlk.style.left = (aud.currentTime / aud.duration * pblkWidth + initIndicatorLeft) + 'px';
               
                endpos.innerHTML = formatTime(aud.duration)
                curpos.innerHTML = formatTime(aud.currentTime)
        })
//时间       

        const formatTime = (time) => {
                let min = ('' + parseInt(time / 60)).padStart(2,'0');
                let sec = ('' + parseInt(time % 60)).padStart(2,'0');
                return (`${min}:${sec}`);
        };
//
dprg.onclick = (e) =>         {
        let curval = (e.x - pBlk.offsetLeft);
        aud.currentTime = (curval / pblkWidth * dprg.max * aud.duration / 100);
}
ctrlBtn.onclick = () => {
        aud.paused ? (ctrlBtn.innerHTML = '暂停' , aud.play()) : (ctrlBtn.innerHTML = '播放' , aud.pause());
        }
</script>

梦江南 发表于 2025-10-12 14:21

夕阳黄昏 发表于 2025-10-12 14:18
不喝好没劲干活

你也会喝酒啊！

马黑黑 发表于 2025-10-12 13:11

{:4_190:}

夕阳黄昏 发表于 2025-10-12 13:14

马黑黑 发表于 2025-10-12 13:11


{:4_176:}

夕阳黄昏 发表于 2025-10-12 13:15

马黑黑 发表于 2025-10-12 13:11


谢谢鼓励

梦江南 发表于 2025-10-12 14:00

这个彩色进度 蛮好看的。但也是要重刷以后才会走。

马黑黑 发表于 2025-10-12 14:01

夕阳黄昏 发表于 2025-10-12 13:15
谢谢鼓励

{:4_191:}

马黑黑 发表于 2025-10-12 14:02

夕阳黄昏 发表于 2025-10-12 13:14


喝多了{:4_170:}

梦江南 发表于 2025-10-12 14:08

夕阳黄昏 发表于 2025-10-12 13:15
谢谢鼓励

https://cccimg.com/view.php/aa761e148027a311dfb213e0976bb941.aac这个不是MP3呢？

夕阳黄昏 发表于 2025-10-12 14:08

梦江南 发表于 2025-10-12 14:00
这个彩色进度 蛮好看的。但也是要重刷以后才会走。

没设自动播放，点击开始播放

夕阳黄昏 发表于 2025-10-12 14:09

马黑黑 发表于 2025-10-12 14:02
喝多了

不多不多，还没到位{:5_117:}

夕阳黄昏 发表于 2025-10-12 14:12

梦江南 发表于 2025-10-12 14:08
https://cccimg.com/view.php/aa761e148027a311dfb213e0976bb941.aac这个不是MP3呢？

不管了，能播放就行。

马黑黑 发表于 2025-10-12 14:13

夕阳黄昏 发表于 2025-10-12 14:09
不多不多，还没到位

俺就亮浅，待会儿还要做事，点到为止{:4_189:}

夕阳黄昏 发表于 2025-10-12 14:18

马黑黑 发表于 2025-10-12 14:13
俺就亮浅，待会儿还要做事，点到为止

不喝好没劲干活{:5_106:}

梦江南 发表于 2025-10-12 14:19

夕阳黄昏 发表于 2025-10-12 14:08
没设自动播放，点击开始播放

怪不得呢。

夕阳黄昏 发表于 2025-10-12 15:55

梦江南 发表于 2025-10-12 14:21
你也会喝酒啊！

虚拟的

马黑黑 发表于 2025-10-12 17:46

夕阳黄昏 发表于 2025-10-12 14:18
不喝好没劲干活

{:4_206:}

夕阳黄昏 发表于 2025-10-12 18:25

本帖最后由 夕阳黄昏 于 2025-10-12 18:56 编辑

马黑黑 发表于 2025-10-12 17:46

喝好到位、干劲冲天{:5_106:}

马黑黑 发表于 2025-10-12 18:46

夕阳黄昏 发表于 2025-10-12 18:25
喝好到、位干劲冲天

{:4_196:}

红影 发表于 2025-10-13 10:11

这彩色进度条漂亮，而且带数字进度和百分比进度。
欣赏夕阳黄昏好帖{:4_199:}
页: [1] 2
查看完整版本: 玩玩 progress 进度条控制