|
|

楼主 |
发表于 2023-5-11 22:26
|
显示全部楼层
本帖最后由 马黑黑 于 2023-5-11 22:38 编辑
帖子源码
- <style>
- #papa {
- margin: auto;
- width: 900px;
- height: 559px;
- background: tan url('../pic/yujb.jpg');
- box-shadow: 0 0 8px #000;
- display: grid;
- place-items: center;
- position: relative;
- }
- </style>
- <div id="papa">
- <css-doodle id="mplayer">
- :doodle {
- @grid: 2 / 300px 60px;
- position: absolute;
- color: var(--color);
- bottom: 0;
- --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: lightgreen; --state: paused;
- }
- /* 时间信息 : 左 */
- @nth(1) {
- @place: 25% 80%;
- :after { content: var(--ttmsg1); }
- }
- /* 控制器 */
- @nth(2) {
- @size: var(--size);
- @shape: windmill;
- @place: 50% 35%;
- background: var(--color);
- animation: rot 6s infinite linear var(--state);
- }
- /* 时间信息 : 右 */
- @nth(3) {
- @place: 75% 80%;
- :after { content: var(--ttmsg2); }
- }
- /* 进度条 */
- @nth(4) {
- @place: 50% 80%;
- @size: 100% 2px;
- background: #bbb;
- display: grid;
- place-items: center start;
- :before {
- content: '';
- width: var(--prog);
- height: 100%;
- background: var(--color);
- }
- }
- @keyframes rot { to { transform: rotate(1turn); } }
- </css-doodle>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=16964082" autoplay loop></audio>
- </div>
- <script>
- (function() {
- let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
- let script = document.createElement('script');
- script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
- document.head.appendChild(script);
- 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 mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- aud.addEventListener('play', mState, false);
- aud.addEventListener('pause', mState, false);
- aud.addEventListener('timeupdate', () => {
- mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
- mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
- mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
- });
- mplayer.onclick = () => {
- if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
- if(clickIdx === 2) aud.currentTime = progChg;
- }
- mplayer.onmousemove = (e) => {
- let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;
- clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
- mplayer.style.cursor = cursors[clickIdx];
- if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
- }
- })();
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|