JS实现一个简单的日历

前端之家收集整理的这篇文章主要介绍了JS实现一个简单的日历前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

效果图:

代码如下:

<Meta charset="UTF-8"> <Meta name="Generator" content="EditPlus®"> <Meta name="Author" content=""> <Meta name="Keywords" content=""> <Meta name="Description" content=""> calendar
      30
    • 31
    • 1
    • 2
    • 3
    • 4
    • 5
      6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
      13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
      20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
      27
    • 28
    • 1
    • 2
    • 3
    • 4
    • 5
      27
    • 28
    • 1
    • 2
    • 3
    • 4
    • 5

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

    猜你在找的JavaScript相关文章