片片枫叶情

醉美水芙蓉 发表于 2022-9-20 20:22

本帖最后由醉美水芙蓉于 2022-9-19 21:36 编辑 <br /><br /><style>
#papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; position: relative; }
#canvas { position: absolute; top: 0; left: 0; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#imgSnow, #bgSnow { display: none; }
#tit { position: absolute; left: 60px; top: 10px;font: bold 22px / 40px sans-serif; color: snow; text-shadow: 2px 2px 4px black; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<canvas id="canvas"></canvas>
<img id="imgSnow" src="https://www.huachaowang.com/data/attachment/forum/202209/16/123530ufhtrajxku4kzde9.png" alt="">
<img id="bgSnow" src="https://pic.imgdb.cn/item/63286f0716f2c2beb1d69caa.jpg" alt="">
<span id="disc"></span>
<span id="tit">片片枫叶情</span>
</div>

<script>
let aud = new Audio();
aud.src = 'https://www.qqmc.com/up/kwlink.php?id=56250&.mp3';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');

(function () {
let ctx = canvas.getContext('2d');
let snowArray = {}; //雪花对象
let snowIndex = 0; //标识符
let setting = {
num: 30, //数量
snowSize: 20, //大小
startX: Math.random() * canvas.width, //起始横坐标
startY: 0, //起始纵坐标
vy: 0.01
}

canvas.width = papa.offsetWidth;
canvas.height = papa.offsetHeight;

function snow() {
this.x = Math.random() * canvas.width; // 起始横坐标
this.y = setting.startY; // 起始纵坐标
this.size = setting.snowSize + Math.random() * 10 - 10; //大小
this.vx = Math.random() * 3 - 2; //横坐标偏移量
this.vy = Math.random() * 10; //纵坐标偏移量
this.life = 0;
this.maxLife = 100;
this.id = snowIndex;
snowArray = this; //当前信息保存至对象snowArray
snowIndex ++;
}

snow.prototype.draw = function () {
this.x += this.vx;
this.y += this.vy;
this.vy += setting.vy;
this.life ++;
if (this.y > canvas.height * 0.9 - 20 || this.life >= this.maxLife) snowArray;
ctx.drawImage(imgSnow, this.x, this.y, this.size, this.size)
}

function render() {
ctx.drawImage(bgSnow, 0, 0, canvas.width, canvas.height);
for (let j = 0; j < setting.num; j++) {
if (Math.random() > 0.97) new snow();
}
for (let j in snowArray) {
snowArray.draw();
}
requestAnimationFrame(render);
}
render();
})();
</script>

醉美水芙蓉 发表于 2022-9-20 20:23

马黑黑 发表于 2022-9-20 20:24

{:4_199:}

醉美水芙蓉 发表于 2022-9-20 20:24

@马黑黑请黑黑老师帮忙看看加入歌词错在哪里？

醉美水芙蓉 发表于 2022-9-20 20:26

马黑黑发表于 2022-9-20 20:24

黑黑老师看看我的代码错在哪儿，歌词加不上去？

马黑黑 发表于 2022-9-20 20:27

本帖最后由马黑黑于 2022-9-20 20:31 编辑

醉美水芙蓉发表于 2022-9-20 20:24
@马黑黑请黑黑老师帮忙看看加入歌词错在哪里？
你在下面的代码，多出了 <script>，这是致错误，要删掉：

<script>
<div id="papa">
   <span id="lrcbox">Loading ...</span>
   <canvas id="canv" width="1024" height="350"></canvas>
   <span id="disc"></span>
</div>

同时，你的代码重组也有错误，需要把红色部分删除掉：

<div id="papa">
   <canvas id="canvas"></canvas>
   <img id="imgSnow" src="https://www.huachaowang.com/data/attachment/forum/202209/16/123530ufhtrajxku4kzde9.png" alt="">
   <img id="bgSnow" src="https://pic.imgdb.cn/item/63286f0716f2c2beb1d69caa.jpg" alt="">
   <span id="disc"></span>
   <span id="tit">片片枫叶情</span>
</div>

<div id="papa">
   <span id="lrcbox">Loading ...</span>
   <canvas id="canv" width="1024" height="350"></canvas>
   <span id="disc"></span>
</div>

马黑黑 发表于 2022-9-20 20:32

醉美水芙蓉发表于 2022-9-20 20:26
黑黑老师看看我的代码错在哪儿，歌词加不上去？

6楼大致说了一点，没有全面细看。

将多种代码柔和在一起需要理解每一组代码的含义，取舍是必须的。

红影发表于 2022-9-20 20:50

这漂亮的枫叶，欣赏水芙蓉好帖{:4_204:}

醉美水芙蓉 发表于 2022-9-20 21:07

红影发表于 2022-9-20 20:50
这漂亮的枫叶，欣赏水芙蓉好帖

谢谢红影美女鼓励！

千羽发表于 2022-9-20 22:10

醉美水芙蓉发表于 2022-9-20 20:23

秋意浓浓的唯美画面，播放器漂亮{:4_187:}

醉美水芙蓉 发表于 2022-9-20 22:27

千羽发表于 2022-9-20 22:10
秋意浓浓的唯美画面，播放器漂亮

只做好一半，歌词没有做出来！

醉美水芙蓉 发表于 2022-9-21 11:45

马黑黑发表于 2022-9-20 20:32
6楼大致说了一点，没有全面细看。

将多种代码柔和在一起需要理解每一组代码的含义，取舍是必须的。

很遗憾！黑黑老师讲了半天，学生还是没有能够把歌词做出来，删除了多余代码，音乐和特效都有了，只是歌词还不能显示！

加林森 发表于 2022-9-21 11:50

挺不错的。制作漂亮了。{:4_199:}

马黑黑 发表于 2022-9-21 12:16

醉美水芙蓉发表于 2022-9-21 11:45
很遗憾！黑黑老师讲了半天，学生还是没有能够把歌词做出来，删除了多余代码，音乐和特效都有了，只是歌词 ...

JS代码，彼此间有关联，要将两个不同模块的代码融合在一起，需要对代码有清晰的认识，东拼西凑的操作只能凭运气

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

加林森发表于 2022-9-21 11:50
挺不错的。制作漂亮了。

谢谢队长鼓励！

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

马黑黑发表于 2022-9-21 12:16
JS代码，彼此间有关联，要将两个不同模块的代码融合在一起，需要对代码有清晰的认识，东拼西凑的操作只能 ...

黑黑老师说得对，这真的是个技术活！

东篱闲人 发表于 2022-9-21 17:36

红彤彤的一片，红火漂亮！{:5_116:}

东篱闲人 发表于 2022-9-21 17:36

那飘落的红叶俺还以为是山楂呢。。。。{:5_117:}

马黑黑 发表于 2022-9-21 18:14

醉美水芙蓉发表于 2022-9-21 17:32
黑黑老师说得对，这真的是个技术活！

嗯，需要至少一点点JS基础和写代码的基本技能

加林森 发表于 2022-9-21 19:21

醉美水芙蓉发表于 2022-9-21 17:31
谢谢队长鼓励！

不客气的。

页: [1] 2

花潮论坛's Archiver

片片枫叶情