JS倒计时两种实现方式代码实例

yizhihongxing

下面我来详细讲解一下“JS倒计时两种实现方式代码实例”的完整攻略。

1. 倒计时实现方式一

1.1 基本思路

通过设定一个起始时间和一个截止时间,计算它们之间的时间差,并将时间差转化为时、分、秒显示在页面上,同时在每隔一秒钟更新一次时间。

1.2 代码实例

//定义起始时间、截止时间变量
var startTime = new Date('2021/10/1 00:00:00');
var endTime = new Date('2021/10/7 23:59:59');

//计算时间差
var leftTime = parseInt((endTime.getTime() - startTime.getTime()) / 1000);

//定义显示时间的元素
var showTime = document.getElementById('showTime');

//定义更新时间函数
function showLeftTime() {
  //计算剩余时间
  var hours = parseInt(leftTime / 3600);
  var minutes = parseInt((leftTime - hours * 3600) / 60);
  var seconds = leftTime % 60;

  //格式化时间显示:2位数字,不足两位前面补0
  hours = formatTime(hours);
  minutes = formatTime(minutes);
  seconds = formatTime(seconds);

  //将时间显示在页面上
  showTime.innerHTML = hours + ":" + minutes + ":" + seconds;

  //每隔1秒钟更新时间
  timer = setTimeout(function() {
    leftTime--;
    showLeftTime();
  }, 1000);
}

//定义格式化时间的函数
function formatTime(time) {
  if (time < 10) {
    return '0' + time;
  } else {
    return time;
  }
}

//调用更新时间函数
showLeftTime();

1.3 示例说明

以上代码实现了一个从2021年10月1日0时0分0秒到2021年10月7日23时59分59秒的倒计时,将剩余时间显示在id为showTime的元素中,并每隔1秒钟更新一次时间。此外,我们还定义了一个用于格式化时间的函数formatTime(),用于将时间格式化为2位数字。

2. 倒计时实现方式二

2.1 基本思路

通过设定一个总时长(以秒为单位),每隔1秒钟减1,并将减少后的剩余时长转化为时、分、秒显示在页面上。

2.2 代码实例

//定义总时长
var totalSeconds = 60 * 60 * 24 * 7;

//定义显示时间的元素
var showTime = document.getElementById('showTime');

//定义更新时间函数
function showLeftTime() {
  //计算剩余时间
  var hours = parseInt(totalSeconds / 3600);
  var minutes = parseInt(totalSeconds / 60 % 60);
  var seconds = totalSeconds % 60;

  //格式化时间显示:2位数字,不足两位前面补0
  hours = formatTime(hours);
  minutes = formatTime(minutes);
  seconds = formatTime(seconds);

  //将时间显示在页面上
  showTime.innerHTML = hours + ":" + minutes + ":" + seconds;

  //每隔1秒钟更新时间
  timer = setTimeout(function() {
    totalSeconds--;
    if (totalSeconds >= 0) {
      showLeftTime();
    } else {
      clearTimeout(timer);
      alert("时间到!");
    }
  }, 1000);
}

//定义格式化时间的函数
function formatTime(time) {
  if (time < 10) {
    return '0' + time;
  } else {
    return time;
  }
}

//调用更新时间函数
showLeftTime();

2.3 示例说明

以上代码实现了一个倒计时时长为1周的计时器,将剩余时间显示在id为showTime的元素中,并每隔1秒钟更新一次时间。当倒计时结束时,弹出一个提示框。此外,我们还定义了一个用于格式化时间的函数formatTime(),用于将时间格式化为2位数字。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS倒计时两种实现方式代码实例 - Python技术站

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

相关文章

  • JavaScript学习笔记(三):JavaScript也有入口Main函数

    接下来我将详细讲解“JavaScript学习笔记(三):JavaScript也有入口Main函数”的完整攻略。 什么是JavaScript的入口Main函数? 在很多编程语言中,都有一个入口函数,比如Java中的main函数、C++中的main函数等等。在JavaScript中,虽然没有像Java、C++那样明确的入口函数,但是我们可以通过编写一个init函…

    JavaScript 2023年5月27日
    00
  • 关于var在for循环遇到的问题解决

    关于var在for循环中遇到的问题解决可以从以下两点入手: 1、变量提升问题: 在ES5中,使用var声明变量时,会发生变量提升的问题。在for循环中使用var声明变量时,变量会被提升到外层作用域中,导致在循环中每一次循环所声明的变量并不是独立的,而是共享一个变量,从而导致循环结束后,该变量的值始终是最后一次循环的值。 解决方案是使用let或const关键字…

    JavaScript 2023年6月10日
    00
  • 基于js中的存储键值对以及注意事项介绍

    下面是关于“基于js中的存储键值对以及注意事项介绍”的完整攻略: 基于JS中的存储键值对 在JavaScript中,可以使用键值对存储数据。这被称为对象。对象是由键-值对构成的集合。可以通过键来访问值。 JavaScript中存储键值对的方式主要有以下三种: 1. 对象 对象是由键-值对构成的集合。可以使用对象字面量创建对象。对象字面量是由一对大括号包裹起来…

    JavaScript 2023年6月11日
    00
  • JS删除String里某个字符的方法

    当我们使用JavaScript处理字符串时,经常需要从字符串中删除某个字符,本文详细介绍JS删除String里某个字符的各种实现方法。 方法一:使用replace()函数 replace()函数可以将字符串中的指定字符替换成新的字符,通过将要删除的字符用空字符串替换掉就可以实现删除效果。 代码示例: let originalStr = "This …

    JavaScript 2023年5月28日
    00
  • JS中DOM元素的attribute与property属性示例详解

    关于“JS中DOM元素的attribute与property属性示例详解”,我们可以从以下几个方面进行说明: 一、什么是DOM元素的attribute和property? DOM元素可以看做是一个JS对象,它有很多属性和方法,其中包括两个比较容易混淆的属性,分别是attribute和property。 attribute是DOM元素具有的属性,就是标签上的属…

    JavaScript 2023年6月10日
    00
  • 利用javascript数组长度循环数组内所有元素

    使用JavaScript数组长度循环数组内所有元素,可以帮助我们在Web开发中快速有效地进行数据处理操作。下面是完整的攻略步骤: 步骤一:创建一个数组 首先,需要创建一个数组来存放待处理数据。以下是示例代码: let myArray = [‘apple’, ‘banana’, ‘orange’, ‘grape’]; 步骤二:获取数组长度 使用 length …

    JavaScript 2023年5月27日
    00
  • JavaScript中的数值范围介绍

    JavaScript中的数值范围介绍 在 JavaScript 中,数值类型是一种很常用的数据类型。它可以表示整数和小数,并支持各种基本运算。但是,JavaScript中的数值类型也存在一些限制,包括数值范围和精度等问题。本文主要介绍 JavaScript 中数值类型的数值范围相关知识。 JavaScript中支持的数值范围 JavaScript 中的数值类…

    JavaScript 2023年5月18日
    00
  • JS实现的在线调色板实例(附demo源码下载)

    JS实现的在线调色板实例 本篇文章将向您展示如何使用JavaScript创建一个在线调色板实例。本项目使用HTML、CSS和JS,允许用户通过单击颜色选取器调整颜色,然后显示所选颜色的值。 项目代码 请先下载示例代码,然后跟随我们的指导进行实现:在线调色板实例源代码 实现过程 从Github仓库中下载示例代码。 用您最喜欢的编辑器打开index.html文件…

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