帮我写一个跨年html倒计时代码,达到预定时间切换为放烟花

这篇具有很好参考价值的文章主要介绍了帮我写一个跨年html倒计时代码,达到预定时间切换为放烟花。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

以下是一个简单的 HTML 倒计时代码,在跨年时会切换为放烟花的效果:

<!DOCTYPE html>
<html>
<head>
<script>
// 获取当前时间
var currentTime = new Date();

// 设置倒计时结束时间 (年月日时分秒)
var endTime = new Date("2022-12-31 23:59:59");

// 计算剩余时间 (毫秒)
var remainingTime = endTime.getTime() - currentTime.getTime();

// 如果剩余时间小于 0,则更新结束时间为下一年
if (remainingTime < 0) {
  endTime = new Date("2023-12-31 23:59:59");
  remainingTime = endTime.getTime() - currentTime.getTime();
}

// 更新倒计时
function updateTimer() {
  // 计算剩余时间 (毫秒)
  remainingTime = endTime.getTime() - new Date().getTime();

  // 如果剩余时间小于等于 0,则显示放烟花效果
  if (remainingTime <= 0) {
    clearInterval(timer);
    document.getElementById("countdown").innerHTML = "放烟花!";
    return;
  }

  // 将剩余时间转换为天、小时、分钟和秒
  var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
  var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

  // 显示倒计时
  document.getElementById("countdown").innerHTML = days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒 ";
}

// 每秒更新倒计时
var timer = setInterval(updateTimer, 1000);

</script>
</head>
<body>

<div id="countdown"></div>

</body>
</html>

上面的文章来源地址https://www.toymoban.com/news/detail-770596.html

到了这里,关于帮我写一个跨年html倒计时代码,达到预定时间切换为放烟花的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 简单的倒计时(html + css + javaScript)

    这个页面包含一个输入日期的输入框、一个“开始倒计时”的按钮以及一个显示倒计时的元素。当用户点击按钮时,会通过JavaScript获取输入的日期,并开始一个定时器,每秒更新倒计时并随机改变颜色。当倒计时结束时,定时器会被清除,倒计时元素将显示\\\"倒计时已结束\\\",

    2024年02月03日
    浏览(46)
  • html web前端,点击发送验证码,按钮60秒倒计时

    html web前端,点击发送验证码,按钮60秒倒计时 eaca39b57a49d39f6c9e2f49f2559e9a.jpg

    2024年02月08日
    浏览(55)
  • python实现一个简单的桌面倒计时小程序

    本章内容主要是利用python制作一个简单的桌面倒计时程序,包含开始、重置 、设置功能。 目录 一、效果演示 二、程序代码

    2024年02月04日
    浏览(53)
  • 微信小程序实现给一个时间去设置倒计时

    设置倒计时 此方法仅限不超过一个月的倒计时

    2024年02月11日
    浏览(63)
  • 使用css3实现一个超浪漫的新年倒计时

    新年快到了,使用css3实现一个超浪漫的新年倒计时吧,希望大家喜欢。 目录 1 实现思路  2 实现浪漫的心形背景 3 布局小时分钟和秒的区域 4、js倒计时  5、然后就是将所得的小时、分钟、秒对DOM进行赋值  6、每秒一更新  7、补充知识点1- 倒计时为什么不写1000 8、补充知识

    2024年02月03日
    浏览(40)
  • 案例:模拟京东秒杀倒计时(完整代码)【前端实现】

    目录 实现效果  案例分析 代码分析 代码实现 (完整) 背景图片引用   实现效果  案例分析  1.倒计时是不断变化的 所以需要一个定时器( setInterval )  2.三个盒子通过 innerHTML 进行赋值 放入时分秒  3.使用 Date() 对象获取当前时间(时间戳)  4.传递参数获取活动开始的时间

    2024年02月09日
    浏览(48)
  • 初学51单片机(STC89C52)一个倒计时显示器和大家分享

      想要实现倒计时显示器,首先得确定从哪个时间开始倒计时,这就需要写出一个计数的程序来,通过按键来控制需要的数,从而开始倒计时。我的开发板上用的Key2,Key3,Key4,Key5这四个键,分别对应着加1,减1,乘2,开始计时四个功能。   通过加一,减一,乘2三个操作,

    2024年02月10日
    浏览(54)
  • chatgpt帮我写的一个小程序气泡框代码

    效果图 这是一个气泡框 .bubble { position: relative; padding: 10px; border-radius: 8px; background-color: #ddd; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .triangle { position: absolute; width: 0; height: 0; top: -10px; left: 50%; margin-left: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px soli

    2024年02月02日
    浏览(44)
  • 蓝桥杯倒计时 | 倒计时4天

    作者🕵️‍♂️:让机器理解语言か 专栏🎇:蓝桥杯倒计时冲刺 描述🎨:蓝桥杯冲刺阶段,一定要沉住气,一步一个脚印,胜利就在前方! 寄语💓:🐾没有白走的路,每一步都算数!🐾 题目描述 我们要求找出具有下列性质数的个数(包含输入的自然数 n): 先输入一个自

    2023年04月09日
    浏览(47)
  • 51单片机实现倒计时,按键控制倒计时

    基于AT89C52的答辩倒计时。四个按键分别控制倒计时开始,暂停,时间加和减。剩下30S时蜂鸣器响,倒计时结束蜂鸣器响。  

    2024年02月07日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包