当前位置: 首页 > 前端笔记 > JAVASCRIPTS > 原生JS对时间的格式化以及日期倒计时实例解析
2014年28七月

原生JS对时间的格式化以及日期倒计时实例解析

一直用jQuery插件,对时间的处理就成了短板,今天有时间就系统的学习下JS对时间的处理。一下是代码,注释也写在代码中了,如果有错误请指正。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生JS对时间的格式化以及日期倒计时实例解析</title>
</head>

<body>
<h1 style="width:300px; margin:100px auto 0; font-size:16px;font-family:Verdana,'Microsoft YaHei'; text-align:center;">距离2016-07-30 00:00:00还有:</h1>
<div id="timer" style="width:300px; height:100px; margin:10px auto; text-align:center; font-family:Verdana,'Microsoft YaHei'; font-size:30px; font-weight:bold; background:#222222; color:#ffffff; line-height:100px; box-shadow:5px 5px 0 #999999; border-radius:5px;"></div>
<script>
var formatChinaDateTime = function(DateTime, type){
	var yearIndex = type.indexOf("yyyy"); //通过指定的格式获取年份所在位置
	var year = DateTime.substr(yearIndex, 4); //取得4位数年份
	var monthIndex = type.indexOf("mm"); //月
	var month = parseInt(DateTime.substr(monthIndex, 2))-1; //月份是从0开始(0-11),所以要减去1
	var dayIndex = type.indexOf("dd"); //日
	var day = parseInt(DateTime.substr(dayIndex, 4));
	var hourIndex = type.indexOf("hh"); //时
	var hour = parseInt(DateTime.substr(hourIndex, 2));
	var minuteIndex = type.indexOf("mm"); //分
	var minute = parseInt(DateTime.substr(minuteIndex, 2));
	var secondIndex = type.indexOf("ss"); //秒
	var second = parseInt(DateTime.substr(secondIndex, 2));
	var newDateTime = new Date(year,month,day,hour,minute,second); //转化格式 "Sat Jul 30 2016 00:07:00 GMT+0800"
	return newDateTime;
};
var formatSecond = function(ms, type){ //将毫秒转化成指定格式
	var day = parseInt(ms/(1000*60*60*24)); //天
	var hour = parseInt((ms%(1000*60*60*24))/(1000*60*60)); //小时
	hour = hour < 10 ? "0"+hour : hour; //个位补0
	var minute = parseInt((ms%(1000*60*60*24))%(1000*60*60)/(1000*60)); //分
	minute = minute < 10 ? "0"+minute : minute;
	var second = parseInt((ms%(1000*60*60*24))%(1000*60*60)%(1000*60)/1000); //秒
	second = second < 10 ? "0"+second : second;
	var newType = type.replace("dd",day); //根据格式替换
	newType = newType.replace("hh", hour);
	newType = newType.replace("mm", minute);
	newType = newType.replace("ss", second);
	return newType; //返回你想要的格式
};
var getDiff = function(DateTime, type){ //求当前时间和指定时间之差函数
	var today = new Date(); //当前时间
	var future = formatChinaDateTime(DateTime, type); //格式化指定时间
	var diff = future.getTime()-today.getTime(); //getTime()是转化成时间戳(毫秒),获取差值
	diff = formatSecond(diff, "dd天 hh:mm:ss"); //转成指定格式
	return diff; //返回差值 单位:毫秒
};
var innerAct = function(){
	var diff = getDiff("2016-07-30 00:00:00", "yyyy-mm-dd hh:mm:ss"); //计算差值 
	document.getElementById("timer").innerHTML = diff; //指定位置插入文字
};
var autoTimer = function(){ //自动计时
	setTimeout(function(){
		innerAct();
		autoTimer();
	}, 1000);
};
var init = function(){ //初始化
	innerAct();
	autoTimer();
};
init();
</script>
</body>
</html>

查看在线演示地址:原生JS对时间的格式化以及日期倒计时实例解析.html

文章信息

  • 发布日期:2014年07月28日 23:42:44
  • 固定地址:http://www.estorm.cn/notes/javascripts/2014-07-28/js-format-date-time.html