//申明一个定时器
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. JDBC_ResultSet结果集用法_游标原理_关闭连接问题

    依次关闭使用对象及连接 ResultSet---Statement--Connectionimport java.sql.Connection;import java.sql.DriverManage ...

  2. Axure 原型图

    Axure RP 9最新版软件及汉化包下载 https://www.axure.com.cn/78629/   点击下载 lang语言包放在根目录即可 Axure各种版本注册码 | 最新Axure R ...

  3. Tomcat 配置文件的解析

    转载:https://www.cnblogs.com/sunshine-1/p/8990044.html https://www.cnblogs.com/kismetv/p/7228274.html ...

  4. P4592 [TJOI2018]异或 (可持久化Trie)

    [题目链接] https://www.luogu.org/problemnew/show/P4592 题目描述 现在有一颗以\(1\)为根节点的由\(n\)个节点组成的树,树上每个节点上都有一个权值\ ...

  5. 【算法笔记】B1029 旧键盘

    1029 旧键盘 (20 分) 旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及实际被输入的文字,请你列出肯定坏掉的那些键. 输入格式: 输入在 2 ...

  6. dotnet体系结构

    一.C#与.NET的关系 1.粗略地説,.net是一种在Windows平台上的编程架构————一种API. 2.C#编译器专门用于.net,这表示用C#编写的所有代码总是使用.NET Framewor ...

  7. Oracle 设定字符集

    在Redhat上安装Oracle 10g没有设定字符集,采用的是操作系统默认字符集:WE8ISO8859P1,将字符集修改为:ZHS16GBK.由于过程不可逆,首先需要备份数据库. 1.数据库全备 2 ...

  8. 1、在linux服务器centos虚拟机搭建nginx网站

    1.搭建linux虚拟机 具体参考 http://jingyan.baidu.com/article/86112f135e584a273697876b.html (如何在WIN7下进行LINUX虚拟机 ...

  9. mysql 数据库导入数据报错MySQL server has gone away解决办法

    mysql 数据库导入数据报错MySQL server has gone away解决办法: 进入数据库执行以下命令即可: set global wait_timeout = 2880000; set ...

  10. PIE SDK矢量数据的查询

    1.功能简介 矢量数据查询有属性查询和空间几何查询,下面对矢量数据的属性查询和空间查询做介绍 2.功能实现说明 2.1. 矢量数据的属性和空间查询 2.2. 实现思路及原理说明 第一步 得到要查询的图 ...