广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >js如何实现倒计时
  • 506
分享到

js如何实现倒计时

2024-04-02 19:04:59 506人浏览 安东尼
摘要

这篇文章将为大家详细讲解有关js如何实现倒计时,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。首先呢,开始写之前一定要理清楚思路,思路清晰了,那写起来就容易多了,下面我分了

这篇文章将为大家详细讲解有关js如何实现倒计时,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

首先呢,开始写之前一定要理清楚思路,思路清晰了,那写起来就容易多了,下面我分了几个步骤:

1.获取当前的时间,并且定义结束的时间

2.用求未来时间和当前时间的时间差,并且求出时分秒

3.设置定时器,让时间每秒递减

var div = document.getElementsByTagName("div")[0];
      var timer = setInterval(timers, 1000);

      function timers() {
        //获取现在的时间
        var now = new Date();
        //获取你想要的未来时间
        var future = new Date("2017/05/10");
        var time = future.getTime() - now.getTime();
        //获取距离的天数
        var day = parseInt(time / 24 / 60 / 60 / 1000);
        //获取距离的小时
        var hour = parseInt(time / 1000 / 60 / 60 % 24);
        //获取分
        var minute = parseInt(time / 1000 / 60 % 60);
        //获取秒
        var sec = parseInt(time / 1000 % 60);
        if(time < 0) {
          div.innerhtml = "距离苹果发布会还有00天00小时00分00秒000毫秒";
          clearInterval(timer);
          return;
        }
        //注意点:当时间小于10的时候,要在前面补0
        div.innerHTML = "距离结束时间还有" + (day < 10 ? ("0" + day) : day) + "天" + (hour < 10 ? ("0" + hour) : hour) + "小时" + (minute < 10 ? ("0" + minute) : minute) + "分" + (sec < 10 ? ("0" + sec) : sec) + "秒";
      }

关于“js如何实现倒计时”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: js如何实现倒计时

本文链接: https://www.lsjlt.com/news/66329.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • js如何实现倒计时
    这篇文章将为大家详细讲解有关js如何实现倒计时,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。首先呢,开始写之前一定要理清楚思路,思路清晰了,那写起来就容易多了,下面我分了...
    99+
    2022-10-19
  • js定时器如何实现倒计时效果
    这篇文章主要介绍了js定时器如何实现倒计时效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下日期函数倒计时 =  用 ...
    99+
    2022-10-19
  • js如何实现防刷新的倒计时
    这篇文章主要为大家展示了“js如何实现防刷新的倒计时”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“js如何实现防刷新的倒计时”这篇文章吧。最近在维护考试系统,在...
    99+
    2022-10-19
  • js如何实现酷炫倒计时动画
    这篇“js如何实现酷炫倒计时动画”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“js如何实现酷炫倒计时动画”文章吧。<!...
    99+
    2023-07-02
  • JS怎么实现倒计时功能
    本篇内容主要讲解“JS怎么实现倒计时功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS怎么实现倒计时功能”吧!HTML代码:<div id=...
    99+
    2022-10-19
  • js实现酷炫倒计时动画
    本文实例为大家分享了js实现酷炫倒计时动画的具体代码,供大家参考,具体内容如下 前段时间和朋友去音乐餐厅吃饭,中间有个活动,然后看到他们软件公众号H5有个活动开始的倒计时的动画效果,...
    99+
    2022-11-13
  • js如何倒计时功能
    这篇文章主要介绍“js如何倒计时功能”,在日常操作中,相信很多人在js如何倒计时功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”js如何倒计时功能”的疑惑有所帮助!接下来,...
    99+
    2022-10-19
  • JS实现简单网页倒计时器
    制作一个简单的网页倒计时器(js原生代码),供大家参考,具体内容如下 实现一个简单的网页倒计时(距离xx年x月x日还剩多少时间),效果是这样的 首先HTML代码部分,我们需要简单编...
    99+
    2022-11-13
    JS网页倒计时器 JS倒计时器 JS网页倒计时
  • 如何使用原生js实现倒计时功能
    这篇文章给大家分享的是有关如何使用原生js实现倒计时功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。<!DOCTYPE html><html&nbs...
    99+
    2022-10-19
  • js如何实现短信发送倒计时功能
    这篇文章将为大家详细讲解有关js如何实现短信发送倒计时功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。本文实例为大家分享了js短信发送倒计时的具体代码,供大家参考,具体...
    99+
    2022-10-19
  • 原生js怎样实现倒计时功能
    这篇文章主要介绍原生js怎样实现倒计时功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!思路:(1)获取日期对象、现在距离1970年的毫秒数、2018年距离1970年的毫秒数、201...
    99+
    2022-10-19
  • js实现倒计时的方式有哪些
    小编给大家分享一下js实现倒计时的方式有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一般倒计时的时间都是后台传来的然后渲染...
    99+
    2022-10-19
  • js实现支付倒计时返回首页
    支付倒计时返回首页案例简介:在首页绑定一个按钮跳转到另一个页面,用到了简单的js语法,getElementsByTagName、location.href等。 index.html ...
    99+
    2022-11-12
  • 如何实现VBS倒计时
    这篇文章给大家分享的是有关如何实现VBS倒计时的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。以下内容为程序代码: <script language="VBScript">...
    99+
    2023-06-08
  • php如何实现倒计时
    本文操作环境:Windows7系统、PHP7.1版、DELL G3电脑php如何实现倒计时?php实时倒计时功能实现方法详解具体如下:这几天公司要做一个限时购物的功能.这就要做到倒计时,要有实时的倒计时.要求:1) 要有小时分钟秒的实时倒计...
    99+
    2015-09-03
    php 倒计时
  • jQuery如何实现倒计时
    这篇文章将为大家详细讲解有关jQuery如何实现倒计时,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体代码如下所示:<!DOCTYPE html>...
    99+
    2022-10-19
  • javascript如何实现倒计时
    这篇“javascript如何实现倒计时”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“javascript如何实现倒计时”文...
    99+
    2023-07-02
  • JS支付页面倒计时的实现示例
    js简单实现支付页面跳转: 点击支付,跳出提示框,点击确定跳转支付成功页面二,从10开始倒计时,跳转到主页面,主页面连接到百度页面 页面1,代码如下: <!DOCTYPE ht...
    99+
    2022-11-13
  • 基于JS如何实现01支付后的10秒倒计时
    这篇文章主要介绍“基于JS如何实现01支付后的10秒倒计时”,在日常操作中,相信很多人在基于JS如何实现01支付后的10秒倒计时问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”基于JS如何实现01支付后的10秒...
    99+
    2023-07-05
  • js如何通过Date对象实现倒计时动画效果
    小编给大家分享一下js如何通过Date对象实现倒计时动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!js通过Date对象实...
    99+
    2022-10-19
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作