<script type="text/javascript">
var orign_time = 1496706400;
var leftTime = Date.parse(new Date())/1000;//转化成秒
var maxTime = orign_time-leftTime;
function CountDownTime() {
if (maxTime >=0) {
var days = parseInt(maxTime/60/60/ 24, 10); //计算剩余的天数
 
var hours = parseInt(maxTime/60/60%24, 10); //计算剩余的小时
 
var minutes = parseInt(maxTime/60%60, 10); //计算剩余的分钟
 
var seconds = parseInt(maxTime%60, 10); //计算剩余的秒数
msg = "当前距离下班时间还有"+days+"天"+hours+"时"+minutes+"分"+seconds+"秒"
document.getElementById("timer").innerHTML = msg;
--maxTime
} else {
clearInterval(timer);
alert("时间到,结束!");
}
}
timer = setInterval("CountDownTime()",1000);
</script>
<div id="timer" style="color:red" mce_style="color:red"></div>

先定义目标时间,然后在获取当前时间戳,得到差值,然后转换为相对应的天,小时,分钟,秒数

然后添加定时器,每个一秒钟就执行一次计数方法,相差秒数-1

当差值小于0的时候去除定时器

以下是用到的基础知识点:

js实现定时器,时间倒计时为0后停止的更多相关文章

  1. JS根据服务器时间倒计时

    原文链接:http://caibaojian.com/daojishi-2.html //获取服务器时间 function getSevertime(){ var xmlHttp = new XMLH ...

  2. js中setTimeout() 时间参数为0

    当看到下面 这种setTimeout 设置为0 写法的时候一脸懵逼,完全没用过. var fuc = [1,2,3]; for(var i in fuc){ setTimeout(function() ...

  3. cocos2d JS 利用定时器实现-倒计时功能

    //创建一个定时器 cc.director.getScheduler().schedule(this, this.updates, 1, cc.REPEAT_FOREVER, 0, false, &q ...

  4. js 获取 当前时间 时间差 时间戳 倒计时

    开发web一段时间后发现经常使用时间进行一些操作,比较多的就是获取当前时间.对时间进行比较.时间倒计时.时间戳这些部分,每次去用经常忘总是需要去查询,还是自己总结一下比较靠谱. 获取时间戳的方法: 第 ...

  5. 原生js 当前时间 倒计时代码

    源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...

  6. js正则格式化日期时间自动补0

    原文 js正则格式化日期时间自动补0 背景 时间日期格式化的需求很常见,也有很多工具类转换方法,比如需要将2022-3-4这种日期格式转化为2022-03-04,也就是实现个位数月份或天数日期自动前置 ...

  7. js时间倒计时

    看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...

  8. 【转载】vue.js实现格式化时间并每秒更新显示功能示例

    引用:https://www.jb51.net/article/143351.htm 这篇文章主要介绍了vue.js实现格式化时间并每秒更新显示功能,结合实例形式分析了vue.js时间格式化显示与基于 ...

  9. 【JavaScript基础】Js的定时器(你想看的原理也在哟)

    [JavaScript基础]Js的定时器(你想看的原理也在哟) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 本章是经历 ...

随机推荐

  1. Volley网络框架完全解析(使用篇)

    在Android中,网络请求无非就这两种:HttpURLConnection和HttpClient( Apache),我们在使用时一般都会对它们进行一系列的封装,但是这过程不免有些繁琐,所以,Goog ...

  2. Dynamics CRM 2013 停用和激活按钮的显示与隐藏

    CRM中命令栏上的有些按钮是可以通过权限控制显示和隐藏的,比如新建.保存.保存并关闭.删除等,但惟独激活和停用无法控制,但我们还是可以用权限去控制,只是稍微绕了那么一下. 这里就要涉及到按钮的自定义了 ...

  3. Linux IPC实践(13) --System V IPC综合实践

    实践:实现一个先进先出的共享内存shmfifo 使用消息队列即可实现消息的先进先出(FIFO), 但是使用共享内存实现消息的先进先出则更加快速; 我们首先完成C语言版本的shmfifo(基于过程调用) ...

  4. 《java入门第一季》之面向对象(多态练习)

    接下来经过一个例子,对多态问题加深印象: 猫狗案例. /* 多态练习:猫狗案例 */ class Animal { public void eat(){ System.out.println(&quo ...

  5. Android官方技术文档翻译——清单合并

    本文译自Android官方技术文档<Manifest Merger>,原文地址:http://tools.android.com/tech-docs/new-build-system/us ...

  6. 在多台PC上进行ROS通讯-学习笔记

    首先,致谢易科(ExBot)和ROSWiki中文社区. 重要参考文献: Running ROS across multiple machines http://wiki.ros.org/ROS/Tut ...

  7. 在Android中afinal框架下实现sqlite数据库版本升级的办法

    上一篇文章采用的是SQLiteOpenHelper中的onUpgrade方法实现数据库的升级. 首先获取Context: private Context mContext=this; 然后实现Fina ...

  8. LIRe 源代码分析 4:建立索引(DocumentBuilder)[以颜色布局为例]

    ===================================================== LIRe源代码分析系列文章列表: LIRe 源代码分析 1:整体结构 LIRe 源代码分析 ...

  9. Linux - 有效群组(effective group)与初始群组(initial group),groups,newgrp

    每个使用者在他的 /etc/passwd 里面的第四栏有所谓的 GID ,那个 GID 就是所谓的『初始群组 (initial group) 』!也就是说,当用户一登陆系统,立刻就拥有这个群组的相关权 ...

  10. IOS微信分享功能简单实现

    PS:此文以简单实现功能为主,不足之前还望指点,大神勿喷. 在此之前如何申请微信认证的Key就不说了,公司一般会有人搞 1.首先下载微信SDK:微信SDK下载地址(更多关于微信SDK信息文档请访问官方 ...