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 相关文章推荐
js 窗口抖动示例
Sep 04 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
Vue如何清空对象
Mar 03 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
PHP实现网上点歌(二)
2006/10/09 PHP
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
php实现计数器方法小结
2015/01/05 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Django权限设置及验证方式
2020/05/13 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
机械绘图员岗位职责
2013/11/19 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
行政部总经理岗位职责
2014/01/04 职场文书
汽车促销活动方案
2014/03/31 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
工作收入证明模板
2014/10/10 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
MySQL常见优化方案汇总
2022/01/18 MySQL
Redis批量生成数据的实现
2022/06/05 Redis