Date實戰案例：倒計時&日曆

時間  2019-11-29
標籤 date 實戰 案例 倒計時 日曆 简体版
原文   原文鏈接

Date實戰案例倒計時和日曆控件，分享案例的核心思想，應用Date的方法，主要應用的date方法以下：javascript

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

案例一：倒計時css

倒計時功能最典型的應用就是咱們在電商App上看見的各類搶購倒計時，以及什麼跨年倒計時呀，活動倒計時等等。倒計時的核心思想：就是計算目標時間和當前時間的一個時間差，咱們先看本案例效果圖：java

以計算距離2019年倒計時爲例，下面是代碼分享：

`app

<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>
複製代碼

` 案例說明：經過代碼，咱們能夠看出來，在計算時間差的方式，主要是以目標時間差的毫秒減去當前時間的毫秒方式來計算。而後把求出來的時間差計算有多少個月，多少天，多少小時，多少分，多少秒，在這個計算過程當中就是簡單粗暴的加減乘除了。編輯器

案例二：日曆控件字體

日曆控件是咱們開發中常常使用的，典型應用就是選擇一個時間，好比在作管理類系統開發時，常常須要選擇一個開始時間和結束時間，用來作一個查詢的區間範圍，請看效果圖：flex

日曆控件的核心思想就是 獲取時間，所以咱們在開發的過程當中就圍繞該思想進行擴展。廢話很少說，先看代碼分享：

`this

<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查看步驟，這樣更易於理解。spa

結語debug

在本次分享的案例有着很是高的實戰意義與價值，喜歡的同窗能夠點波關注和贊，以示鼓勵，十分感謝。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程