s-选择时间在中间显示

最新推荐文章于 2022-09-29 14:39:58 发布

dongsdh

最新推荐文章于 2022-09-29 14:39:58 发布

阅读量85

点赞数

分类专栏：微码文章标签： javascript jquery html

本文链接：https://blog.csdn.net/dongsdh/article/details/125106693

版权

微码专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
		*{margin: 0;padding: 0;}
		.bigbox{
			position: relative;
			display: inline-block;
			background: #2C2D30;
			padding: 7px 0;
		}
		.bigbox>i{
			position: absolute;
		    top: 4px;
		    left: 50%;
		    transform: translate(-50%);
		    width: 50px;
		    height: 43px;
		    border: 2px solid #F6B400;
		    border-radius: 8px;
		}
		.box p span{
			display: inline-block;
			width: 50px;
			text-align: center;
			cursor: pointer;
			color: #888;
		}
		.box p span.act{
			color:#fff;
		}
	</style>
</head>
<body>
	
	<h4></h4>
	<div class="bigbox">
		<div class="box monthbox">
			<p>
				<!---->
			</p>
		</div>
		<div class="box daybox">
			<p>
				<!---->
			</p>
		</div>
		<i></i>
	</div>
	
	<script src='jquery.min.js'></script>
	<script>
		
		
		var today = ''; //默认今天的日期（ajax传参使用）
		var newallmouth = [];//全部月
		var allday = []; //全部日
		
		
		function todaytime() {
			let now = new Date();
			let year = now.getFullYear(),
				month = now.getMonth() + 1,
				date = now.getDate();
			month = checkTime(month);
			date = checkTime(date);
			today = year + '-' + month + '-' + date;
			showAllMonth(today)//显示全部月
			showAllDay(today);//显示全部日
			$('h4').text('今天的日期是'+today);
		}
		function checkTime(i) {
			if(i < 10 && i>-1) {
				i = "0" + i
			}
			return i
		}
		todaytime(); //搞出今天的年月日
		
		
		
//		显示全部月		
		function getmouth(num,clicktime){
			var 	today = new Date(clicktime);
			var targetday_milliseconds = today.getTime();
			today.setTime(targetday_milliseconds); //注意，这行是关键代码
			var tYear = today.getFullYear();
			var tMonth = today.getMonth()+num+1;
			var tDate = today.getDate();
			tMonth = checkTime(tMonth);
			tDate = checkTime(tDate);
			if(tMonth == 13){
				tMonth='01'
				tYear = tYear+1
			}else if(tMonth == 14){
				tMonth='02'
				tYear = tYear+1
			}else if(tMonth == 15){
				tMonth='03'
				tYear = tYear+1
			}
			
			if(tMonth == '00'){
				tMonth='12'
				tYear = tYear-1
			}else if(tMonth =='-1'){
				tMonth='11'
				tYear = tYear-1
			}else if(tMonth == '-2'){
				tMonth='10'
				tYear = tYear-1
			}
			return tYear+'-'+tMonth;
		}
		function showAllMonth(clicktime) {
			newallmouth=[];
			for(var i = -3, len = 4; i < len; i++) {
				newallmouth.push({
					time:getmouth(i,clicktime)
				});
			}
			showhtmlmonth(newallmouth)
		}
		function showhtmlmonth(arr){
			var shtml ='';
		    for(var i=0,len=arr.length;i<len;i++){
		    	if(arr[i].time== today.substr(0,7)){
		    		shtml+='<span class="act" time="'+arr[i].time+'">'+arr[i].time.substr(5,2)+'</span> ';
		    	}else{
		    		shtml+='<span time="'+arr[i].time+'">'+arr[i].time.substr(5,2)+'</span> ';
		    	}
		    }
		    $('.monthbox p').html(shtml);
		}
		$(".bigbox").on("click",".monthbox span",function(){
		  today = $(this).attr('time')+'-01';
		  showAllMonth(today);
		  //		  到其他月的时候--重置这个月的第一日选中
		  showAllDay(today)
		  
		  console.log(today);
		})
//		显示全部月end		


//		显示全部日
		function getTheday(day, clicktime) {
			var today = new Date(clicktime);
			var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
			today.setTime(targetday_milliseconds); //注意，这行是关键代码
			var tYear = today.getFullYear();
			var tMonth = today.getMonth();
			var tDate = today.getDate();
			tMonth = checkTime(tMonth + 1);
			tDate = checkTime(tDate);
			return tYear + "-" + tMonth + "-" + tDate;

		}
		function showAllDay(clicktime) {
			allday = []
			for(var i = -3, len = 4; i < len; i++) {
				allday.push({
					time: getTheday(i, clicktime)
				});
			}
			showhtmlday(allday)
		}
		function showhtmlday(arr){
			console.log();
			var shtml ='';
		    for(var i=0,len=arr.length;i<len;i++){
		    	if(arr[i].time == today){
		    		shtml+='<span class="act" time="'+arr[i].time+'">'+arr[i].time.substr(8,2)+'</span> ';
		    	}else{
		    		shtml+='<span time="'+arr[i].time+'">'+arr[i].time.substr(8,2)+'</span> ';
		    	}
		    }
		    $('.daybox p').html(shtml);
		}
		$(".bigbox").on("click",".daybox span",function(){
		  today = $(this).attr('time');
		  showAllDay(today);
		  
//		  到其他月的时间时--重置月
		  showAllMonth(today)
		  
		  console.log(today);
		})
//		显示全部日end		
		
		
	</script>
</body>
</html>