📒 博客首頁：?﹏??敬坤的博客 🎈
😊 我只是一個代碼的搬運工 🎃
🎉 歡迎來訪的讀者關注、點贊和收藏 🤞
😉 有問題可以私信交流 😆
📃 文章標題：【仿某寶做了一個時間組件邏輯】 🖍

選擇時間按天排序

效果圖

分析原圖，實作步驟分析

1. 首先日歷上面有年和月，需要保存下來
2. 每個月的一號要對應上面的周幾
3. 要把當天所在號數改成今天，今天前面的字體顏色是黑色，今天后面的字體是灰色

代碼實作

//獲取當前時間的年月日
function getnowDays(){
	let nowDate = new Date()
	//獲取當前的月，因為月份是從0開始的，所以需要加一
	let nowMonth = nowDate.getMonth()+1
	//獲取當天的年份
	let nowYear = nowDate.getFullYear()
	//獲取今天是多少號
	let nowDay = nowDate.getDate()
	
	this.getTotalDays(nowYear,nowMonth,nowDay)
}
//根據年和月來獲取當月的總天數
function getTotalDays(nowYear,nowMonth,nowDay){
	let date = new Date(nowYear,nowMonth,0)
	let totalDays=date.getDate()
	this.getWeekByDay(nowYear,nowMonth,totalDays,nowDay)
},
//根據年月日和總天數，來排序我們的時間
function getWeekByDay(nowYear,nowMonth,totalDays,nowDay){
	//傳入年月和1號，獲取當月的1號是周幾
	let dayValue=nowYear+'/'+nowMonth+'/'+1
	
	let date=new Date(dayValue)
	
	let dateData=[]
	
	//獲取當月一號是周幾，因為頭部是按周日，之后在周一到周日，所以運用三木運演算法來獲取在一號前面需要添加幾個空值
	let nullLength=date.getDay()==7?0:date.getDay()
	//將空值替換空資料
	if(nullLength!=0){
		for(let i=0;i<nullLength;i++){
			dateData.push({num:'',color:''})
		}
	}
	//回圈將我們的號數依次填入，資料從1開始到最后的總天數
	for(let i=1;i<=totalDays;i++){
		let data={
			num:'',
			color:''
		}
		//當i大于等于當前天數時會出現要講字體改變色與當天的號數改成今天
		if(i >= nowDay){
			if(i == nowDay){
				data.num='今天'
				data.color='#5D40D9'
			}
			else{
				data.num = i
				data.color ='#bbb'
			}
		}
		else{
			data.num = i
			data.color = '#333333'
		}
		dateData.push(data)
	}
	//最后保存資料當前的年月以及對應的號數
	let storageData={
		nowYear:nowYear,
		nowMonth:nowMonth,
		date:dateData
	}
	//最后使用saveMonthlyData保存我們資料
	this.saveMonthlyData.push(storageData)
}

以上代碼就可以實作支付寶的選擇某天的效果

代碼效果展示

選擇時間按周排序

某寶效果圖

分析原圖，實作步驟分析

1. 獲取年月的資料
2. 每周的第一周都從當月的周一開始計算
3. 本周前和本周都是黑色字體，本周后都是灰色字體

代碼實作

//獲取當前時間的年月日
function getnowDays(){
	let nowDate = new Date()
	//獲取當前的月，因為月份是從0開始的，所以需要加一
	let nowMonth = nowDate.getMonth()+1
	//獲取當天的年份
	let nowYear = nowDate.getFullYear()
	//獲取今天是多少號
	let nowDay = nowDate.getDate()
	
	this.getTotalDays(nowYear,nowMonth,nowDay)
}
//根據年和月來獲取當月的總天數
function getTotalDays(nowYear,nowMonth,nowDay){
	let date = new Date(nowYear,nowMonth,0)
	let totalDays=date.getDate()
	this.getWeekByDay(nowYear,nowMonth,totalDays,nowDay)
},
//根據年月日和總天數，來排序我們的每周時間
function getWeekByDay(nowYear,nowMonth,totalDays,nowDay){
	//獲取我們當月一號周幾
	let dayValue=nowYear+'/'+nowMonth+'/'+1
	let date=new Date(dayValue)
	let dateData=[]
	//howWeek代表我們這個月有幾周，howManyDays代表這個月還剩下幾天，initialization代表我們當月第一周的周一是在幾號
	let howWeek=0,howManyDays=0,initialization=1
	//當一號是周一時，當一號等于時，相當于是周日
	//通過除7來獲取有幾周，通過%7來獲取剩下幾天
	if(date.getDay()==1){
		howWeek=totalDays/7
		howManyDays=totalDays%7
	}
	else if(date.getDay()==0){
		initialization=9-7
		let totalDays1=totalDays-initialization
		howWeek=Math.floor(totalDays1/7)
		howManyDays=totalDays1%7
	}
	else{
		initialization=9-date.getDay()
		let totalDays1=totalDays-initialization
		howWeek=Math.floor(totalDays1/7)
		howManyDays=totalDays1%7
	}
	//將每周遍歷進去，和每周的周一是幾號添加進去
	for(let i=0;i<=howWeek;i++){
		let data={
			title:'第'+(i+1)+'周', 
			num:'',
			color:'#333'
		}
		if(i==0){
			data.num=initialization*(i+1)
		}
		else{
			data.num=initialization+i+(i)*6
		}
		if(data.num<=nowDay && data.num+6>=nowDay){
			data.color='#5D40D9'
		}
		else if(data.num>=nowDay){
			data.color='#bbb'
		}
		dateData.push(data)
	}
	//最后保存資料當前的年月以及對應的第一到最后一周
	let storageData={
		nowYear:nowYear,
		nowMonth:nowMonth,
		date:dateData
	}
	//最后使用saveMonthlyData保存我們資料
	this.saveMonthlyData.push(storageData)
}

以上就可以實作排序月每周的效果

代碼效果展示