移动端日历

最新推荐文章于 2020-04-28 17:16:47 发布

认真学前端

最新推荐文章于 2020-04-28 17:16:47 发布

阅读量1.2k

点赞数

分类专栏： js基础笔记

本文链接：https://blog.csdn.net/xlei1123/article/details/53099462

版权

js基础笔记专栏收录该内容

41 篇文章 0 订阅

订阅专栏

只是一个初步的简单的日历，有是否显示上月和下月部分的选项

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name = "format-detection" content = "telephone=no">
	<title>移动端日历</title>
	<style type="text/css">
		table{
			width: 100%;
			border-collapse: collapse;
		}
		td {
			padding: 0;
			margin: 0;
			vertical-align: middle;
			text-align: center;
			font-size: .7rem;
			height: 1.5rem;
		}
		.none{
			display: none;
		}
	</style>
</head>
<body>

	<div class="calendar">
		<table class="calendar_day">
			<tr>
				<td>星期日</td>
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
				<td>星期六</td>
			</tr>
		</table>
		<table class="calendar_date">
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</div>

	<script type="text/javascript">

	var date = new Date();
	calendar(date,{lastandnext:true})


	function calendar (setDate,options){

		if (!options) {
			options = {};
		}

		options.lastandnext = options.lastandnext || false;


		// 星期几部分
		var calendar_days = document.getElementsByClassName('calendar_day')[0];
		var days = calendar_days.getElementsByTagName('td');

		

		var date = new Date(setDate);

		var y = date.getFullYear();

		var m = date.getMonth();

		var d = date.getDate();

		// 本月

		// 该月的第一天是星期几
		var firstDay = new Date(y,m,1).getDay(); 
		// console.log(firstDay);

		// 该月一共多少天
		var lastData = new Date(y,m+1,0).getDate();
		// console.log(lastData)

		// 该月的最后一天是星期几
		var lastDay = new Date(y,m+1,0).getDay();
		// console.log(firstDay)

		var calendar_date = document.getElementsByClassName('calendar_date')[0];
		var tds = calendar_date.getElementsByTagName('td');
		// console.log(tds)

		var ed = firstDay;
		for (var i = firstDay; i < lastData+firstDay; i++) {
			// console.log(i-firstDay+1)
			tds[i].innerHTML= i-(firstDay)+1;
		}


		if(options.lastandnext){
			
			// // 上月
			var lastMonthData = new Date(y,m,0).getDate();

			for(var i = firstDay-1; i >= 0; i--){
				
				tds[i].innerHTML= lastMonthData-(firstDay-i-1);
			}

			// 下月
			var k = 0; 
			for(var i = lastData+firstDay; i < tds.length; i++){
				
				k++;
				
				tds[i].innerHTML= k;
			}
		}
		


	}
		
	</script>

	<!-- 适配 -->
	<script type="text/javascript">
		;(function(win, doc){
            function change(){
                doc.documentElement.style.fontSize=20*doc.documentElement.clientWidth/360+'px';
            }
            change();

            win.addEventListener('resize', change, false);
        })(window, document);
	</script>
</body>
</html>

认真学前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端日历

只是一个初步的简单的日历，有是否显示上月和下月部分的选项移动端日历 table{ width: 100%; border-collapse: collapse; } td { padding: 0; margin: 0; vertical-align: middle; text-align: ce
复制链接

扫一扫

专栏目录