html代码:

<div class="box">距离下班还有:<span>01:01:30</span></div>

css代码:

*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 40px;
margin: 30px auto;
text-align: center;
line-height: 40px;
font-size: 26px;
font-weight: bold;
border: 2px dashed darkred;
background: lightcyan;
}
.box span{
padding-left: 10px;
color: darkblue;
}
js代码:
var span =
document.getElementsByClassName('box')[0].getElementsByTagName('span')[0];
var timer = window.setInterval(record,1000);
function record(){
var curDate = new Date();//获取当前的时间
var targetDate = new Date('2016/09/22 18:14:00'); //目标时间,先转化成时间格式的对象才能使用getTime()方法
var curDate1970 = curDate.getTime(); //当前时间距离1970的ms数
var targetDate1970 = targetDate.getTime(); //目标距离1970的ms
var time = targetDate1970 - curDate1970; //时间差
//换算单位把time换算成h/m/s
//先换算成小时
var h = Math.floor( time/(1000*60*60) ); // 向下取整
// 换算分钟 => 需要把h小时所占用的ms数减去,然后再换算分钟
var m = Math.floor( (time - h*60*60*1000)/(1000*60) );
// 换算s => 把小时和分钟所占用的ms数都减去,然后再换算成s
var s = Math.floor( (time - h*60*60*1000 - m*60*1000)/1000 );
if(h + m + s <= 0 ){
window.clearInterval(timer);
span.innerHTML = "00:00:00"
return;
}
span.innerHTML = addZero(h) + ":" + addZero(m) + ":" + addZero(s);
}
function addZero(n){ //给不足10的数前面添加一个0
return n < 10 ? '0' + n : n;
}
//date.getTime(); //当前的这个date时间距离1970年1月1日 8点的毫秒数
注:var date2 = new Date('2016/09/24 17:00:00');
console.log(date2);
//如果在new的过程中括号内添加了一个时间格式的字符串,那么就是把这个字符串转化成时间对象.然后就可以使用getFullYear()等方法了
date2.getFullYear();

原生js实现倒计时的更多相关文章

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

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

  2. 原生 JS 实现手机验证码倒计时

    可以使用 pointer-events 来阻止元素成为鼠标事件的 target.html5 新增操作元素 class 类名的方式 classList. classList 方法 add(value): ...

  3. js时间倒计时

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

  4. 原生JS实现的h5小游戏-植物大战僵尸

    代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...

  5. 使用原生JS,实现鼠标点击爱心效果 !!!

    使用原生JS,实现鼠标点击爱心效果 !!! 引言: 在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的.其实实现起来也很简单,下面一起来学习一下吧.文末附上 ...

  6. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  7. 常用原生JS方法总结(兼容性写法)

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  8. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  9. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

随机推荐

  1. 中国程序化购买广告解析:RTB/DSP/Ad Exchange/SSP/DMP,思维导图

    中国程序化购买广告解析:RTB/DSP/Ad Exchange/SSP/DMP 概念 程序化购买( Programmatic Buying):通过数字化.自动化.系统化的方式改造广告主.代理公司.媒体 ...

  2. JMeter:全面的乱码解决方案

    中文乱码一直都是比较让人棘手的问题,我们在使用Jmeter的过程中,也会遇到中文乱码问题 接口:http://127.0.0.1:8090/test 这个接口有一个参数name,返回结果就是你传的na ...

  3. 浅谈class私有变量

    class 的前世今生 在 es6 之前,虽然 JS 和 Java 同样都是 OOP (面向对象)语言,但是在 JS 中,只有对象而没有类的概念. 在 JS 中,生成实例对象的传统方法是通过构造函数, ...

  4. MySQL笔记(六)游标练习

    23.3.1 Trigger Syntax and Examples 意义不明的几道练习,留着备用. 感觉不好写,而且难以调试..不知道以后会不会有实际的应用场景. 环境:MySQL 笔记(三)由 t ...

  5. 简单的HTML5 canvas游戏工作原理

    HTML5已经不是一个新名词.它看上去很cool,有很多feature,大多数人普遍看好它的发展.对于我来说,最感兴趣的是它的canvas标签,可以结合Javascript来绘制游戏画面. 我们可以在 ...

  6. django admin 使用

    Django admin 中一些常用的设置 Django自带的后台管理是Django明显特色之一,可以让我们快速便捷管理数据.后台管理可以在各个app的admin.py文件中进行控制.以下是我最近摸索 ...

  7. 20145101《Java程序设计》第9周学习总结

    20145101<Java程序设计>第9周学习总结 教材学习内容总结 第十六章 整合数据库 数据库本身是个独立运行的应用程序 撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增 ...

  8. 20145335郝昊《网络攻防》Exp4 MS11_050

    20145335郝昊<网络攻防>Exp4 MS11_050 实验内容 初步掌握平台matesploit的使用 了解漏洞MS11_050漏洞:use-after-free漏洞,即对象被释放之 ...

  9. 2018-2019-1 20189218《Linux内核原理与分析》第七周作业

    task_struck数据结构 在Linux内核中,通过task_struct这个结构体对进程进行管理,我们可以叫他PCB或者进程描述符.这个结构体定义在include/linux/sched.h中. ...

  10. 使用PopupWindow弹窗提醒

    一.新建view.xml 注意里面的控件要一个一个的定义离上一个控件的距离,即margin_top,不然最后的效果是紧缩的 二.在java中定义两个变量 1.View view=null: 2.pop ...