千羽 发表于 2022-12-17 21:56

完成黑黑老师作业：《奇观》

<style>
#papa { margin: 0 0 0 calc(50% - 622px); width: 1080px; height: 699px; background: gray url('https://pic.imgdb.cn/item/639dc721b1fccdcd36b2b50e.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
#mplayer { position: absolute; top: 20px; cursor: pointer; }
#bb { position: absolute; left: 260px; width: 40px; height: 60px; background: linear-gradient(15deg,tan,red); border-radius: 50%; transform: skew(5deg); cursor: pointer; opacity: .85; transition: .25s; }
</style>

<div id="papa">
        <canvas id="mplayer"></canvas>
        <span id="bb" title="换个地址" onclick="javascript: aud.src='https://www.kumeiwp.com/sub/filestores/2022/12/15/eff8b4893d9868dd433107725.mp3'"></span>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=32785482.mp3" autoplay></audio>
</div>

<script>
(function() {
        ypData = ;

        let total = 50,idx = 0;
        let ctx = mplayer.getContext('2d');
        let w = mplayer.width = 800, h = mplayer.height = 100;
        let slice = w / ypData.length, vmax = Math.max.apply(null, ypData);
        let colors = ['red','pink'];
        aud.loop = false;

        mplayer.onmousemove = (e) => { mplayer.title = e.offsetY < h * 0.8 ? toMin(aud.duration * e.offsetX / w) : '暂停/播放'; };

        mplayer.onclick = (e) => {
                if(e.offsetY < h * 0.8) {
                        let ac = aud.duration * e.offsetX / w;
                        idx = Math.round(ypData.length * ac / aud.duration);
                        aud.currentTime = ac;
                } else {
                        aud.paused ? aud.play() : aud.pause();
                }
        }

        aud.addEventListener('ended', () => { idx = 0; aud.play(); });

        aud.addEventListener('timeupdate', () => {
                idx = Math.round(ypData.length * aud.currentTime / aud.duration)
                if(idx > ypData.length - 1) idx = ypData.length - 1;
                draw();
        });

        let draw = () => {
                ctx.clearRect(0,0,w,h);
                ctx.strokeStyle = colors;
                ctx.fillStyle = colors;
                ctx.font = '14px sans-serif';
                ctx.shadowOffsetX = ctx.shadowOffsetY = 1;
                ctx.shadowBlur = 2;
                ctx.shadowColor = '#555';
                ctx.textAlign = 'center';
                ctx.beginPath();
                for(j = 0; j <= idx; j ++) {
                        ctx.lineTo(slice*j, h - ypData * h / vmax);
                }
                ctx.stroke();
                ctx.beginPath();
                ctx.strokeStyle = colors;
                for(j = idx + 1; j < ypData.length; j ++) {
                        ctx.lineTo(slice*j, h - ypData * h / vmax);
                }
                ctx.stroke();
                ctx.fillText((aud.paused ? '播放 ' : '暂停 ') + toMin(aud.currentTime) + ' / ' + toMin(aud.duration), w/2, h*0.95);
                bb.style.top = 'calc(50% - ' + ypData + 'px)';
        };
        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;};
        draw();
})();
</script>

千羽 发表于 2022-12-17 21:57

不会做啊，简单模仿了一下{:6_211:}

小辣椒 发表于 2022-12-17 22:00

千羽 发表于 2022-12-17 21:57
不会做啊，简单模仿了一下

千羽套用的非常成功{:4_178:}

小辣椒 发表于 2022-12-17 22:01

可以改一下图图的，你去看看我的也是套用就是自己改了一下

千羽 发表于 2022-12-17 22:03

小辣椒 发表于 2022-12-17 22:01
可以改一下图图的，你去看看我的也是套用就是自己改了一下

俺不行呢，就这都做不好啊，惭愧中……{:5_148:}

小辣椒 发表于 2022-12-17 22:05

千羽 发表于 2022-12-17 22:03
俺不行呢，就这都做不好啊，惭愧中……

不过你以图图为主，现在做播放器已经很厉害了{:4_178:}

红影 发表于 2022-12-17 22:18

那美女好像在看日出，这个代码用在这张背景下特别漂亮，羽儿真棒{:4_199:}

千羽 发表于 2022-12-17 22:20

小辣椒 发表于 2022-12-17 22:05
不过你以图图为主，现在做播放器已经很厉害了

哈哈，一点儿也不厉害呢，套个代码都会出错的{:4_201:}

马黑黑 发表于 2022-12-17 22:20

真实奇观哈

千羽 发表于 2022-12-17 22:21

红影 发表于 2022-12-17 22:18
那美女好像在看日出，这个代码用在这张背景下特别漂亮，羽儿真棒

谢谢影儿鼓励啊，换上图片和音乐就完成任务了，哈哈{:4_189:}

小辣椒 发表于 2022-12-17 22:21

千羽 发表于 2022-12-17 22:20
哈哈，一点儿也不厉害呢，套个代码都会出错的

千羽谦虚了

千羽 发表于 2022-12-17 22:26

马黑黑 发表于 2022-12-17 22:20
真实奇观哈

用了奇观的图名，就可以部分的掩盖图图的不足了{:4_173:}

马黑黑 发表于 2022-12-17 22:27

千羽 发表于 2022-12-17 22:26
用了奇观的图名，就可以部分的掩盖图图的不足了

你的图图很足的{:4_170:}

红影 发表于 2022-12-18 11:35

千羽 发表于 2022-12-17 22:21
谢谢影儿鼓励啊，换上图片和音乐就完成任务了，哈哈

这个倒是巧了，用远效果倒是特别漂亮，换个图图也许还没这效果了呢{:4_187:}

马黑黑 发表于 2022-12-18 15:32

既然是看太阳，太阳可以略微圆一点，高宽一致就是圆的；还可以远一点，这个容易了。

梦缘 发表于 2022-12-19 16:10

谢老师的分享，问好！{:4_187:}

千羽 发表于 2022-12-19 19:21

马黑黑 发表于 2022-12-17 22:27
你的图图很足的

黑黑老师也不知道我说的不足在哪{:4_181:}

千羽 发表于 2022-12-19 19:22

马黑黑 发表于 2022-12-18 15:32
既然是看太阳，太阳可以略微圆一点，高宽一致就是圆的；还可以远一点，这个容易了。

哈哈，太不容易了啊{:4_173:}

马黑黑 发表于 2022-12-19 20:00

千羽 发表于 2022-12-19 19:22
哈哈，太不容易了啊

用心就容易

马黑黑 发表于 2022-12-19 20:00

千羽 发表于 2022-12-19 19:21
黑黑老师也不知道我说的不足在哪

你说的不足就是没有足{:4_170:}
页: [1] 2
查看完整版本: 完成黑黑老师作业：《奇观》