自己编码实现HTML显示日历资源-CSDN文库

共2个文件

html：2个

需积分: 39 49 浏览量 2015-09-04 08:51:17 上传评论收藏 3KB ZIP 举报

在IT领域，HTML和JavaScript是构建网页交互功能的基石。本话题聚焦于如何利用这两种技术自定义一个日历选择器，让用户能够方便地在文本框中点击后弹出日历，选择日期。这个功能常见于许多网页表单中，提高了用户体验并确保了数据输入的准确性。我们需要理解HTML的基础结构。HTML（HyperText Markup Language）是用来创建网页的标记语言，它通过标签来定义页面元素。在实现日历功能时，我们至少需要一个文本框(input[type="text"])，用于显示用户选定的日期，以及一个触发日历弹出的按钮(input[type="button"]或<button>)。 JavaScript，另一方面，是运行在浏览器端的脚本语言，负责处理页面的动态效果和用户交互。在这里，我们将使用JavaScript来监听用户的点击事件，当点击文本框或按钮时，动态生成并显示日历。下面是一个简单的JavaScript实现步骤： 1. **事件监听**：为文本框添加点击事件监听器，当用户点击时，显示日历。可以使用`addEventListener`函数完成这一操作。 ```javascript document.getElementById('dateInput').addEventListener('click', showCalendar); ``` 2. **生成日历**：`showCalendar`函数将创建一个表示月份的日历表格，包括上月、本月和下月的日期。 3. **计算月份**：根据当前日期计算出本月的第一天是星期几，然后生成对应的表格行。 4. **创建DOM元素**：使用JavaScript创建`<table>`，`<tr>`，`<td>`等元素，并填充日历数据。 5. **添加样式**：为了使日历看起来更美观，需要编写CSS样式来调整布局和颜色。 6. **交互逻辑**：当用户点击某一天的日期时，更新文本框的值，并隐藏日历。 ```javascript function showCalendar() { // 创建日历元素、计算日期、填充数据 // ... document.getElementById('calendarContainer').innerHTML = calendarHTML; // 更新DOM // 添加点击事件到日历中的日期 var dateCells = document.querySelectorAll('#calendar td'); for (var i = 0; i < dateCells.length; i++) { dateCells[i].addEventListener('click', selectDate); } } function selectDate(e) { document.getElementById('dateInput').value = e.target.innerText; hideCalendar(); // 隐藏日历 } ``` 在这个过程中，你还需要考虑一些边缘情况，比如闰年二月的天数、非当前年的日期处理等。同时，为了增强用户体验，可以加入键盘导航和关闭日历的快捷方式，如点击日历外的任何地方或按下ESC键。实现一个自定义的HTML日历组件涉及到HTML布局、JavaScript事件处理和DOM操作，以及一些日期处理的逻辑。这个过程不仅可以提升你的前端开发技能，还能让你更好地理解网页交互的工作原理。通过不断实践和优化，你可以创建出功能强大且用户体验优秀的日历组件。

资源推荐

资源详情

资源评论

收起资源包目录

自己编码实现HTML显示日期.zip （2个子文件）

自己编码实现HTML显示日期

myCalunda.html 1017B

myDate.html 4KB

<!DOCTYPE html> <html> <head> <title>日期选择器</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <script type="text/javascript"> //填充默认数据 function fillDate(){ var opt; var optMonth; var d = new Date(); var year = document.getElementById("year"); var month = document.getElementById("month"); var now=2555; for(var i=0;i<1000;i++){ if(d.getFullYear()==now-i) { opt=new Option(now-i,now-i,true,true); }else{ opt=new Option(now-i,now-i); } year.appendChild(opt); } //给月份添加下拉列表 for(var i=1;i<=12;i++){ if(d.getMonth()==(i-1)) { opt=new Option(i,i,true,true); }else{ opt=new Option(i,i); } month.appendChild(opt); } setDay(); } //设置日期与星期相对应 function setDay(){ var count=1; var countDays=1; var year = document.getElementById("year"); var month = document.getElementById("month"); var erYue=checkYunNian(year.value); var thisDate=new Date(year.value,month.value-1,1); var workday=thisDate.getDay()-1; var d = document.getElementById("d"); //var rowLen=d.rows.length; var rowLen=1; //循环插入5行 //alert(rowLen); //for(var k=0;k<5;K++){ var r = d.insertRow(rowLen); for(var i=0;i<=workday;i++){ var c = r.insertCell(i); c.innerHTML=" "; } var amonth=thisDate.getMonth()+1; //alert(thisDate.toLocaleDateString()); if(amonth==1||amonth==3||amonth==5||amonth==7||amonth==8||amonth==10||amonth==12){ for(var i=workday+1;i<32+workday;i++){ if(i%7==0){ var r = d.insertRow(rowLen+1); rowLen=rowLen+1; } var c = r.insertCell(i%7); c.innerHTML=count; count = count+1; } }else if(amonth==2){ for(var i=workday+1;i<erYue+workday;i++){ if(i%7==0){ var r = d.insertRow(rowLen+1); rowLen=rowLen+1; } var c = r.insertCell(i%7); c.innerHTML=count; count = count+1; } }else{ for(var i=workday+1;i<31+workday;i++){ if(i%7==0){ var r = d.insertRow(rowLen+1); rowLen=rowLen+1; } var c = r.insertCell(i%7); c.innerHTML=count; count = count+1; } } //} addEventForTd(); addEventForOption(); } //给表格的列添加事件 function addEventForTd(){ var tds = document.getElementsByTagName("td"); for(var i=7;i<tds.length;i++){ if(tds[i].innerHTML!=" "){ tds[i].onclick=function(){ getTdValue(this); }; } } } //设置列的事件方法 function getTdValue(obj){ var year = document.getElementById("year").value; var month = document.getElementById("month").value; var day=obj.innerHTML; window.returnValue=year+"/"+month+"/"+obj.innerHTML; window.close(); } //给下拉列表添加事件 function addEventForOption(){ var options = document.getElementsByTagName("option"); for(var i=0;i<options.length;i++){ options[i].onclick=setDayForSelect; } } //设置下拉列表的事件方法 function setDayForSelect(){ clearTable(); } //清空表格内容 function clearTable(){ var d = document.getElementById("d"); var rowLen=d.rows.length; for(var i=rowLen-1;i>=1;i--){ //alert(i); d.deleteRow(i); } setDay(); } function checkYunNian(y){ if((y%4==0&&y%100!=0)||(y%400==0)){ return 30;//本来29天，返回时需要+1天 }else{ return 29;//本来28天，返回时需要+1天 } } </script> </head> <body onload="fillDate();"> <form action=""> <select id="year"></select> <select id="month"> </select> <table id="d" style="width: 200px;height: 200px;" > <tr> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr> </table> </form> </body> </html>

评论收藏

内容反馈