//申明一个定时器
let endInterval;
//结束时间(毫秒数,这里是距离 1970 年 1 月 1 日至今的毫秒数)
let endSeconds;
//结束时间差
const ENDTIME = 10 * 1000;
window.onload = function () {
 
  //当页面加载的时候,获取当前加载页面时刻的当前时间,再加上我们需要的倒计时间,注意这里全都是毫秒数,。
  endSeconds= new Date().getTime() + ENDTIME;
  //开始定时器
  endInterval = setInterval(timeItev, 500);
}
function timeItev() {
  //计算时间差,在定时器里面不停获取到新的new Date(),用end-new这个值就会一直变小
  let nowDate=new Date(endSeconds - new Date().getTime());
  //转化为分钟和秒钟
  let min = nowDate.getMinutes();
  let sec = nowDate.getSeconds();
  //把时间设置到你需要的标签 上面
  $("#time").html(`${min}:${sec}`)
  if(min==0 && sec==0){
    clearInterval(endInterval)
    console.log("定时器结束")
  }
}

js如何设置一个倒计时的更多相关文章

  1. 18 行 JS 代码编一个倒时器

    有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备.不管你是否有一次约会,销售.促销.或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的 ...

  2. JS 代码编一个倒时器

    有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备.不管你是否有一次约会,销售.促销.或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的 ...

  3. (Demo分享)利用JavaScript(JS)做一个可输入分钟的倒计时钟功能

    利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...

  4. js获取上一个月、下一个月格式为yyyy-mm-dd的日期

    /** * 获取上一个月 * * @date 格式为yyyy-mm-dd的日期,如:2014-01-25 */ function getPreMonth(date) { var arr = date. ...

  5. [jQuery编程挑战]006 生成一个倒计时效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  6. php中向前台js中传送一个二维数组

    在php中向前台js中传送一个二维数组,并在前台js接收获取其中值的全过程方法: (1),方法说明:现在后台将数组发送到前台 echo json_encode($result); 然后再在js页面中的 ...

  7. 用node.js express设置路径后 子路径下的页面访问静态资源路径出问题

    在routes/news_mian.js 设置了访问news_main.html 的路径 '/',通知设置一个访问news-page.html的子路径'/newspage'子路径.但是在访问loacl ...

  8. 面试题之(js实现当年剩余时间倒计时程序)

    js实现当年剩余时间倒计时程序,请看代码: <script> function counter() { var date = new Date(); var year = date.get ...

  9. js实现多个倒计时并行 js拼团倒计时

    本文是对类似于拼团,多个商品每个都有各自的js倒计时,一开始接到接到这个需求也是头疼了一阵子,如果是在商品列表少的时候完全就可以写成死的,固定的变量,写几个定时器就ok了, 但是这次数据是活的,看一些 ...

随机推荐

  1. ubuntu 上的python不能解析jpeg,png?

    在安装pillow之前需要先安装以下支持包1.apt-get install libjpeg-dev libfreetype6-dev zlib1g-dev libpng12-dev2.安装pillo ...

  2. 查看db连接数sql

    /****** Object: StoredProcedure [dbo].[SP_Conn] Script Date: 12/09/2018 19:03:28 ******/ SET ANSI_NU ...

  3. [SCOI2009]windy数 BZOJ1026 数位dp

    题目描述 windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道, 在A和B之间,包括A和B,总共有多少个windy数? 输入输出格式 输 ...

  4. C++_代码重用4-多重继承

    继承使用时要注意,默认是私有派生.所以要公有派生时必须记得加关键字Public. MI(Multi Inheritance)会带来哪些问题?以及如何解决它们? 两个主要问题: 从两个不同的基类继承同名 ...

  5. 选择排序 Selection Sort

    选择排序 Selection Sort 1)在数组中找最小的数与第一个位置上的数交换: 2)找第二小的数与第二个位置上的数交换: 3)以此类推 template<typename T> / ...

  6. 1144G Two Merged Sequences ( 贪心+构造)

    题目:https://codeforces.com/problemset/problem/1144/G 题意: 将一个序列分成两个序列,两个序列中元素的相对顺序保持和原序列不变,使得分出的两个序列一个 ...

  7. eclipse 安装 scala

    1.官网下载地址 http://scala-ide.org/download/current.html 目前最新的版本 http://download.scala-ide.org/sdk/lithiu ...

  8. [转] NOI, NOIP, IOI, ACM

    [From] http://blog.csdn.net/chenbean/article/details/38928243 NOI是教育部和中国科协委托中国计算机学会举办了全国青少年计算机程序设计竞赛 ...

  9. PIE SDK地图图层渲染方案管理

    1. 功能简介 在数据种类较多.渲染规则复杂的情况下,逐个设置其渲染方式是一件繁琐的工作.PIE SDK提供了一种省力省心的办法, PIE SDK提供栅格和矢量数据渲染方案的打开与保存.能够将配色方案 ...

  10. proxyee down源码分析

    proxyee down下载速度不错, 底层使用netty+多线程,最近在看netty网络方面的应用,正好这是个案例 源代码地址 https://github.com/proxyee-down-org ...