突然发现日期对象可以进行 加减 ， 利用这个特性写了一个可以说是对只要会JavaScript  的就可以写的日历；没有各种算法，只有一些逻辑相信只要懂javascript就差不多看俩眼就会的日历。

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			*{

				margin: 0px;

				padding: 0px;

			}

			#data{

				width: 280px;

				border: 1px solid #000000;

				margin: 20px auto;

			}

			#data > p{

				display: flex;

			}

			#data > h5{

				text-align: center;

			}

			#data > p > span{

				padding: 0 10px;

			}

			#prev,#next{

				cursor: pointer;

			}

			#nian{

				flex: 1;

				text-align: center;

			}

			#title{

				overflow: hidden;

				list-style: none;

				background: #ccc;

			}

			#title > li{

				float: left;

				width: 40px;

				height: 26px;

				line-height: 26px;

				text-align: center;

			}

			#date{

				overflow: hidden;

				list-style: none;

			}

			#date > li{

				float: left;

				width: 34px;

				height: 34px;

				margin: 1px 1px;

				border: 2px solid rgba(0,0,0,0);

				line-height: 34px;

				text-align: center;

				cursor: pointer;

			}

			#date > .hover:hover{

				border: 2px solid red;

			}

			.active{

				color: red;

			}

		</style>

	</head>

	<body>

		<div id="data">

			<p>

				<span id="prev">上一月</span>

				<span id="nian">2017</span>

				<span id="next">下一月</span>

			</p>

			<h5 id="yue">一月</h5>

			<ul id="title">

				<li>日</li>

				<li>一</li>

				<li>二</li>

				<li>三</li>

				<li>四</li>

				<li>五</li>

				<li>六</li>

			</ul>

			<ul id="date">

			</ul>

		</div>

		<script type="text/javascript">

			var dat = new Date(); //当前时间

			var nianD = dat.getFullYear();//当前年份

			var yueD = dat.getMonth(); //当前月

			var tianD = dat.getDate(); //当前天    这保存的年月日 是为了 当到达当前日期 有对比

			add(); //进入页面第一次渲染

			function add(){

				document.getElementById('date').innerHTML = "";

				var nian = dat.getFullYear();//当前年份

				var yue = dat.getMonth(); //当前月

				var tian = dat.getDate(); //当前天

				var arr=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];

				document.getElementById('nian').innerText = nian;

				document.getElementById('yue').innerText = arr[yue];

				var setDat = new Date(nian,yue + 1,1 - 1); //把时间设为下个月的1号    然后天数减去1  就可以得到 当前月的最后一天;

				var setTian = setDat.getDate(); //获取 当前月最后一天

				var setZhou = new Date(nian,yue,1).getDay(); //获取当前月第一天 是 周几

				for(var i=0;i<setZhou ;i++){//渲染空白 与 星期 对应上

					var li=document.createElement('li');

					document.getElementById('date').appendChild(li);

				} 

				for(var i=1;i<=setTian;i++){//利用获取到的当月最后一天 把  前边的 天数 都循环 出来

					var li=document.createElement('li');

					li.innerText = i;

					if(nian == nianD && yue == yueD && i == tianD){

						li.className = "active";

					}else{

						li.className = "hover";

					}

					document.getElementById('date').appendChild(li);

				}

			}

			document.getElementById("next").onclick = function(){

				dat.setMonth(dat.getMonth() + 1); //当点击下一个月时 对当前月进行加1;

				add(); //重新执行渲染 获取去 改变后的  年月日  进行渲染;

			};

			document.getElementById("prev").onclick = function(){

				dat.setMonth(dat.getMonth() - 1); //与下一月 同理

				add();

			};

		</script>

	</body>

</html>

　　

js原生日历的更多相关文章

  1. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  2. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  3. JS原生效果瀑布流布局的实现(一)

    JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  4. 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  5. js简易日历

    js简易日历中设计的知识点:选项卡切换   数组    innerHTML  连接符 与选项卡的区别:div的个数不同 连接符中需要注意的:(优先级) "abc"+12+3+&qu ...

  6. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  7. js原生的url操作函数，及使用方法。（附：下边还有jquery对url里的中文解码函数）

    js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...

  8. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  9. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

随机推荐

  1. 【Jenkins】定时构建语法

    跟cron定时任务语法基本类似 一.字段有哪些 每行包含5个字段,用制表符或空格隔开,从左至右依次是: 分 时 天 月 星期 二.每个字段的取值范围 分钟 (0–59) 时 (0–23) 天 (1–3 ...

  2. LOJ2229. 「BJOI2014」想法（随机化）

    题目链接 https://loj.ac/problem/2229 题解 评分标准提示我们可以使用随机化算法. 首先,我们为每一道编号在 \([1, m]\) 以内的题目(这些题目也对应了 \(m\) ...

  3. 使用go写一个简单的exe文件

    工作需要一个小工具给分析师用,原先打算写一个脚本的,但是呢我又不会用python,要写的话只能用java来实现(打包成可执行jar,使用java -jar 的命令来执行,当然得安装jdk).这种命令行 ...

  4. 【性能测试】：loadrunner直压MYSQL数据库的脚本开发

    有时性能测试,会涉及到直接压测数据库,测试数据库处理sql的水平,或者通过sql脚本向数据库写数据做铺地数据 这里贴上一个自己用的对数据库操作的脚本 一,首先要去下载一个LR压MYSQL的一个库文件, ...

  5. Mac拷贝/复制文件夹路径快捷键

    快捷键:Option+Command+C 显示路径在Finder: defaults write com.apple.finder _FXShowPosixPathInTitle -bool YES ...

  6. (转)CentOS 7 下 MySQL 5.7 配置 Percona Xtrabackup

    CentOS 7 下 MySQL 5.7 配置 Percona Xtrabackup 原文:http://qizhanming.com/blog/2017/05/10/install-percona- ...

  7. 18.async函数

    1.含义 async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 Generator 函数,依次读取两个文件. var fs = require('fs'); var ...

  8. python-锁机制

    锁 Lock() Lock(指令锁)是可用的最低级的同步指令.Lock处于锁定状态时,不被特定的线程拥有.Lock包含两种状态——锁定和非锁定,以及两个基本的方法. 可以认为Lock有一个锁定池,当线 ...

  9. springMVC流程分析

    下面是DispatcherServlet的doDispatch()方法 protected void doDispatch(HttpServletRequest request, HttpServle ...

  10. memcached 学习笔记 5

     memcached installed on linux 使用的操作系统是centos6.5 (有桌面) 1 上传libebent和memcache到/usr/local/src [root@jt ...