用js手写一个简单的日历

最新推荐文章于 2023-05-09 21:42:28 发布
最新推荐文章于 2023-05-09 21:42:28 发布
阅读量680 收藏 3
点赞数 1
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TISRNW/article/details/103000405
版权

成品图
代码中有注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>日历</title>
		<style type="text/css">
			html,body{
				background-color: antiquewhite;
			}
			/* 整个框框 */
			.main-wrap {

				width: 700px;
				background-color: ;
				margin: 0px auto;
			}

			/* 框框头，星期几 */
			.main-wrap .head {
				width: 700px;
                 text-align: center;
				 
			}

			.main-wrap .head .head-item {
				width: 100px;
				float: left;
				font-size: 30px;
				border-radius: 100px;
				background-color: #8A2BE2;
			}

			/* 每天的格子 */
			.main-wrap .body .day-item {
				width: 100px;
				height: 100px;
				float: left;
				/* line-height: 100px; */
				font-size: 20px;
				text-align: center;
				border-radius: 100px;
				

			}

			/* 每个月初不一定一号是周一，用这个空出来 */
			.main-wrap .body .gap {
				width: 500px;
				height: 2px;
				float: left;

			}
			#header{
				width: 100%;
				margin: 50px auto 20px auto;
				 /* background-color: white; */
				font-size: 40px;
				text-align: center;
			}
			.anniu{
			
				width: 100%;
				position: relative;
			}
			#next-month{
			position: absolute;
			top: 10px;
			right: 40px;
			background-color: #FAEBD7;
			font-size: 18px;
			border: white solid 1px;
			}
			
			#pre-month{
				position: absolute;
				top: 10px;
				left: 40px;
				background-color: #FAEBD7;
				list-style: none;
				font-size: 18px;
			border: white solid 1px;
			}
			.back{
				width: 700px;
				height: 30px;
				margin: 0px auto;
				position: relative;
			}
			#backNowMonth{
				
			
				font-size: 18px;
				background-color: #FAEBD7;
				position: absolute;
				top: 10px;
				right: 40px;
			
				border: white solid 1px;
			
				
				
			}
			.event-item{
				white-space: wrap;
				font-size: 0.5em;
				color: blueviolet;
				
				/* overflow: hidden; */
			}
			#add-event{
				height: 100px;
				width: 150px;
				background-color: burlywood;
				position: fixed;
				top: 200px;
				left: 10px;
				color: blueviolet;
				text-align: center;
				line-height: 100px;
				font-size: 20px;
				
			}
			#add-event:hover{
				box-shadow: 0px 8px 8px brown;
			}
		</style>
	</head>
	<body>
		<div class="back">
			<button type="button" id="backNowMonth">回到本月</button>
		</div>
		<div class="main-wrap" >
			<div class="anniu" >
			<button type="button" id="next-month">下一月</button>
			<button type="button" id="pre-month">上一月</button>
			</div>


			
			<div class="header" id="header">
				
			</div>
			<!-- 脑袋 -->
			<div class="head">


				<div class="head-item">
					周日
				</div>
				<div class="head-item">
					周一
				</div>
				<div class="head-item">
					周二
				</div>
				<div class="head-item">
					周三
				</div>
				<div class="head-item">
					周四
				</div>
				<div class="head-item">
					周五
				</div>
				<div class="head-item">
					周六
				</div>

			</div>
			<!-- 身子 -->
			<div class="body" id="body">

				<div class="gap" id="">

				</div>
				<!-- <div class="day-item">1</div>
				<div class="day-item">2</div>
				<div class="day-item">3</div>
				<div class="day-item">4</div>
				<div class="day-item">5</div>
				<div class="day-item">6</div>
				<div class="day-item">7</div>
				<div class="day-item">8</div>
				<div class="day-item">9</div>
				<div class="day-item">10</div>
				<div class="day-item">11</div>
				<div class="day-item">12</div>
				<div class="day-item">13</div>
				<div class="day-item">14</div>
				<div class="day-item">15</div>
				<div class="day-item">16</div>
				<div class="day-item">17</div>
				<div class="day-item">18</div>
				<div class="day-item">19</div>
				<div class="day-item">20</div>
				<div class="day-item">21</div>
				<div class="day-item">22</div>
				<div class="day-item">23</div>
				<div class="day-item">24</div>
				<div class="day-item">25</div>
				<div class="day-item">26</div>
				<div class="day-item">27</div>
				<div class="day-item">28</div>
				<div class="day-item">29</div>
				<div class="day-item">30</div>
				<div class="day-item">31</div> -->




			</div>
		</div>
		<div id="add-event">
			添加事件
		</div>
		<script type="text/javascript">
			//程序主题程序
			//1,读取数据
			//2,获取今天
			//,3获取这个月的长度
			//,4获取这个月的第一天周几
			//5,渲染日历和时间
			//页面跳转
			//1,获取当前月份
			//计算下个月是几号以及是否需要跨年
			//,重新渲染
			//添加页面
			//1,获取要添加的事件
			//2,添加事件到数组中
			//3,保存数据
			//4刷新页面
			
			
			
			//怎么完成这个日立的
			//1,获取一些月份的信息
			//2,拼接字符串显示样式
			//3, innerhtml方法插入到页面里

			//当我们想去下个月时
			//1,根据这个月推断下个月
			//,重新拼接字符串和样式


			//今日高亮
			//获取今天日期
			//对比年份和月份 
			//对循环的某一天处理
			
			//待实现功能一
			//要想点击某一天的事件使他弹出一个显示框(弹出一个页面会更好实现一点）
			//1,点击弹出,再点击某个按钮关闭,
			//2,将内容写在页面的正中央
			//3,显示未完成和已完成,
			//4,已完成的出现删除线
			//5,能有个推向下一天的功能就好了,(目前看应该是点击推向下一天，获取该天的日期，让他的几号加一天，再填充到页面中（要判断推向下一天的时候是否会推向下一个月））
			//6,关于推向下一天时候要判断的问题,应该是做一个if判断,在获取该事件的日期的时候,把他的年月日分别获取保存下来,在判断中判断日加一月份是否需要加一,年份是否需要加一.
			
			
			//待实现功能二
			//删除功能
			//删除你想要删除的某一天的事件
			//事件存储在localStorage中以对象格式存储,我们用JSON.parse(localStorage.content)来解析他,变成一个数组,用数组的splace()(希望么拼错)的方法删除数组的某一项
			//分析
			//localStorage有很多的内容,这里是获取里面的content内容
			
			//1,点击删除按钮,程序运行首先获取一个数组格式的整个数组,并获取你点击的事件的content内容
			//2，用循环开始判断,当content == 数组的某一项content时删除,不相等时跳过.
			//3,删除完之后,我们重新刷新页面,获取数据再填充页面
			//3.1,有一个粗暴的方法时直接将你点击事件替换成空字符串.但这样你并没有清除数据.而是覆盖了数据,这样会感觉很不舒服
			
			
			
			
			var eventDate = [
				{
					content:'今天我吃饭了，还**了',
					date : "2019-11-07 21:48:00",
					
				},
				{
					content:'今天是个很差的日子，wodadja',
					date : "2019-11-04 21:48:22",
				},
				{
					content: '今天心情很差',
					date: '2019-11-5 13:07:22'
				}
				
			]
			var backNow = document.getElementById('backNowMonth')
			var riliBody = document.getElementById('body')
			var nowDisplayDate = {

			};
			var nextMonth = document.getElementById('next-month')
			var preMonth = document.getElementById('pre-month')
			//获取年份展示
			var header = document.getElementById('header')
			
			var getDaysOfMonth = function(year, month) {
				if (typeof month == 'string') {
					month = parseInt(month)
				}
				if (typeof month == 'number') {
					if (month < 1 || month > 12) {
						return alert('傻逼一年哪有' + month + '月')
					}
				} else {
					return alert('傻逼')
				}


				var days = 0
				if (typeof year == 'string') {
					year = parseInt(year)
				}
				if (typeof year == 'number') {
					if (year < 0) {
						return alert('傻逼哪有' + month + '年')
					}
				} else {
					return alert('傻逼')
				}

				var year = year ? year : (new Date()).getFullYear()
				if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
					days = 31
				}
				if (month == 4 || month == 6 || month == 9 || month == 11) {
					days = 30
				}
				if (month == 2) {
					days = year % 4 == 0 ? 29 : 28;
				}
				return days

			}
			var getTheFirstDateOfThisMonthIsWhichDay = function(year, month) {



				var dateStr = year + '-' + month + '-' + '01'
				console.log(dateStr)
				var firstDateOfThisMonth = new Date(dateStr)
				var days = firstDateOfThisMonth.getDay()
				console.log(days)
				return days
			}
			//预处理事件
			var processEvent = function(year,month){
				var thisMonthEvent = []
				//var now = new Date()
				eventDate.forEach(function(item,index){
					//var d = new Date(item.date)
					//var dMonth=d.getMonth()
				
					var itemDate = new Date(item.date)
					 // console.log(month,now.getMonth())
					
					if(month == itemDate.getMonth()+1 && year == itemDate.getFullYear()){
					
						thisMonthEvent.push(
						{
							year :itemDate.getFullYear(),
							month:itemDate.getMonth(),
							date:itemDate.getDate(),
							hours : itemDate.getHours(),
							min:itemDate.getMinutes(),
							sec:itemDate.getSeconds(),
							content : item.content
						}
						);
					}
					// console.log(dMonth==now.getMonth())
				})
				// console.log(dMonth==now.getMonth())
				return thisMonthEvent
			}
			//把拼接字符串以及填充到页面中
			var render = function(year, month) {
				
				
				//判断是否本月
				var thisMonthEvent = processEvent(year,month)
				// var isEventEmpty = false
				// if(thisMonthEvent.length == 0){
				// 	isEventEmpty = true
				// 	//这个月没事
				// }
				console.log(thisMonthEvent)
				var today = new Date()
				var isThisMonth = false
				if(month == today.getMonth()+1 && year == today.getFullYear()){
					isThisMonth = true
				}
				var dayCount = getDaysOfMonth(year, month)
				var firstDay = getTheFirstDateOfThisMonthIsWhichDay(year, month)
				var width = 0

				var str = ''
				var gap = '<div class="gap" style = "width:${%width%}px"></div>'
				var tmp = '<div class="day-item" style = "${%color%}">&{%riqi%}号<br\>${%event%}</div>'
				// console.log(width)
				if (firstDay == 7) {
					width = 0
				} else {
					width = firstDay * 100
				}
				// console.log(dayCount)
				str += gap.replace('${%width%}', width)
				
				for (var i = 0; i < dayCount ; i++) {
					var emptyStr = '';
					//高亮
					 if(isThisMonth  && i+1 ==today.getDate()){
						
						emptyStr = tmp.replace('&{%riqi%}', i+1).replace('${%color%}','background-color:#878787;color:white; border-radius: 100%; ')
					}else{
						emptyStr = tmp.replace('&{%riqi%}', i+1)
					
					}
					//添加事件,在for循环中,判断今天是否是今天
					for(var j = 0;j<thisMonthEvent.length;j++){
						// console.log(thisMonthEvent[j])
						if(thisMonthEvent[j].date == i+1){
							// console.log(thisMonthEvent.content)
                      emptyStr=emptyStr.replace('${%event%}','<span class="event-item">'+thisMonthEvent[j].content+'</span>')
							
						}
							// console.log(thisMonthEvent.content)
							
						
					}
					emptyStr=emptyStr.replace('${%event%}',' ')
					 //if(!isThisMonth){
					 //	emptyStr=emptyStr.replace('${%event%}','无事')
					// }
					str += emptyStr
				}
				// console.log(str)
				header.innerHTML = year+'-'+(month >9?month:'0'+month)+ '-'+((today.getDate())>9?(today.getDate()):'0'+(today.getDate()))
				riliBody.innerHTML = str
				// console.log(date)

				// console.log(nowDisplayDate)

			}
			var init = function(date) {
				var year = date.getFullYear();
				var month = date.getMonth() +1;
				nowDisplayDate = date;
				render(year, month)
			}
			
			var goNextMonth = function() {
				// console.log(nowDisplayDate)
				var displayDate = {
					year: nowDisplayDate.getFullYear(),
					month: nowDisplayDate.getMonth(),
				}
				 if(displayDate.month >=11){
					displayDate.month = 0
					displayDate.year ++
				}else{
				    displayDate.month ++
				}
				 console.log(displayDate.month+1  ,displayDate.year)
				var nextMonth = displayDate.year + '-' + (displayDate.month + 1) + '-' + '01'
				var nextDate = new Date(nextMonth)
				init(nextDate)
			}
			var goPreMonth = function(){
				var displayDate = {
					year: nowDisplayDate.getFullYear(),
					month: nowDisplayDate.getMonth(),
				}
				 if(displayDate.month  == 0){
                  displayDate.month  = 11
				  displayDate.year--
				}else{
			       displayDate.month--
				}
				 console.log(displayDate.month+1  ,displayDate.year)
				var nextMonth = displayDate.year + '-' + (displayDate.month + 1) + '-' + '01'
				var nextDate = new Date(nextMonth)
				init(nextDate)
			}
			nextMonth.addEventListener('click',function(){
				
				nextMonth.style = 'border: white solid 1px;'
				goNextMonth()
			})
			preMonth.addEventListener('click',function(){
				preMonth.style = 'border: white solid 1px;'
				goPreMonth()
			})
			backNow.addEventListener('click',function(){
				init(new Date());
			})
			var  loadEventDate = function(){
				eventDate = JSON.parse( localStorage.getItem('eventDate'))
				console.log(eventDate)
			}
			var saveEventDate = function(){
				localStorage.setItem('eventDate', JSON.stringify(eventDate))
				
			}
			var reFresh = function(){
				init(nowDisplayDate);
			}
			var addEvent = function(){
				var event =  prompt('请输入事件')
				var date =  prompt('请输入日期 （例：2019-11-7 20：39：33）')
			var obj = {
				date : date,
				content :event
			}
			eventDate.push(obj);
			saveEventDate();
			reFresh()
			}
			
			// //删除某一项(无用)
			// var content1='null'
			// var deleteSomeoneDay = JSON.parse(localStorage.getItem('eventDate'))
			// console.log(deleteSomeoneDay)
			//  for (var i = 0;i< deleteSomeoneDay.length; i++){
			// 	if(deleteSomeoneDay.content[i] == content1){
			// 		deleteSomeoneDay.splice(i,1)
			// 	}
			// }
			// console.log(deleteSomeoneDay)
			//添加事件
			var addEventSomeoneDay = document.getElementById('add-event')
			addEventSomeoneDay.addEventListener('click',function(){
			
				addEvent()
			})
			var main = function(){
				loadEventDate()
				
				init(new Date());
			}
			main()
			//年份翻页
			//今日高亮
			//回到本月
			//记录事件
			// goNextMonth()
		</script>
	</body>
</html>
雕琢时光纸戆
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯JS+CSS手写日历
qq_39933748的博客
03-25 830
介绍 今天带来一个纯JS+css手写的日历， 一开始先显示当前日期，比如下方25日就是当前日期会有较深蓝色背景色，鼠标指着的日期是下方图片14日的淡蓝色背景色 上面显示日期，可左右选择上个月或者下个月 代码 html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
原生 JS 手写日历组件
最新发布
qq_53109172的博客
09-10 408
并不是忘记了解析后面的代码，后面的代码只是简单的获取dom，根据条件生成元素，通过方法来修改年月值，再次调用 getCalendar方法生成新的 dom 在渲染即可，所以就不用解析了。
JavaScript编写日历（简单易懂，代码可以直接运行）
于笨笨的博客
09-26 4184
JavaScript编写日历（简单易懂，代码可以直接运行） 运行效果图如下： 点个????吧，代码如下： 首先是日历代码是HTML文件： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>制作年历</title> <style type="text/css"> body{text-align: center;} .box{mar
js手写日历
weixin_34009794的博客
07-24 412
问题描述: 通过改变文本框里的日期,改变日历,同时日历上有一些数据展示 1, 显示效果图 (以文本框里选中的2018年9月为例) 显示当前月 上一个月和下一个月灰色补全显示 可以在日历里面展示一些描述 2, 方法一: 代码如下(文章基于vue写的,写好dom渲染数据) html代码 <template> <div> <d...
前端js手写日历相关函数（附demo）
yangyi
06-29 943
1、获取某年某月第一天是周几 getMonthStartDay(year, month, index) { let monthFirstDay = Number(new Date(year, month, 1).getDay()) return monthFirstDay } this.getMonthStartDay(2021, 06, 1) 2、获取某年某月某天是一年中第几周 getWeek(year, month, day) { //计算当年一月第一天是周几 .
js写简单日历
Myd
11-22 4093
写日历主要的是要搞清楚2点：1，每个月的第一天是周几？ 2，每个月有多少天？清楚这2个之后就可以完成一个最简单的日历了。而这2个问题可以轻易的调用js的api获取到。
javascript自己写的日历控件及实例
06-26
自己手写的日历控件，不是很完整，希望可以抛砖引玉
recal使用现代CSS实现的ReactPreact日历组件
08-07
recal - 使用现代CSS实现的React / Preact日历组件
Angularjs 手写日历的实现代码（不用插件）
01-19
本文介绍了Angularjs 手写日历的实现代码（不用插件），分享给大家，具体如下： 效果： Html: ()> <select id=time_year ng-change=change_year(select_year) ng-
JavaScript日历
04-27
一款原生JavaScript，手写的日历功能。具体上下翻页以及点击日历事件等
javascript实现日历显示
01-07
javascript实现日历显示，可以根据用户输入时间显示日历。
js代码实现日历功能，超给力demo
06-17
超给力的日历demo，可以根据自己的需要灵活调整代码
仿百度日历，横向日历
10-16
仿百度日历，纯手写横向日历，满足各种排期需求，自己项目中有用到
vue2手写日历组件
小宇，要努力敲代码
05-09 716
最近的项目用到了日历组件，但是element的日历组件功能实在是太差了，一些基本的功能都没有，样式也没有接口，想自定义样式比较麻烦，事件还需要用插槽去实现，我就想手写一个组件
一个纯手写日历控件(重复造轮子)
xuanwugang的博客
04-19 1565
因为项目中有个设置考勤的地方用到日历交互，需要点击设置工作日，并且可以跨月设置，就手写了一个js控件，效果基本如图所示，可以上下翻月，点击设置变色后翻页可记住位置。基本思路：1，每画一个月生成对应个数的隐藏&lt;input&gt;域，每个带有点击事件，点击后变色并赋值2，翻页后将本页数据ajax到后台并再带到下个月或上个月，点击过的天数会对应变色3，再次翻页后用本月数据ajax更新往月数据，依次...
前端使用原生几十行代码js手写日历组件
Hgh_1997的博客
05-19 1199
只能传入每个月的一号，传入其他值会出现问题，到时做个判断即可 // 返回 类似 2016-01-02 格式的字符串 formatDate: function(year, month, dateline) { let y = year; let m = month; if (m < 10) m = "0" + m; let d = dateline; if (d < 10) d = "0" + d;
手写日历vue（简化版）
weixin_46544600的博客
05-30 529
效果：一个很简单日历 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="./static/css/i
超简单的日历插件，纯js手写。
javaStudentZhang的博客
01-15 2060
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
js手写日历插件
luzhongk的博客
04-14 1977
table{text-align: center;border-collapse:collapse;} .active{color:deeppink;} //获取时间 var date = new Date(); var y = date.getFullYear(); var _m = date.getMonth(); var d = date.getDate(
js 手写一个星期日历
08-31
手写一个日历可能比较复杂，但可以使用 JavaScript 的 `Date` 对象和一些日期处理函数来实现。下面是一个简单的实现： ``` // 获取当前日期 var now = new Date(); // 获取当前月份 var month = now.getMonth(); //...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值