片片枫叶情

显示全部楼层 · 发表于 2022-9-20 20:22

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由醉美水芙蓉于 2022-9-19 21:36 编辑

片片枫叶情

显示全部楼层 · 发表于 2022-9-20 20:23

<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>
<div id="papa">
<span id="lrcbox">Loading ...</span>
<canvas id="canv" width="1024" height="350"></canvas>
<span id="disc"></span>
</div>
<script>
let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let num = (m, n) => Math.floor(Math.random() * (n - m + 1) + m);
let stars = new Array(500), meteors = new Array(10);
let aud = new Audio();
let lrcAr = [
['0.03','张智霖、许秋怡 - 片片枫叶情'],
['1.01','作词：潘伟源'],
['1.03','作曲：邓文杰'],
['16.03','LRC编辑：醉美水芙蓉'],
['19.10','女：'],
['22.04','片片红叶转'],
['26.06','它低叹再会了这段缘'],
['32.02','片片红叶转'],
['36.05','回头望告别了苦恋'],
['42.00','爱似秋枫叶'],
['46.03','无力再灿烂再燃'],
['51.07','爱似秋枫叶'],
['56.01','凝聚了美丽却苦短'],
['60.00','男：'],
['61.09','片片红叶转'],
['65.09','它低叹再会了这段缘'],
['71.04','片片红叶转'],
['75.06','回头望告别了苦恋'],
['81.02','爱似秋枫叶'],
['85.05','无力再灿烂再燃'],
['91.00','爱似秋枫叶'],
['95.03','凝聚了美丽却苦短'],
['99.05','女：'],
['103.05','片片叶儿随梦却倾刻飘远'],
['108.02','相看对泣竟默然'],
['113.00','片片叶儿携着我此生所爱'],
['117.10','一飘再飘梦更远'],
['123.05','男：'],
['123.06','远远夕阳陪着你此刻归去'],
['127.07','心中爱火怎复燃'],
['132.07','远远夕阳携着我此生所爱'],
['137.06','秋风带走梦片片'],
['142.10','女：'],
['162.01','片片红叶转'],
['166.03','它低叹再会了这段缘'],
['171.08','片片红叶转'],
['176.02','回头望告别了苦恋'],
['179.10','男：'],
['181.06','爱似秋枫叶'],
['186.00','无力再灿烂再燃'],
['191.05','爱似秋枫叶'],
['195.08','凝聚了美丽却苦短'],
['200.02','女：'],
['203.10','片片叶儿随梦却倾刻飘远'],
['208.06','相看对泣竟默然'],
['213.05','片片叶儿携着我此生所爱'],
['218.04','一飘再飘梦更远'],
['223.07','男：'],
['223.09','远远夕阳陪着你此刻归去'],
['228.02','心中爱火怎复燃'],
['233.01','远远夕阳携着我此生所爱'],
['238.00','秋风带走梦片片'],
['243.04','女：'],
['243.06','片片叶儿随梦却倾刻飘远'],
['247.09','相看对泣竟默然'],
['252.06','片片叶儿携着我此生所爱'],
['257.07','一飘再飘梦更远'],
['262.10','男：'],
['263.02','远远夕阳陪着你此刻归去'],
['267.05','心中爱火怎复燃'],
['272.04','远远夕阳携着我此生所爱'],
['277.06','谢谢欣赏！']
];
aud.loop = true;
aud.autoplay = true;
aud.src = 'https://www.qqmc.com/up/kwlink.php?id=56250&.mp3';
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[snowIndex] = 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[this.id];
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[j].draw();
}
requestAnimationFrame(render);
}
render();
})();
</script>

复制代码

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

显示全部楼层 · 发表于 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>