基于javascript简单的倒计时功能程序代码

公告:荻酷网每天不定时为大家更新各种实用技术教程、编曲资源,脚本源代码,插件,软件应用等资讯、绝大部分资源都经过亲测演示,下载荻酷网客户端、获取最新资源不迷路。 下载说明:如果是种子链接请下载专用工具进行下载,其它网盘链接可直接访问下载。

程序介绍

使用JavaScript来更新倒计时。我们首先设置了目标时间(即到达该时间为止进行倒计时),然后在setInterval函数中,设置了每隔1秒钟更新一次倒计时的代码。我们通过获取当前时间和目标时间之差,计算出剩余时间。然后,通过对剩余时间进行数学运算,计算出剩余天数、小时数、分钟数和秒数,并将其显示在页面上。你可以根据实际需求扩展和修改该代码,例如更改目标时间,或者添加动画效果等。

效果如下

图片[1]-基于javascript简单的倒计时功能程序代码-QQ沐编程

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>倒计时</title>
</head>
<body>
  <h1 id="timer"></h1>
  <script>
    // 目标时间(到达该时间为止进行倒计时)
    var target_date = new Date("2023-01-01").getTime();
    // 更新倒计时
    setInterval(function() {
      // 获取当前时间
      var current_date = new Date().getTime();
      // 计算剩余时间
      var time_left = target_date - current_date;
      // 计算天数、小时数、分钟数和秒数
      var days = Math.floor(time_left / (1000 * 60 * 60 * 24));
      var hours = Math.floor((time_left % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((time_left % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((time_left % (1000 * 60)) / 1000);
      // 更新页面内容
      document.getElementById("timer").innerHTML = days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 ";
    }, 1000);
  </script>
</body>
</html>

 

    温馨提示:本文最后更新于2024-06-04 10:50:18,某些文章具有时效性,若有错误或已失效,请在下方留言
    ©版权声明
    感谢您的阅读
    喜欢就支持一下吧
    点赞7赞赏 分享
    评论 抢沙发
    头像
    欢迎您留下宝贵的见解!
    提交
    头像

    昵称

    夸夸
    还有吗!没看够!
    取消
    昵称表情代码图片

      暂无评论内容