倒计时网上一大堆,所以也没有什么好说的,支持:1.年,月,日,天,时分秒等倒计时。

JS代码如下:

/*
* js简单的倒计时
* @param {date,obj} 日期 对象格式
*/ function CountDown(date,obj) {
var self = this;
self.date = date;
self.obj = obj;
self._init();
}; $.extend(CountDown.prototype,{ _init: function(){
var self = this,
obj = self.obj;
var dateTime = self._calculateTime(); if(obj.sec) {
$(obj.sec).html(dateTime.sec);
}
if(obj.mini) {
$(obj.mini).html(dateTime.mini);
}
if(obj.hour) {
$(obj.hour).html(dateTime.hour);
}
if(obj.day) {
$(obj.day).html(dateTime.day);
}
if(obj.month) {
$(obj.month).html(dateTime.month);
}
if(obj.year) {
$(obj.year).html(dateTime.year);
}
// setInterval 会有误差 大概每小时有5秒的误差 故用setTimeout做计时器 精准更高
t && clearTimeout(t);
var t = setTimeout(function(){
self._init();
}, 1000);
},
_zero: function(n){
var n = parseInt(n,10);
if(n > 0) {
if(n < 10) {
n = "0" + n;
}
return String(n);
}else {
return n = "00";
}
},
_calculateTime: function(){
var self = this,
date = self.date || Date.UTC(2050, 0, 1);
var end = new Date(date),
now = new Date(); // getTimezoneOffset() 方法可返回格林威治时间和本地时间之间的时差,以分钟为单位。
var leftTime = Math.round((end.getTime() - now.getTime())/1000) + end.getTimezoneOffset() * 60;
var obj = {
sec: "00",
mini: "00",
hour: "00",
day: "00",
month: "00",
year: "0"
};
if(leftTime > 0) {
obj.sec = self._zero(leftTime % 60);
obj.mini = Math.floor(leftTime / 60) > 0 ? self._zero(Math.floor(leftTime / 60) % 60) : "00";
obj.hour = Math.floor(leftTime / 3600) > 0 ? self._zero(Math.floor(leftTime/3600) % 24) : "00";
obj.day = Math.floor(leftTime / (24 * 3600)) > 0 ? self._zero(Math.floor(leftTime / (24*3600)) % 30) : "00";
obj.month = Math.floor(leftTime / (30 * 24 * 3600)) > 0 ? self._zero(Math.floor(leftTime / (30 * 24 * 3600)) % 12) : "00";
//年份,按按回归年360天秒算
obj.year = Math.floor(leftTime / (360 * 30 * 24 * 3600)) > 0 ? Math.floor(leftTime / (360 * 30 * 24 * 3600)) : "0";
}
return obj;
}
});

假如HTML如下:

<span class="hour"></span>时 <span class="mini"></span>分 <span class="sec"></span>秒

那么我们可以这样初始化代码:

var d = 1419509471000;
//var d = Date.UTC(2030, 6, 27, 16, 34);
var obj = {
sec: $(".sec"),
mini: $(".mini"),
hour: $(".hour")
}
new CountDown(d, obj);

JSfiddler倒计时演示

JS简单的倒计时(代码优化)的更多相关文章

  1. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  2. js简单 图片版时钟,带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  3. js简单操作Cookie

    贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...

  4. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  5. Tourist.js – 简单灵活的操作指南和导航插件

    Tourist.js 是一个基于 Backbone 和 jQuery 开发的轻量库,帮助你在应用程序创建简单易用的操作指南和导航功能.相比网站,它更适合用于复杂的,单页网站类型的应用程序.Touris ...

  6. JavaScript学习笔记-简单的倒计时跳转页面

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  7. js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  8. Gulp.js - 简单、直观的自动化项目构建工具

    Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...

  9. JS实现自动倒计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. SqlSession对象之ResultSetHandler

    ResultSetHandler是Mybatis中的另一重要接口,它的代码如下所示: public interface ResultSetHandler { <E> List<E&g ...

  2. Warning:java:资源1.5已过时,将在未来所有发行版中删除

    idea运行提示错误信息:![](http://luzhiming.top/zb_users/upload/2018/10/201810132314159180803.png)解决办法如下:第一步![ ...

  3. JSTL核心标签库——错误处理标签

    <c:catch>标签 Demo: 错误发生时,不转发至其他网页来显示错误信息,而在当前网页捕捉异常,并显示相关信息. <%@page contentType="text/ ...

  4. Hibernate 拦截器

    拦截器 你已经学到,在 Hibernate 中,一个对象将被创建和保持.一旦对象已经被修改,它必须被保存到数据库里.这个过程持续直到下一次对象被需要,它将被从持久的存储中加载. 因此一个对象通过它生命 ...

  5. 使用 HPC Pack 为 Azure 中的 Windows HPC 工作负荷创建和管理群集的选项

    利用 Microsoft HPC Pack 和 Azure 的计算与基础结构服务,创建和管理基于云的高性能计算 (HPC) 群集. HPC Pack 是在 Azure 和 Windows Server ...

  6. MySQL主从复制异步原理以及搭建

    MySQL主从复制的原理: 1.首先,MySQL主库在事务提交时会把数据变更作为时间events记录在二进制日志文件binlog中:MySQL主库上的sync_binlog参数控制Binlog日志以什 ...

  7. tidb导入大量数据报错:statement count 5001 exceeds the transaction limitation, autocommit = false

    这是Tidb数据库事务提交数量达到上限的一种报错:因为tidb是分布式的数据库,tikv使用了底层的强一致性协议.这是分布式数据库必然遇到的一个问题,我们可以调整这个值:在tidb的配置文件里面“st ...

  8. Tidb数据库报错:Transaction too large

    Tidb是一个支持ACID的分布式数据库,当你导入一个非常大的数据集时,这时候产生的事务相当严重,并且Tidb本身对事物的大小也是有一个严格的控制. 有事务大小的限制主要在于 TiKV 的实现用了一致 ...

  9. pip安装python模块遇到一直出现retrying的问题

    最近安装python模块,遇到这样的一个问题如图所示: Retrying (Retry(total=4, connect=None, read=None, redirect=None, status= ...

  10. HTML常用标签大全