时间倒计时 2021-05-25

计算秒速公式

d = parselnt(总秒数/60/60/24);  //计算天数

h = parselnt(总秒数/60/60%24);计算小时数

m = parselnt(总秒数/60 %60);计算分数

s = parselnt(总秒数%60);//计算当前秒数

参考:自己要多练习

 <script>
        function countDown(time) {
            var nowTime = +new Date(); //返回当前时间的毫秒数
            var inputTime = +new Date(time); //返回用户输入时间总毫秒数
            var times = (inputTime - nowTime) / 1000; //times是剩余时间总秒数 1000是一秒
            d = parseInt(times / 60 / 60 / 24); //计算天数

            h = parseInt(times / 60 / 60 % 24); // 计算小时数

            m = parseInt(times / 60 % 60); //计算分数

            s = parseInt(times % 60); //计算当前秒数
            return d + '天' + h + '时' + m + '分' + m + '秒';
        }
        console.log(countDown('2021-5-25 17:50:00'));
      
    </script>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是新年倒计时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文件放在同一目录下,并将其文件名替换为你自己的图片文件名。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值