卡带播放器
本帖最后由 亚伦影音工作室 于 2025-3-27 16:48 编辑 <br /><br /><style>#cndpt{margin: 0px 30px ; opacity:1;
position: relative;width: 540px; height: 320px;cursor: pointer;
background: url(https://pic.imgdb.cn/item/643dbb490d2dde5777df1d3c.gif)no-repeat 155px 150px/40%,url(https://pic.imgdb.cn/item/67503954d0e0a243d4dd6efd.gif)no-repeat center/80%; }
#enopg{
position: relative;width:100%; height:100%;cursor: pointer;
background: url(https://pic.imgdb.cn/item/67567c91d0e0a243d4e0366f.png)no-repeat 155px 150px/40%, url(https://pic.imgdb.cn/item/67557857d0e0a243d4dffca0.png) no-repeat center/80%;
display:none;
}
#tmsg {position: absolute;z-index: 1;
font: 500 14px sans-serif;
color: #aaa;
bottom: 162px;
left:42%;}
#but {width:100%; height:100%;top:0%; left:0%;cursor: pointer;width:100%; height:100%;position: absolute;}
</style>
<div id="cndpt">
<div id="tmsg">正在计时......</div>
<div id="enopg"></div>
<div id="but" onclick="pic()"></div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/b5/0f/de/6615a1eb78f58c680fc5ea73f913e316/audio.mp3" autoplay loop></audio>
<script >
function pic(){
varimgElement= document.getElementById('enopg');
if (imgElement.style.display === 'none' || imgElement.style.display === '') {
imgElement.style.display = 'block';
} else {
imgElement .style.display = 'none';
}
}
aud.addEventListener('timeupdate', () => {
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min+ ':' +sec ;
};
cndpt.onclick = () => aud.paused ?(aud.play()):(aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script >
这个卡带很逼真啊，连四角的小螺丝都有呢{:4_187:} 这个原来也是动图和静图的替换，还加了时间进度指示。
谢谢亚伦老师带来的漂亮播放器{:4_199:}
老古董翻出来了。
页:
[1]