js实现倒计时时钟的示例代码

实现JS倒计时时钟需要用到JS的Date()对象以及setTimeout()方法,下面是完整攻略:

1. 创建一个计时器页面

创建一个HTML页面,包含一个div元素用于显示倒计时,同时在页面底部添加一个JavaScript脚本标签。其中HTML代码如下所示:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>倒计时时钟</title>
  </head>
  <body>
    <div id="countdown"></div>
    <script src="countdown.js"></script>
  </body>
</html>

2. 实现倒计时的JavaScript代码

可以先定义倒计时的时间,例如要倒计时30分钟,代码如下所示:

const countdown = new Date(Date.now() + 30 * 60 * 1000);

然后可以编写一个格式化时间的函数,将时间转换为“小时:分钟:秒数”的格式,如下所示:

function formatTime(time) {
  let hours = time.getHours();
  let minutes = time.getMinutes();
  let seconds = time.getSeconds();
  return `${hours}:${minutes}:${seconds}`;
}

接下来创建一个循环函数,每秒钟更新一次倒计时的时间,并在HTML页面中显示出倒计时的时间。代码如下所示:

function countDown() {
  // 计算剩余的时间
  const now = new Date();
  const difference = countdown - now;

  // 如果时间已经过了则停止倒计时
  if (difference < 0) {
    clearInterval(timer);
    return;
  }

  // 更新倒计时的时间
  const remainingTime = formatTime(new Date(difference));
  const countdownElement = document.getElementById('countdown');
  countdownElement.textContent = remainingTime;
}

// 每秒钟执行一次倒计时函数
const timer = setInterval(countDown, 1000);

示例说明

示例1:倒计时时钟

页面打开后,会实现一个倒计时的时钟,显示在页面最中央,从设定的时间开始倒计时到0。

示例2:更新倒计时时间

可以通过修改JavaScript代码中的倒计时时间来更改倒计时的结束时间。例如要倒计时1小时30分钟,可以修改代码如下所示:

const countdown = new Date(Date.now() + 1 * 60 * 60 * 1000 + 30 * 60 * 1000);

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js实现倒计时时钟的示例代码 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现

    JavaScript高级程序设计 阅读笔记(十四)讲解了JavaScript中的继承机制以及其实现方式。下面是我总结的一个完整攻略: 继承机制的本质 JavaScript采用原型(prototype)继承机制。当访问一个对象的属性时,JavaScript引擎会首先查找该对象自身是否有这个属性。如果存在,则直接返回该属性值;如果不存在,则继续查找该对象的原型对…

    JavaScript 2023年5月27日
    00
  • js构造函数创建对象是否加new问题

    当使用 JavaScript 构造函数创建对象时,可以选择是否使用 new 关键字。如果使用了 new 关键字,则会创建一个新的对象并将其绑定到 this 上,最后返回这个新的对象。如果没有使用 new 关键字,则 this 被绑定到全局对象上,这可能导致一些意外的问题。 下面给出两个示例展示使用和不使用 new 关键字的区别。 示例一 function P…

    JavaScript 2023年6月11日
    00
  • JavaScript进阶教程(第三课)第2/2页

    关于JavaScript进阶教程(第三课)第2/2页的完整攻略,我来给你一个详细的说明。 JavaScript进阶教程(第三课)第2/2页攻略 概述 这篇文章主要介绍了JavaScript中的一些高级概念和技巧,包括函数柯里化、惰性函数、递归等等。针对每一种技巧,都有详细的说明和示例,帮助读者更好地理解和掌握这些概念和技巧。 函数柯里化 函数柯里化是一种将多…

    JavaScript 2023年5月18日
    00
  • js自执行函数的几种不同写法的比较

    让我们来详细讲解一下“js自执行函数的几种不同写法的比较”。 什么是自执行函数? 自执行函数,也被称为立即执行函数,是指在定义函数后立即调用该函数的一种方式,通常被用来封装一些特定的操作,避免变量污染全局作用域。 自执行函数的几种不同写法 写法一:使用小括号将函数包裹起来 (function () { // code goes here })(); // 或…

    JavaScript 2023年5月27日
    00
  • js禁止document element对象选中文本实现代码

    下面我来详细讲解一下如何通过JavaScript禁止document element对象选中文本实现代码。 方法一:利用CSS属性禁止选中文本 我们可以利用CSS属性来实现禁止选中文本的效果,具体方法如下: 在需要禁止选中文本的元素上加入以下CSS代码: -webkit-user-select: none; -moz-user-select: none; -…

    JavaScript 2023年6月10日
    00
  • 编程语言JavaScript简介

    编程语言JavaScript简介 JavaScript的概述 JavaScript是一种Web前端开发中经常用到的编程语言,也是一种具有广泛应用的脚本语言。它可以与HTML和CSS合作,用于构建交互式的网站和Web应用程序,也可以在后端服务器上运行。 JavaScript最初由网景公司(Netscape)的 Brendan Eich 开发,于1995年发布,…

    JavaScript 2023年5月18日
    00
  • JS实现的适合做faq或menu滑动效果示例

    JS实现FAQ和Menu滑动效果可以使用jQuery的库来实现,下面是详细的攻略: 创建HTML文件并引入jQuery库 若已有HTML文件则可以跳过此步骤。若无则需要创建一个HTML文件并在标签中引入jQuery库。可以使用以下代码: <!DOCTYPE html> <html> <head> <title>…

    JavaScript 2023年6月10日
    00
  • JavaScript实现页面定时刷新(定时器,meta)

    下面是JavaScript实现页面定时刷新的完整攻略。 一、使用JavaScript定时器实现页面定时刷新 JavaScript定时器是一个非常常见的JavaScript特性,可以让你重复执行一段JavaScript代码片段。结合定时器和location.reload()方法,可以非常简单地实现页面定时刷新。 以下是使用JavaScript定时器实现页面定时…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部