全手工原生态的js日历代码

最新推荐文章于 2022-07-06 18:03:21 发布

mario08

最新推荐文章于 2022-07-06 18:03:21 发布

阅读量165

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/mario08/article/details/79017183

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	.week{
		display: flex;
		padding: 0px 15px;
		background-color: #eeeeee;
		height: 30px;
		line-height: 30px;
		color: #666666;
		font-size: 14px;
	}
	.week div{
		flex: 1;
		text-align: center;
	}	
	 .date .day{
		display: flex;
		padding: 0px 15px;
		font-size: 14px;
	}
	.date .day div.left{
		border-left: 1px solid #eeeeee;
	}
	.date .day div.top{
		border-top: 1px solid #eeeeee;
	}
	.date .day div.item{
		flex: 1;
		text-align: center;
		border-bottom: 1px solid #eeeeee;
		border-right: 1px solid #eeeeee;
		height: 50px;
		color:#333333;
	}	
	</style>
</head>
<body>
	<section class="week">
		<div>日</div>
		<div>一</div>
		<div>二</div>
		<div>三</div>
		<div>四</div>
		<div>五</div>
		<div>六</div>
	</section>
	<section class="date date-two">
		<div class="datalist"></div>
	</section>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
<script type="text/javascript">
		//计算对应的年月
		var day = new Date()
		var month = day.getMonth() + 1;
		month = month < 10 ? '0' + month : month;
		//计算当前月份的总天数
		var day = new Date( day.getFullYear(), day.getMonth()+ 1, 0);
		var allDay = day.getDate();
		//判断本月第一天是星期几
		day.setDate(1); //时间调整到本月第一天
		var firstday = day.getDay(); //读取本月第一天是星期几   0表示周日
		var rows = Math.ceil((allDay + firstday) / 7); //当前月天数+第一天是星期几的数值 获得表格行数
		var i, k, idx, date_str;
		var item = ''
		for(i = 0; i < rows; i++) { //表格的行
			var item = "<div class='day'>";
			for(k = 0; k < 7; k++) { //表格每行的单元格
				idx = i * 7 + k; //单元格自然序列号
				date_str = idx - firstday + 1; //计算日期
				date_str = (date_str <= 0 || date_str > allDay) ? " " : date_str; //过滤无效日期（小于等于零的、大于月总天数的）
				date_str_2 = date_str < 10 ? '0' + date_str : date_str;
				_date = day.getFullYear() + '-' + month + '-' + date_str_2;
				if(i == 0) {   //第一行
					if(k == 0) {  //第一列
						item += "<div  class='item top  left'><div>" + date_str + "</div></div>";
					} else {
						item += "<div  class='item top '><div>" + date_str + "</div></div>";
					}
				} else {
					if(k == 0) { //第一列
						item += "<div  class='item  left'><div>" + date_str + "</div></div>";
					} else {
						item += "<div  class='item '><div>" + date_str + "</div></div>";
					}
				}
			}
			item += "</div>"
			$(".datalist").append(item)
		}
		
</script>

	
</html>

mario08

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全手工原生态的js日历代码

<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .week{ display: flex; padding: 0px 15px; background-color: #eeeeee; height: 30px;...
复制链接

扫一扫