JS实现一个简单的日历
更新时间：2017年02月22日 14:16:52 作者：Reber
本文主要介绍了用js实现一个日历的示例代码并解析其实现原理，具有很好的参考价值，下面跟着小编一起来看下吧
主要分为三个部分，1：获取li元素 2：如何填写对应的日期 3：如何获取点击li元素的事件。
1：通过节点间关系的属性children 获取li元素（两个for循坏遍历）；
2：在遍历填写日期时，在第一行判断在当月的第一天在星期几，然后从第一天开始填写，直到大于当月的天数就暂停填写，并开始填写下个月的日期。第一行上个月的日期显示 : 上月天数显示开始值 = 计算上个月的天数 - 这个月开始的第一天在星期几的值 -1，然后在第一行上月天数显示开始值自加。
3：利用JS的事件冒泡获取li的innerHTML显示出对应日期
效果图：
代码如下：
<!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中setInterval()和setTimeout()的用法及区别
这篇文章主要给大家介绍了关于JavaScript中setInterval()和setTimeout()用法及区别的相关资料,Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,需要的朋友可以参考下2023-11-11
firefox中用javascript实现鼠标位置的定位...2007-06-06
scrollWidth,clientWidth,offsetWidth的区别
这篇文章主要介绍了scrollWidth,clientWidth,offsetWidth的区别,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了JS原生带缩略图的图片切换效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了微信小程序公用参数与公用方法用法,结合实例形式分析了微信小程序中公用参数与公用方法的简单定义与使用相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了axios使用拦截器统一处理所有的http请求的方法,通过一段实例代码给大家介绍了axios拦截器使用，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章主要为大家详细介绍了JavaScript实现音乐自动切换和轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
JavaScript中SetInterval与setTimeout的用法详解
在写H5游戏时经常需要使用定时刷新页面实现动画效果，比较常用即setTimeout()以及setInterval()，但是大家对SetInterval与setTimeout的用法了解吗，下面通过本文给大家详解js中SetInterval与setTimeout的用法，需要的朋友参考下2015-11-11
使用ts进行开发的时候,不可避免的需要引用第三方的 JS 的库,但是默认情况下TS是不认识我们引入的这些JS库的,所以在使用这些JS库的时候,我们就要通过声明文件告诉TS它是什么,这篇文章主要给大家介绍了关于TypeScript声明文件的相关资料,需要的朋友可以参考下2022-05-05
在小程序云开发中，要实现上传文件至云存储，有两种方案：云函数和HTTP API，本文主要讲讲如何使用HTTP API实现小程序外上传文件至云存储，感兴趣的可以了解一下2022-01-01
最新评论