|
|

楼主 |
发表于 2022-11-17 07:09
|
显示全部楼层
代码
- <style>
- #papa {
- margin: 0 0 0 calc(50% - 721px);
- width: 1280px;
- height: 800px;
- background: lightblue url('https://638183.freep.cn/638183/t22/webp/ieby.webp') no-repeat;
- box-shadow: 3px 3px 20px #000;
- display: grid;
- place-items: center;
- user-select: none;
- position: relative;
- z-index: 1;
- }
- #mplayer {
- position: absolute;
- display: grid;
- grid-template-areas:
- 'cur btnplay dur'
- 'prog prog prog';
- gap: 0 4px;
- place-items: end center;
- font-size: 14px;
- bottom: 20px;
- }
- #cur { grid-area: cur; color: purple; }
- #dur { grid-area: dur; color: purple; }
- #btnplay {
- grid-area: btnplay;
- display: grid;
- grid-auto-flow: column;
- place-items: end center;
- gap: 0 4px;
- height: 60px;
- cursor: pointer;
- }
- #btnplay > span {
- background: red;
- width: 2px;
- transition: .3s;
- }
- #prog {
- grid-area: prog;
- width: 300px;
- height: 16px;
- opacity: .65;
- cursor: pointer;
- position: relative;
- }
- </style>
- <div id="papa">
- <div id="mplayer">
- <div id="cur">00:00</div>
- <div id="btnplay"></div>
- <div id="dur">00:00</div>
- <progress id="prog" max="100"></progress>
- </div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1453325911.mp3" loop autoplay></audio>
- <img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 60px; top: 135px; left: 386px;" />
- <img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 100px; top: 250px; left: 620px; transform: rotate(-60deg);" />
- <img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 150px; top: 160px; right: 30px; transform: rotate(-35deg);" />
- </div>
- <script>
- (function() {
- (function() {
- for(j=0; j<20; j++) {
- let pinpu = document.createElement('span');
- pinpu.className = 'pinpu';
- pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;
- btnplay.appendChild(pinpu);
- }
- })();
- btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
- prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
- aud.addEventListener('timeupdate', () => {
- prog.value = aud.currentTime / aud.duration * 100;
- cur.innerText = toMin(aud.currentTime);
- dur.innerText = toMin(aud.duration);
- setPinpu();
- });
- 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;
- };
- let setPinpu = () => {
- let eles = document.querySelectorAll('.pinpu');
- eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);
- };
- })();
- </script>
复制代码
|
|