JS实现一个简单的日历


Posted in Javascript onFebruary 22, 2017

主要分为三个部分,1:获取li元素 2:如何填写对应的日期 3:如何获取点击li元素的事件。

1:通过节点间关系的属性children 获取li元素(两个for循坏遍历);

2:在遍历填写日期时,在第一行判断在当月的第一天在星期几,然后从第一天开始填写,直到大于当月的天数就暂停填写,并开始填写下个月的日期。第一行上个月的日期显示  : 上月天数显示开始值 = 计算上个月的天数 - 这个月开始的第一天在星期几的值 -1,然后在第一行上月天数显示开始值自加。

3:利用JS的事件冒泡获取li的innerHTML显示出对应日期

效果图:

JS实现一个简单的日历

代码如下:

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>calendar</title>
 <style>
 .clear:after{
 content:"";
 display:table;
 clear:both;
 }
 .left{
 float:left;
 }
 ul{
 padding:0px;
 margin-top:5px;
 margin-bottom:0px;
 }
 ul>li{
 float:left;
 list-style:none;
 width:30px;
 height: 21px;
 border: 1px solid #ccc;
 text-align:center;
 }
 .gray{
 color:#766565;
 }
 .top {
 height:25px;
 }
 .top .lf-tri{
 border:10px solid transparent;
 border-right-color:black;
 margin-top:4px;
 }
 .top .rf-tri{
 border:10px solid transparent;
 border-left-color:black;
 margin-top:4px;
 }
 .top .content{
 width:185px;
 height:5px;
 text-align:center;
 }
 </style>
 </head>
 <body> 
 <div class="top clear">
 <div class="left lf-tri" onclick="lastMonth()"></div>
 <div class="left content">2017年2月1日</div>
 <div class="left rf-tri" onclick=" nextMonth()"></div>
 </div>
 <div>
 <div id="week">
 <ul class="clear">
 <li>日</li>
 <li>一</li>
 <li>二</li>
 <li>三</li>
 <li>四</li>
 <li>五</li>
 <li>六</li>
 <ul>
 </div>
 <div id="date" onclick='getDateNum(event)'>
 <ul class="clear">
 <li>30</li>
 <li>31</li>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ul>
 <ul class="clear">
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
 <li>10</li>
 <li>11</li>
 <li>12</li>
 </ul>
 <ul class="clear">
 <li>13</li>
 <li>14</li>
 <li>15</li>
 <li>16</li>
 <li>17</li>
 <li>18</li>
 <li>19</li>
 </ul>
 <ul class="clear">
 <li>20</li>
 <li>21</li>
 <li>22</li>
 <li>23</li>
 <li>24</li>
 <li>25</li>
 <li>26</li>
 </ul>
 <ul class="clear">
 <li>27</li>
 <li>28</li>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ul>
 <ul class="clear">
 <li>27</li>
 <li>28</li>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ul>
 </div>
 <div>
 <script>
 function $(id){
 return document.getElementById(id);
 }
 function change(cls){
 return document.getElementsByClassName(cls);
 }
 function getDateNum(e) {
 console.log(e && e.target.nodeName)//打印发生事件的元素,再获取元素nodeName
 if(e.target.nodeName=="LI"){//先判断nodeName是LI
 if(e.target.className!="gray"){//点击本月的日期,显示在日期栏
 change("content")[0].innerHTML = year+'年'+(month+1)+'月'+e.target.innerHTML+'日';
 }else{//点击灰色日期即(上个月或者下个月日期)切换到当月
 if(e.target.innerHTML>14){
 lastMonth();
 }else {
 nextMonth();
 }
 }
 }
 }
 //获取年、月
 var today = new Date();
 var year=today.getFullYear(), month = today.getMonth();
 var totalDay;
 var uls=$("date").children,list;
 function loadCalendar(){
 totalDay=getMonthDays(year,month+1);//计算一个月的天数
 var firstDay = (new Date(year,month,1)).getDay();//计算每个月1号在星期几
 var lastMonthDay=getMonthDays(year,month);
 var lastDayCal=lastMonthDay-firstDay+1;//计算上个月在第一行显示的天数
 //获取ul元素
 var num=1 ,nextNum=1;//日期显示
 // 类数组对象 转 数组
 //uls = Array.prototype.slice.call(uls)
 //获取li元素 填充
 for(var r=0;r<uls.length;r++){
 list=uls[r].children;//遍历ul,获得li
 for(var line=0;line<list.length;line++){
 if(r==0){//在第一行 与第一天进行判断 大于等于第一天时载入日期
 if(line>=firstDay){
 list[line].innerHTML=num++;
 list[line].setAttribute("class","");
 }else {
 list[line].innerHTML=lastDayCal++;//第一行的上个月天数显示
 list[line].setAttribute("class","gray");
 }
 }else {
 //判断是否超出天数 ,不超出则继续加,超出则显示下个月日期
 if(num<=totalDay){
 list[line].setAttribute("class","");
 list[line].innerHTML=num++;
 }else {
 list[line].innerHTML=nextNum++;//下个月日期显示
 list[line].setAttribute("class","gray");
 }
 }
 }
 }
 }
 loadCalendar();
 function getMonthDays(year,month){
 //判断2月份天数
 if(month==2){
 days= (year%4==0)&&(year%100!=0)||(year%400==0)? 29:28;
 }else {
 //1-7月 单数月为31日 
 if(month<7){
 days= month%2==1?31:30;
 }else {
 //8-12月 双月为31日
 days = month%2==0?31:30;
 }
 }
 return days; 
 }
 //右击箭头下个月
 //change("rf-tri")[0].onclick =
 function nextMonth() {
 month++;
 if(month>11){
 year+=1;
 month=0;
 }
 change("content")[0].innerHTML=year+"年"+(month+1)+"月"+"1日";
 //console.log(month+1);
 loadCalendar();
 }
 //左击箭头上个月
 //change("lf-tri")[0].onclick =
 function lastMonth() {
 month--;
 if(month<0){
 month=11;
 year-=1;
 }
 change("content")[0].innerHTML=year+"年"+(month+1)+"月"+"1日";
 //console.log(month+1);
 loadCalendar();
 }
 </script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
js 浮动层菜单收藏
Jan 16 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
js实现日历与定时器
Feb 22 #Javascript
JS验证字符串功能
Feb 22 #Javascript
Bootstrap3 模态框使用实例
Feb 22 #Javascript
Bootstrap3下拉菜单的实现
Feb 22 #Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 #Javascript
js仿微博动态栏功能
Feb 22 #Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 #Javascript
You might like
PHP 高手之路(一)
2006/10/09 PHP
php基础知识:函数基础知识
2006/12/13 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
layui实现数据分页功能
2019/07/27 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
房地产工程部经理岗位职责
2015/04/09 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书