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 相关文章推荐
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
React-router4路由监听的实现
Aug 07 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
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
一个用php3编写的简单计数器
2006/10/09 PHP
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
个人站长制做网页常用的php代码
2007/03/03 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
Vue.use源码分析
2017/04/22 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
如何在Python中编写并发程序
2016/02/27 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
python入门之基础语法学习笔记
2020/02/08 Python
python实现随机加减法生成器
2020/02/24 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
外包公司软件测试工程师
2014/11/01 面试题
应届大学生的推荐信
2013/11/20 职场文书
火车来了教学反思
2014/02/11 职场文书
人力资源作业细则
2014/03/03 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS