新年必备烟花模拟器-附源码

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
以下是新年倒计时10-1烟花爱心代码的示例: ```html <!DOCTYPE html> <html> <head> <title>New Year Countdown</title> <style> .countdown { font-size: 48px; text-align: center; margin-top: 200px; } .fireworks { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } .heart { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } </style> </head> <body> <div class="countdown" id="countdown"></div> <canvas class="fireworks" id="fireworks"></canvas> <img class="heart" src="heart.png" width="100" height="100"> <script> // 设置倒计时的结束时间 var countdownDate = new Date("Jan 1, 2023 00:00:00").getTime(); // 更新倒计时 var countdown = setInterval(function() { var now = new Date().getTime(); var distance = countdownDate - now; // 计算剩余时间 var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // 显示倒计时 document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // 倒计时结束时触发烟花和爱心效果 if (distance < 0) { clearInterval(countdown); showFireworks(); showHeart(); } }, 1000); // 显示烟花效果 function showFireworks() { var canvas = document.getElementById("fireworks"); var ctx = canvas.getContext("2d"); var particles = []; var particleCount = 100; canvas.width = window.innerWidth; canvas.height = window.innerHeight; function Particle() { this.x = canvas.width / 2; this.y = canvas.height / 2; this.vx = Math.random() * 10 - 5; this.vy = Math.random() * 10 - 5; this.gravity = 0.1; } Particle.prototype.update = function() { this.x += this.vx; this.y += this.vy; this.vy += this.gravity; } Particle.prototype.draw = function() { ctx.fillStyle = "rgba(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ",1)"; ctx.beginPath(); ctx.arc(this.x, this.y, 5, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); } function createParticles() { for (var i = 0; i < particleCount; i++) { var particle = new Particle(); particles.push(particle); } } function updateParticles() { for (var i = 0; i < particles.length; i++) { var particle = particles[i]; particle.update(); particle.draw(); if (particle.y > canvas.height) { particles.splice(i, 1); } } } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); createParticles(); updateParticles(); requestAnimationFrame(animate); } animate(); } // 显示爱心效果 function showHeart() { var heart = document.querySelector(".heart"); heart.style.display = "block"; } </script> </body> </html> ``` 请注意,上述代码中使用了一个名为"heart.png"的图片作为爱心的图标。你可以将该图片与HTML文件放在同一目录下,并将其文件名替换为你自己的图片文件名。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

山海云端有限公司

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值