JS简单的倒计时(代码优化)
倒计时网上一大堆,所以也没有什么好说的,支持: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);
JS简单的倒计时(代码优化)的更多相关文章
- JS全选功能代码优化
原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...
- js简单 图片版时钟,带翻转效果
js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- js简单操作Cookie
贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...
- js简单弹出层、遮罩层
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...
- Tourist.js – 简单灵活的操作指南和导航插件
Tourist.js 是一个基于 Backbone 和 jQuery 开发的轻量库,帮助你在应用程序创建简单易用的操作指南和导航功能.相比网站,它更适合用于复杂的,单页网站类型的应用程序.Touris ...
- JavaScript学习笔记-简单的倒计时跳转页面
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .
js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...
- Gulp.js - 简单、直观的自动化项目构建工具
Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...
- JS实现自动倒计时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- 阿里云数据库配置学习笔记(二):下载并配置MySQL数据库
参考资料:阿里云官方文档 2018-02-20 一.MySQL数据库的下载 在Ubuntu环境下安装MySQL数据库十分简单 在命令行中输入 sudo apt-get update(更新软件源,预防出 ...
- js文字滚动效果
function (global) { var logo = document.getElementById('logo'); var text = document.createTextNode(' ...
- Css中display:inline-block用法详解
display:block就是将元素显示为块级元素 block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div&g ...
- 设计模式(19)--Observer(观察者模式)--行为型
作者QQ:1095737364 QQ群:123300273 欢迎加入! 1.模式定义: 观察者模式是对象的行为模式,又叫发布-订阅(Publish/Subscribe)模式.模型-视图( ...
- js-ES6学习笔记-函数的扩展
1.ES6函数参数的默认值,直接写在参数定义的后面.参数变量是默认声明的,所以不能用let或const再次声明. function Point(x = 0, y = 0) { this.x = x; ...
- CentOS7上搭建LDAP-PDC并且将windows 2008 R2加入LDAP-PDC域
由于测试原因,要涉及到将windows机器加入到ldap域,所以查看各种文档进行ldap-pdc域的搭建,并成功将windows 2008r2加入到ldap-pdc域中.下面简单记录一下搭建过程 Li ...
- maven一模块字段调用另一个模块数据生成下拉框
店铺运营数据录入表实现的下拉框实现 从片区管理中提取分区数据,在招商管理(MIS)模块中获取并以下拉框的形式展现 ctrl类: 1.首先在ctrl类注入需提取另一模块字段的serviceclient接 ...
- Android热修复之 - 阿里开源的热补丁
1.1 基本介绍 我们先去github上面了解它https://github.com/alibaba/AndFix 这里就有一个概念那就AndFix.apatch补丁用来修复方法,接下来我们看看到底是 ...
- LeetCode题解之Climbing Stairs
1.题目描述 2.问题分析 使用动态规划. 3.代码 int climbStairs(int n) { ){ return n; } ]; dp[] = ; dp[] = ; dp[] = ; ; i ...
- Oracle EBS OM 取消订单
DECLARE l_header_rec OE_ORDER_PUB.Header_Rec_Type; l_line_tbl OE_ORDER_PUB.Line_Tbl_Type; l_action_r ...