近朱者赤 发表于 2022-9-1 19:19

学习代码2022年9月1日娱乐测试


<style>
#papa { left: -214px; top:24px; width: 1024px; height: 500px; background: gray url('https://638183.freep.cn/638183/Pic/81/dw3.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; position: relative; }

#player { padding: 10px; position: absolute; left: 20px; bottom: 20px; width: fit-content; height: fit-content; display: flex; gap: 10px; flex-direction: column; }
#lrctext { margin: 20px auto;font-family:华文楷体;font-size: 32px;color: #FF0078; -webkit-background-clip: text;filter:drop-shadow(#FFFfff 1px 0 0)drop-shadow(#FFFfff 0 1px 0)drop-shadow(#FFFfff -1px 0 0) drop-shadow(#FFFfff 0 -1px0);
   -webkit-text-fill-color: transparent;
   background-color: red;
   background-image:linear-gradient(50deg, #fff000, #ff0000, #000000, #00f000);
   background-repeat:no-repeat;
   background-position: -800px 0;
   -webkit-animation:loop 3s linear infinite;text-align: center; }
#btnwrap { width: fit-content; height: fit-content; display: flex; gap: 8px; align-items: center; }
#btnmain { width: 32px; height: 32px; display: grid; place-items: center; background: #CCCCCC; border-radius: 50%; cursor: pointer; transition: all 2s; }
#btnmain:hover { background: orange; }
#btnplay {width: 12px; height: 12px; background: #000000; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 13px; border-style: solid; border-width: 0px 4px; border-color: transparent #000000; display: none; }
#prgline { width: 800px; height: 2px; background: #ccc linear-gradient(to right,red,orange,green,red) no-repeat center left; background-size: 1px 2px; cursor: pointer;}
#tmsg { font: normal 16px sans-serif; color: #CCCCCC; user-select: none; text-shadow: 1px 1px 1px #000; transition: 1.5s; }
#tmsg:hover, #lrctext:hover { color: tomato; }
#canv { margin: auto; display: block; position: relative; border: 1px solid; }

.ball { position: absolute; left: -16px; top: 0; width: 16px; height: 16px; border-radius: 23%; background: red; animation: move 30s var(--ss) linear infinite; }



@keyframes move {
      0%, 100% { left: 0; top: 0; }
      25% { left: calc(100% - 16px); top: 0; }
      50% { left: calc(100% - 16px); top: calc(100% - 16px); }
      75% { left: 0; top: calc(100% - 16px); }

@-webkit-keyframes loop{
   0%{background-position: -800px 0;}
   100%{background-position: -0 0;}

}
</style>

<div id="papa">
        <div id="player">
                <div id="lrctext">lrc歌词</div>
                <div id="btnwrap">
                        <span id="btnmain"><span id="btnplay"></span>
                           <span id="btnpause"></span></span>
                        <span id="prgline"></span>
                           <span id="prog"></span>
                            <span id="tmsg">00:00 | 00:00</span>
                </div>
        </div>
</div>

<script>
let lrcAr = [
        ['0.00','张怡诺 - 轻松行走人世间 (DJ月之歌版)'],
        ['3.05','作词：轻云望月'],
        ['8.07','作曲：轻云望月'],
        ['11.10','编曲：DJ月之歌音乐室'],
        ['13.03','混音：贾晓龙'],
        ['15.04','出品：月之歌文化传媒'],
        ['17.08','LRC编辑：醉美水芙蓉 '],
        ['19.02','开开心心过好每一天'],
        ['23.02','让微笑时刻挂在嘴边'],
        ['27.06','该吃就吃 该穿就穿'],
        ['31.07','快乐心态能益寿延年'],
        ['35.09','轻轻松松行走人世间'],
        ['40.02','把那些烦恼都抛一边'],
        ['44.04','想忙就忙 想闲就闲'],
        ['48.05','人越简单越好运不断'],
        ['52.09','幸福不是挣多少金钱'],
        ['56.09','身体健康才是最关键'],
        ['61.02','累了就请把脚步放慢'],
        ['65.03','别让自己有太多负担'],
        ['69.06','幸福不是有多少存款'],
        ['73.09','身心愉悦才是最圆满'],
        ['78.01','毕竟时光真的很短暂'],
        ['82.03','好好珍惜每一寸时间'],
        ['103.04','轻轻松松行走人世间'],
        ['107.05','把那些烦恼都抛一边'],
        ['111.07','想忙就忙 想闲就闲'],
        ['115.09','人越简单越好运不断'],
        ['120.01','幸福不是挣多少金钱'],
        ['124.03','身体健康才是最关键'],
        ['128.06','累了就请把脚步放慢'],
        ['132.07','别让自己有太多负担'],
        ['137.00','幸福不是有多少存款'],
        ['141.03','身心愉悦才是最圆满'],
        ['145.04','毕竟时光真的很短暂'],
        ['149.05','好好珍惜每一寸时间'],
        ['153.07','幸福不是挣多少金钱'],
        ['158.00','身体健康才是最关键'],
        ['162.03','累了就请把脚步放慢'],
        ['166.05','别让自己有太多负担'],
        ['170.07','幸福不是有多少存款'],
        ['174.09','身心愉悦才是最圆满'],
        ['179.01','毕竟时光真的很短暂'],
        ['183.03','好好珍惜每一寸时间'],
        ['187.05','好好珍惜每一寸时间'],
        ['192.03','谢谢欣赏！']
];
let aud = new Audio();
aud.src = 'https://www.qqmc.com/up/kwlink.php?id=231681019&.mp3';
aud.autoplay = true;
aud.loop = true;

Array.from({length: 60}).forEach((item,key) => {
      item = document.createElement('span');
      item.className = 'ball';
      item.style.cssText = `--ss: ${key * 0.5}s; background: #${Math.random().toString(16).substr(-6)};`;
      papa.appendChild(item);
});


btnmain.onclick = () => aud.paused ? aud.play() : aud.pause();

prgline.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prgline.offsetWidth;

btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', ()=> btnstate());
aud.addEventListener('pause', ()=> btnstate());


aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
        prgline.style.backgroundSize = prgline.offsetWidth * aud.currentTime / aud.duration + 'px 4px';
        tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
        for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
        }
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');

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;
}
</script>

红影 发表于 2022-9-1 19:45

做成方形的珠子也很别致呢，漂亮。欣赏朱朱好帖{:4_199:}

加林森 发表于 2022-9-1 20:23

挺好玩的。好！{:4_199:}

梦缘 发表于 2022-9-1 20:36

旋转的珠子，做的好看，多谢老师的精彩分享！{:4_178:}

醉美水芙蓉 发表于 2022-9-1 21:17

页: [1]
查看完整版本: 学习代码2022年9月1日娱乐测试