用js写一个倒数计时器

码龄7年

关注

原创 2022-01-20 18:27:20 681 阅读开通墨衍会员： AI 帮你选题成稿，GEO 检测让 AI 也搜得到

基于 js 制作一个倒计时代码实现思路： 1. 获取 input 的参数，和现在时间。 2. 点击开始则，input 框的时间参数减去现在时间。 3. 设置定时器，每一秒执行一次。 4. 点击清空则，清除 input 框的内容，停止定时器 5. 给 input 框设置正则表达式，只能输入数字，输入其他则返回：输入错误 6. 倒计时时间可以自己进行改变，改变后剩余时间自动发生变化。阅读详情

代码如下：

<body>
<div><span id="hh">00</span>:<span id="mm">00</span>:<span id="ss">00</span></div>
<script>
    window.onload=function(){
        var h=0;//时
        var m=0;//分
        var s=10;//秒
        var count=h*3600+m*60+s;
        var timer;
        timer=setInterval(function(){
            count--;
            if(count>=0) {
                $("#hh").text(showNum(Math.floor(count / 3600)));
                $("#mm").text(showNum(Math.floor((count / 60)%60)));
                $("#ss").text(showNum(count % 60))
            }else{
                //do something
                alert("时间到了");
                clearInterval(timer);//取消计时，不加这句会一直循环
            }
        },1000);

    }
    function showNum(num){
        if(num<10)
            return '0'+num;
        return num;
    }

</script>
</body>

收录于

当前文章被以下社区和专栏收录：

标签

#javascript #jquery

本内容遵循 CC 4.0 BY-SA 版权协议

JS实现为控件添加倒计时功能在有些报表需求中，需要为控件添加倒计时功能，限制到某一个时间点后能进行一项操作或不能进行某项操作，比如查询，导出功能等等，又需要人性化地显示还有多少时间，即倒计时功能阅读详情

相关推荐

用js做一个倒计时(时分秒),js中倒计时器怎么实现

1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如 02 分减去22分，结果会是负数的，所以要转换为毫秒；2.用时间戳来做，用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数；3.把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）。利用JavaScript函数做一个简单的倒计时。

wenangou的博客 6640

使用 JavaScript 创建一个兔年春节倒数计时器

我们可以通过多种方式构建 JavaScript 倒数计时，我在本教程中展示的这个兔年春节倒数计时器 是由 HTML CSS 和 JavaScript 创建的。码上掘金地址：https://code.juejin.cn/pen/7185452719165931572 它的工作方式非常简单，需要两种类型的时间。我们要运行倒计时的当前时间和特定时间，必须手动添加计时器倒计时，JavaScript 的new Date()用于捕获当前时间。new Date ()是一种 JavaScript 方法，从设备获取当前

努力是为了站在万人之中，成为别人的光 1万+

js:运用JavaScript写一个倒计时模版

今天更新了定时器倒计时方面的知识，希望大家多多支持！

astar2022的博客 1732

18行JavaScript代码构建一个倒数计时器

18行JavaScript代码构建一个倒数计时器 有时，您将需要构建一个JavaScript倒数时钟。您可能有活动，销售，促销或游戏。您可以使用原始JavaScript构建时钟，而不用寻找最近的插件。虽然有很多很棒的时钟插件，但是使用原始JavaScript可以带来以下好处：您的代码将是轻量级的，因为它将具有零依赖性。您的网站将表现更好。您无需加载外部脚本和样式表。您将拥有更多控制权。您将构建时钟，使其行为完全符合您希望的方式（而不是尝试将插件弯曲到您的意愿）因此，事不宜迟，这里介绍了如何仅

小青蛙的博客 2223

简单的三按钮倒计时器

用JS做一个简单的计时器，可以用来倒计时。

s841520166的博客 1488

js实现倒数计时器功能

正在学习js的路程中，今天知道了如何实现简单倒数计时的功能，比如说，可以用于设计考试定时功能，不是从0开始计时，而是从最后的规定时长开始，如02:00:00一直到00:00:00……现在开始学习，未设置天数的功能首先，我们要明白几个方法， 1. setInterval( )方法可以按照指定的周期（以毫秒计）来调用函数或计算表达式，如setInterval(function(){}, 10

微也的博客 6139

JS实现倒计时效果

通过setInterval()方法设置定时器，待倒计时为0时，判断并使用clearInterval()清除定时器。//用户输入的总毫秒数。//获取当前总毫秒数。time用户输入的时间可以自己设置。然后将总剩余秒数转换成天时分秒。

m0_46783393的博客 6657

使用 HTML、CSS 和 JS 的简单倒数计时器

JavaScript 倒数计时器用于各种电子商务和建设中的网站，以使用户保持最新状态。我们在不同类型的电子商务网站上看到，在任何产品或优惠到达之前的某个时间开始倒计时。在本文中，我使用简单的 JavaScript 代码创建了一个倒数计时器和你分享。您可以观看它的现场演示以了解它是如何工作的。如果您知道如何创建数字时钟，那么创建这样的项目就会容易得多。您可以在此处提前安排特定日期或时间。然后，在 JavaScript 代码的帮助下，从那个时间减去当前时间，减法每秒减少一次。正如您在上图中所看到的，我在这

努力是为了站在万人之中，成为别人的光 2万+

时间倒数计时器_如何建立倒数计时器

时间倒数计时器Building a simple countdown timer is easy with JavaScript's native timing events. You can read more about those in this article. 利用JavaScript的本机计时事件，构建一个简单的倒数计时器很容易。您可以在本文中阅读有关这些内容的更多信息。建立倒...

cumian8165的博客 1115

JavaScript倒数计时器实战教程

为了更灵活地支持不同的时间格式，我们可以设计一个通用的格式化函数，支持用户传入格式字符串。// 输出：2025-12-31 23:59:59// 输出：12/31/2025本章详细讲解了如何通过 HTML 搭建倒计时的页面结构，结合 JavaScript 的 DOM 操作实现时间的动态更新机制。通过合理的元素命名、选择器设计、数据绑定策略以及视图更新逻辑，我们构建了一个结构清晰、响应迅速、可维护性强的倒计时展示系统。

weixin_42522857的博客 625

js 倒数计时器

JS 倒数计时器方法一（setTimeout)方法二（setInterval）方法一（setTimeout) //根据id获取内容 var number = document.getElementById("number") setTimeout(function(){ number.innerText = 3; setTimeout(function(){ number.innerText = 2; setTimeout(function(){ number.in

qq_43172476的博客 1194

使用 HTML、CSS 和 JS 的简单倒数计时器(1)

2)]

2401_84011114的博客 1071

在一起计时器_如何在纯JAVASCRIPT中构建倒数计时器

您不一定需要jQuery为您的站点添加倒数计时器。只需几行JavaScript即可创建一个可自定义的计时器，该计时器可计入预定义的日期和时间。您可以将计时器嵌入到多种页面中，例如即将推出和维护页面，电子商务商店，每日交易网站和活动注册页面。在本教程中，我们将逐步创建倒数计时器，以便您可以了解所有内容。您可以在本文末尾找到完整的JavaScript代码。1.创建HTML让我们从HTML开始。倒数计时...

weixin_40009026的博客 174

JavaScript实现倒计时功能

本文主要介绍JavaScript中封装时间函数和如何倒计时功能，没有拐弯抹角，拿走即用。

modao的博客 6506

JS实现倒计时和短信验证码倒计时功能

html30分钟倒计时。短信验证码倒计时功能。

weixin_50367873的博客 4256

js 倒计时器（保姆级教程）

utils文件夹中创建index.js 文件。2. main.js 挂载全局。1. 倒计时器封装的方法。

m0_66729991的博客 2248

javaScript实现倒计时功能

目录一、主要思路二、css样式三、html代码四、js内容五、完整代码展示六、效果展示1.通过内置时间函数实例化日期对象获取当前时间 new Date。2.因为时间无法减去时间，有可能生成负数，所以采用时间戳的方法得到毫秒数形式的剩余时间，然后再把剩余时间转换为天、时、分、秒格式。3.最后把所获得的内容赋值给定义的变量。主要为了内容在页面展示美观，稍微美化一下。三、html代码定义一个默认格式为JavaScript引入定义变量。四、js内容 1.首先获取html里面的spans里的全部标签

qq_65715980的博客 1万+