原生JS实现日历封装

末蓝、 2022-12-25 15:56 203阅读 0赞

# 原生JS实现日历封装 #

1.结构部分:注意日历结构至少是7行7列，我这里用的是7行7列

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<table>
    		  <thead>
    		    <tr>
    		    	<th colspan="2">
    		    	   <span class="left">«</span>
    		    	</th>
    		    	<th colspan="3">
    		    	   <span class="time"></span>
    		    	</th>
    		    	<th colspan="2"><span class="right">»</span>
    		    	</th>
    		    </tr>
    		    <tr>
    			    <th>日</th>
    		    	<th>一</th>
    		    	<th>二</th>
    		    	<th>三</th>
    		    	<th>四</th>
    		    	<th>五</th>
    		    	<th>六</th>
    		    </tr>
    		  </thead>
    		  <tbody class="main">
    		  
    		  </tbody>
    		</table>
    	</body>
    </html>

2.样式部分

<style>
    		table{
    		  width: 320px;
    		  background: #333;
    		  color: #fff
    		}
    		td,th{
    		  text-align: center;
    		  height: 30px;
    		}
    </style>

3.功能部分

var oTime = document.querySelector(".time")//头部年月标题显示
    var oMain = document.querySelector(".main")//主体日历数字显示
    var leftBtn = document.querySelector(".left");//点击左边的按钮，月份减少
    var rightBtn = document.querySelector(".right");//点击右边的按钮，月份增加
    var time = new Date();//获取当前系统时间
    
    leftBtn.onclick = function() {
    	time.setMonth(time.getMonth() - 1);
    	getPrevDays(time);
    	getCurrentDays(time);
    	minHead(time);
    	mainList(time, getPrevDays(time), getCurrentDays(time));
    }
    
    rightBtn.onclick = function() {
    	time.setMonth(time.getMonth() + 1);
    	getPrevDays(time);
    	getCurrentDays(time);
    	minHead(time);
    	mainList(time, getPrevDays(time), getCurrentDays(time));
    }
    
    function minHead(time) {
    	oTime.innerText = time.getFullYear() + "年" + (time.getMonth() + 1) + "月"
    }
    
    function mainList(time, prevDays, currentDays) {
    	var beforeCount = prevDays.length + currentDays.length;
    	var cellList = document.querySelectorAll("td");
    	for(var i = 0; i < prevDays.length; i++) {//上一个月所占格子
    		cellList[i].innerHTML = "<font color='red'>" + prevDays[i] + "</font>"
    	}
    	for(var i = 0; i < currentDays.length; i++) {//当前月所占格子
    		if(currentDays[i] == time.getDate()) {//当天日期高亮显示
    			cellList[i + prevDays.length].innerHTML = "<font color='blue'>" + currentDays[i] + "</font>";
    
    		} else {//当月日期白色突出
    			cellList[i + prevDays.length].innerHTML = "<font color='white'>" + currentDays[i] + "</font>";
    		}
    	}
    	for(var i = 1; i <= (42 - beforeCount); i++) {//下个月所占格子
    		cellList[i + beforeCount - 1].innerHTML = "<font color='red'>" + i + "</font>"
    	}
    }
    
    function createCells() {
    	for(var i = 0; i < 6; i++) {//6行
    		var oTr = document.createElement("tr");
    		for(var j = 0; j < 7; j++) {//7列
    			var oTd = document.createElement("td");
    			oTr.appendChild(oTd);
    		}
    		oMain.appendChild(oTr);
    	}
    }
    
    function getPrevDays(time) { //获得上一个在本月所占的天数
    	var time = new Date(time);//拷贝一份时间，避免时间修改发生冲突
    	var list = [];//上一个月所占的天数
    	time.setDate(1); //设置成当月1号，便于查看是星期几；
    	var day = time.getDay() == 0 ? 7 : time.getDay();//如果是0，说明数字第一行需要空出来放上一个月的时间
    	//获取上一个月的天数
    	time.setDate(0);//系统自动计算到上一个月的最后一天
    	var maxDay = time.getDate();//得到上一个月的最后一天时间
    	for(var i = maxDay; i > (maxDay - day); i--) {
    		//根据maxDay和day之间的关系，把上一个月的时间放到list中
    		list.push(i);
    	}
    	list.reverse();//日期升序排列
    	return list;
    }
    
    function getCurrentDays(time) { //获取当前月的天数
    	var time = new Date(time);//拷贝时间，原因同上
    	time.setDate(1); //确保不会出现跨越现象  如果当前时间是1月31号就会出现跨越到三月份的事情
    	var list = [];
    	//下面代码是为了获取上一个月的天数
    	time.setMonth(time.getMonth() + 1) //修改时间到下一个月
    	time.setDate(0); //修改时间日期是0
    	var maxDay = time.getDate();
    	//获取到上一个月的日期并放到数组中
    	for(var i = 1; i <= maxDay; i++) {
    		list.push(i);
    	}
    	return list;
    }
    createCells();//创建6行7列表格
    getPrevDays(time);//获取上一个月在当前月所占的格子数
    getCurrentDays(time);//获取当前月所占的格子数
    minHead(time);//显示头部标题
    mainList(time, getPrevDays(time), getCurrentDays(time));//显示主题日历

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读

相关原生JS实现日历封装

原生JS实现日历封装 1.结构部分:注意日历结构至少是7行7列，我这里用的是7行7列 <!DOCTYPE html> <html> <head

末蓝、/ 2022年12月25日 15:56/ 0 赞/ 204 阅读

相关原生js实现日历本，打卡专用。

<div style="width:100%;"> <input id="txtDt" type="text" /> </d

一时失言乱红尘/ 2022年12月22日 11:26/ 0 赞/ 203 阅读

相关原生js封装ajax方法

jquery框架的ajax方法固然好用，但是假如某天我们的项目不能引入jquery或项目需求很简单，没有很多交互功能，只需要ajax，这时引入jquery库会造成资源浪费，也会

绝地灬酷狼/ 2022年09月26日 00:26/ 0 赞/ 217 阅读

相关原生js封装Ajax函数

Ajax，是 Asynchronous JavaScript + XML 的简写。指一种创建交互式网页应用的网页开发的技术。通过异步模式，提升了用户体验。优化了浏览器和服

￡神魔★判官ぃ/ 2022年05月23日 04:26/ 0 赞/ 281 阅读

相关原生JS封装jsonp跨域

// jsonp 跨域封装 // jsonp\_key => 前端发给后端函数名时使用的字段名; function jsonp(url, jsonp_key) {

桃扇骨/ 2022年04月23日 11:38/ 0 赞/ 215 阅读

相关原生js所有封装

[https://www.confession.work][https_www.confession.work] [https_www.confession.work]:

我不是女神ヾ/ 2022年03月18日 16:13/ 0 赞/ 251 阅读

相关 js原生日历（小白的版本）

1. 原生日历 ![图片描述][3315738331-5b6867f975c58_articlex] <!DOCTYPE html> <html>

我不是女神ヾ/ 2022年03月01日 19:40/ 0 赞/ 192 阅读

相关原生js封装ajax请求

一个完整的ajax请求封装，适用场景： 1. get 请求 2. post请求 3. 表单提交方式 4. 表单上传文件 function ajax(opti

向右看齐/ 2021年12月14日 06:29/ 0 赞/ 424 阅读

相关原生js 封装ajax

这是自己封装的ajax ，分享一下：直接上代码文件夹 ![70][] index.html ![70 1][] ![70 2][]

不念不忘少年蓝@/ 2021年09月15日 07:50/ 0 赞/ 465 阅读

相关原生JS封装AJAX方法

原生JS封装AJAX方法 Ajax大家每天都在用，jquery库对Ajax的封装也很完善、很好用，下面我们看一下它的内部原理，并手动封装一个自己的Ajax库。一、原理 ...

红太狼/ 2020年06月06日 18:35/ 0 赞/ 906 阅读