Date实战案例倒计时和日历控件，分享案例的核心思想，应用Date的方法，主要应用的date方法如下：

Date.now()
Date.parse()
getFullYear()
getMonth()
getDate()
getDay()
setDate()

案例一：倒计时

倒计时功能最典型的应用就是我们在电商App上看见的各种抢购倒计时，以及什么跨年倒计时呀，活动倒计时等等。倒计时的核心思想：就是计算目标时间和当前时间的一个时间差，我们先看本案例效果图：

以计算距离2019年倒计时为例，下面是代码分享：

`

<style type="text/css">
		.div-date{
			height: 90px;
			width: 600px;
			text-align: center;
			line-height: 90px;
			margin: auto;
			border: 1px solid #eee;
		}
</style>
<body>
    <--倒计时时间显示的标签-->
	<div class="div-date">
	</div>
</body>
<script type="text/javascript">
    function toDou(n){  // 用于补0的方法
        if(n<10){
            return '0'+n;
        }else{
            return ''+n;
        }
	}
	function countDown (targetDate) {	// 参数targetDate是目标时间
			var targetDateMs = Date.parse(targetDate); // 目标时间毫秒数
			var myDate = new Date()
			var curDateMs = Date.now();	// 获取当前时间毫秒数	方法1
			// var curDateMs = Date.parse(myDate)	// 获取当前时间的毫秒数 方法2
			
			if (curDateMs != targetDateMs) {	// 当前时间只要不等于目标时间毫秒数
				var timeDifference = targetDateMs-curDateMs;	// 当前时间与目标时间的时间差毫秒数
			
				var monthTotalMs = 1000 * 60 * 60 * 24 * 30;	// 月毫秒总数
				var dayTotalMs = 1000 * 60 * 60 * 24;	// 1天毫秒总数
				var hoursTotalMs = 1000 * 60 * 60;	 // 1小时毫秒总数
				var minutesTotalMs = 1000 * 60;	//	1分钟毫秒总数
				
				var month = Math.floor(timeDifference / monthTotalMs); //计算月
				var surplusDayMs = timeDifference - (month * monthTotalMs);	// 计算减去月后剩余的毫秒数
				var day = Math.floor(surplusDayMs / dayTotalMs);	// 计算天
				
				var surplusHoursMs = surplusDayMs - (day * dayTotalMs);	// 计算减去天后剩余的毫秒总数
				var hours = Math.floor(surplusHoursMs / hoursTotalMs);	// 计算小时
				var surplusMinutesMs = surplusHoursMs - (hours * hoursTotalMs); // 计算减去小时后还剩余的毫秒总数
				
				var minutes = Math.floor(surplusMinutesMs / minutesTotalMs);// 计算分
				var seconds = Math.ceil((surplusMinutesMs - (minutes * minutesTotalMs)) / 1000);	//剩余多少秒
				
				return `距离2019年倒计时：${month}月${day}天${toDou(hours)}时${toDou(minutes)}分${toDou(seconds)}秒`
			} else {	// 等于就停止计时器
				clearInterval(time);
			}
	    }
	    
	var time = setInterval(function(){
		document.querySelector('.div-date').innerText = countDown ('2019-01-01 00:00:00');
	}, 1000)
</script>

` 案例说明：通过代码，我们可以看出来，在计算时间差的方式，主要是以目标时间差的毫秒减去当前时间的毫秒方式来计算。然后把求出来的时间差计算有多少个月，多少天，多少小时，多少分，多少秒，在这个计算过程中就是简单粗暴的加减乘除了。

案例二：日历控件

日历控件是我们开发中经常使用的，典型应用就是选择一个时间，比如在做管理类系统开发时，经常需要选择一个开始时间和结束时间，用来做一个查询的区间范围，请看效果图：

日历控件的核心思想就是获取时间，因此我们在开发的过程中就围绕该思想进行扩展。废话不多说，先看代码分享：

`

<style>
.t1-div{
text-align: center;
}
.date{
	width: 420px;
	margin: auto;
	background-color: #f5f5f5;
	border: 1px solid #eee;
}
.date-head{
	display: flex;
	justify-content: space-between;
	height: 30px;
	line-height: 30px;
	text-align: center;
}
.date-head h3{
	width: 48%;
	border-right: 1px solid #ddd;	
	border-left: 1px solid #ddd;
}
.date-head span{
	width: 25%;
	color: darkgoldenrod;
	cursor: pointer;
}
.date-head span:hover{
	color: darkgoldenrod;
}
.date-head-area dd{
	border-top: 1px solid #ddd;
}
.date-week{
	display: flex;
	flex-wrap: wrap;
	/*justify-content: space-between;*/
}
.date-week span{
	width: 60px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: green;
	box-sizing: border-box;
	border-right: 1px solid #ddd;
	cursor: pointer;
}
.date-week span:last-child{
	border: none;
}
.date-week span:hover{
	color: darkgreen;
}
.date ul{
	display: flex;
	flex-wrap: wrap;
}
.date ul li{
	text-align: center;
	width: 60px;
	box-sizing: border-box;
	height: 30px;
	line-height: 30px;
	border-right: 1px solid #ddd;
	border-top: 1px solid #ddd;
	cursor: pointer;
}
.date ul li:nth-child(7){
	border-right: none;
}
.date ul li:nth-child(14){
	border-right: none;
}
.date ul li:nth-child(21){
	border-right: none;
}
.date ul li:nth-child(28){
	border-right: none;
}
.date ul li:nth-child(35){
	border-right: none;
}
.date ul li:nth-child(42){
	border-right: none;
}
.date ul li:hover{
	color: orangered;
}
</style>
<body>
	<div class="t1-div">
		<input type="text" name="t1" id="t1" />
	</div>
	<div id="date" class="date">
		<dl class="date-head-area">							
		<dt class="date-head">
			<span>上月</span>
			<h3 class="date-title">2018年4月</h3>
			<span>下月</span>
		</dt>
		<dd class="date-week">
			<span>星期日</span>
			<span>星期一</span>
			<span>星期二</span>
			<span>星期三</span>
			<span>星期四</span>
			<span>星期五</span>
			<span>星期六</span>
		</dd>
		</dl>
	</div>
</body>
<script>
var t1 = document.getElementById('t1');

var dateEle = document.getElementById('date');

var dateTitle = document.querySelector('.date-title');

var spans = document.querySelector('.date-head').getElementsByTagName('span');

var oUl = document.createElement('ul');

var curDate = new Date();	//当前日期对象

var curYear = curDate.getFullYear();	// 当前年份

var curMonth = curDate.getMonth();	// 当前月份

active(curMonth);

spans[0].onclick = function () {active(--curMonth)};

spans[1].onclick = function () {active(++curMonth)};

function active (m) {//m参数是当前月
oUl.innerHTML = ''; //这里清空ul的目的是我们点击下月或者上月时要清空ul里的内容

var activeDate = new Date(curYear, m, 1);	//要变化的日期对象,以当前的年月日创建日期对象

//	activeDate.setDate(1);	// setDate设置一个月的某一天
	
var month =	activeDate.getMonth();	// 获取月

	dateTitle.innerHTML = activeDate.getFullYear()+ '年' + (month+1) + '月'
	
var diff = 1 - activeDate.getDay();  // getDay 返回星期几，从0开始

	if (diff == 1) {
		
		diff = -6;
		
	}
	
	activeDate.setDate(diff);	//算出日历起始日期

	for (var i = 0; i < 42; i++) { //
		
		var oLi = document.createElement('li');
		
		var date = activeDate.getDate(); // getDate获取一个月的某一天
		
		oLi.innerHTML = date;	//当前元素是几号
		
		oLi.dateVal = activeDate.getFullYear() + '-' + (activeDate.getMonth()+1) + '-' + date;	//定义自定义属性，用来点击哪一天的时候获取点击对象的日期
		
		oLi.onclick = function () {
			
			t1.value = this.dateVal;	//赋值给input所选中的日期
			
		}
		
		oUl.appendChild(oLi);	// 追加到oUl里面去
		
		if (activeDate.getMonth() != month) {	//判断是不是当前月的日期，如果不是则设置字体颜色#999
			
			oLi.style.color = '#999';
			
		}
	//	console.log(m, month, '比较月份');
		
	//	console.log(date, curDate.getDate(), '比较多少号');
		
		if ((date == curDate.getDate()) && (month == curDate.getMonth())) {	//判断是否是当天，如果是当天的日期给予高亮颜色
			
			oLi.style.color = 'red';
			
		}
		
		activeDate.setDate(date+1);	// 循环设置天加1
		
	}
}

dateEle.appendChild(oUl);
</script>

`在本案例中，因为日期案例相对复杂一些，所以我给代码做了充足的注释，在看案例的同学建议你拷贝代码拿到自己的编辑器里运行，然后debugg查看步骤，这样更易于理解。

结语

在本次分享的案例有着非常高的实战意义与价值，喜欢的同学可以点波关注和赞，以示鼓励，十分感谢。