JavaScript实现交互式日历：元素获取、日期填充与点击事件

94 浏览量更新于2024-08-30 收藏 47KB PDF 举报

本文档介绍了一个用JavaScript实现的简单日历功能的教程，主要分为三个部分。 **1. 获取li元素**: 通过DOM操作，作者使用两个嵌套的`for`循环遍历HTML结构中的`ul`元素，利用`children`属性获取所有`li`元素。这种方法确保了能够获取到每一个表示日期的列表项，为后续的日期填充和事件处理做准备。 **2. 填写日期**: 在填充日期时，作者关注于日期的布局逻辑。首先，确定当前月份的第一天是星期几，这将决定哪些日期需要在第一行开始填充。对于第一天之后的日期，按照实际天数依次填充，直到填满当月。对于第一行的上个月日期，计算方法是上个月的实际天数减去本月第一天的星期几再减1，这样可以确保上月的最后一天与本月的第一天对齐。同时，日期的显示会随着月份的变化而更新。 **3. 获取点击事件**: 利用JavaScript的事件冒泡机制，作者监听`li`元素的点击事件。当用户点击某个日期时，会触发事件处理器，通过修改`li`的`innerHTML`来显示对应日期。这意味着点击事件不仅能显示当前日期，还可以执行其他与该日期相关的操作，如标记、删除等。整个日历设计注重用户体验和交互性，通过清晰的布局和动态的日期显示，实现了简洁易用的功能。同时，代码中还包含了CSS样式，如`.clear`用于清除浮动，`.left`进行左浮动，以及`.gray`用于设置灰色文本等，保证了视觉效果的一致性。下面是完整的HTML结构和部分JavaScript代码片段，展示了这些关键部分是如何组合在一起的： ```html <!DOCTYPE html> <html lang="en"> <head>  <style> /* ... */ </style> </head> <body> <div class="top">  <div class="top.lf-tri"></div> <div class="top.content">月份和年份</div> <div class="top.rf-tri"></div> </div> <ul class="clear">   </ul> <script> // 日期填充和事件处理的JavaScript逻辑 // ... function fillDates() { // 获取当前月份第一天的星期几 // ... for (var i = 0; i <= daysInMonth; i++) { // 填充日期和判断上月日期 // ... } } // 点击事件处理 document.querySelector('ul').addEventListener('click', function(event) { var target = event.target; if (target.tagName === 'LI') { // 修改li的innerHTML显示对应日期 // ... } }); </script> </body> </html> ``` 通过这个简化的日历实现，读者可以了解到如何在JavaScript中动态生成和管理HTML元素，以及如何利用事件处理来增强用户的交互体验。

JS实现一个简单的日历实现一个简单的日历

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

1：通过节点间关系的属性children 获取li元素（两个for循坏遍历）；

2：在遍历填写日期时，在第一行判断在当月的第一天在星期几，然后从第一天开始填写，直到大于当月的天数就暂停填写，

并开始填写下个月的日期。第一行上个月的日期显示 : 上月天数显示开始值 = 计算上个月的天数 – 这个月开始的第一天在星

期几的值 -1，然后在第一行上月天数显示开始值自加。

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

效果图：效果图：

代码如下：代码如下：

<!doctype html>

<head>

<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;

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38698433

粉丝: 4
资源: 969

JavaScript实现交互式日历：元素获取、日期填充与点击事件

简易html日历

日历js源代码

js代码实现日历功能，超给力demo

JavaScript实现简单日历效果

用js实现的简单日历

JS实现简单日历特效

JavaScript实现简单的日历效果

纯JS实现简单的日历

js实现日历的简单算法

基于vue.js实现简单日历

最新资源