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 Array数组对象的扩展函数代码
May 22 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 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
关于手调机和数调机的选择
2021/03/02 无线电
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
php 数组的指针操作实现代码
2011/02/08 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
php标签云的实现代码
2012/10/10 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
PHP的PDO连接讲解
2019/01/24 PHP
js 数组操作代码集锦
2009/04/28 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
纯JS实现轮播图
2017/02/22 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
在python中实现对list求和及求积
2018/11/14 Python
python pygame模块编写飞机大战
2018/11/20 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
使用python实现对元素的长截图功能
2019/11/14 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
static关键字的用法
2013/10/07 面试题
乔迁之喜主持词
2014/03/27 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
绿色环保倡议书
2015/04/28 职场文书
贫困生证明范文
2015/06/16 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
Nginx配置根据url参数重定向
2022/04/11 Servers