JavaScript实现日历功能:获取指定日期周数及星期几
作者:异步漫步时间:2026-10-27 23:35:57浏览:77
本文介绍使用JavaScript实现日历交互功能的方法,通过HTML与JS配合,获取用户输入的年月日,计算该日期为当年第几天、第几周以及星期几。核心逻辑涉及月份天数累加、闰年判断及Date对象处理,并包含对输入值的合法性校验。
JavaScript实现日历获取指定日期周数及星期几
为了实现交互效果,项目选择使用JavaScript进行开发,这也可视为结对编程的一次尝试。前端展示部分由HTML完成,当用户点击按钮时,会触发名为check()的事件处理函数。
相关代码实现如下:
function onCheck(){
var Year = document.getElementById("year").value; //获取文本框的“年” var theYear =Year * 1; //转换为number类型 //alert(theYear); // 获取月值
var month = document.getElementById("month");
var index1=month.selectedIndex; var theMonth = month.options[index1].value; //获取月值
var day = document.getElementById("day");
var index2=day.selectedIndex;
var theDay = day.options[index2].value;
// 输入值判断部分
...
//调用核心函数
days(theYear,theMonth,theDay);
}
核心处理函数days的具体实现如下:
代码片段如下:
function days(year,month,day) {
var days = 0; //表示改日期为当年的第几天
//累加月天数
for(var i = 1; i < month; i++ ){
switch(i){
//大月的情况加31
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:{
days += 31;
break;
}
//小月的情况加30
case 4:
case 6:
case 9:
case 11:{
days += 30;
break;
}
//二月的情况,根据年类型来加
case 2:{
if(isLeapYear(year)){
days += 29; //闰年加29
}
else {
days += 28;
}
break;
}
}
}
day = day * 1;
days += day; //月天数之和加上日天数
var date0 = new Date(year,0,1); //当年的第一天是周几
// alert(date0.getDay());
var date1 = new Date(year,month-1,day); //将日期值格式化,0-11代表1月-12月;
// alert((days + date0.getDay()+6)/7);
var nthOfWeek = Math.floor((days + date0.getDay()+6)/7); //向下取整
// alert(nthOfWeek);
var toDay = new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
//day.getDay();根据Date返一个星期中的某其中0为星期日
alert("该日期是一年中的第"+days+"天\n"+" 是第"+nthOfWeek+"周的"+toDay[date1.getDay()]);
}
输入值合法性校验
在调试阶段,我们遇到了一些意外错误,例如类型不匹配导致的计算偏差以及数字舍入问题。在队友的协助下,他负责审核与辅助排查,我负责编码实施。在最后阶段的输入测试中,双方紧密配合,分析了各种可能的输入情况并涵盖潜在异常,从而快速完善了功能。以下是判断输入值是否合法的相关代码:
相关代码片段如下:
if (isNaN(theYear)|| theYear < 0) {
alert("输入有误,请重新输入");
return ;
}
if((theMonth == 2 && theDay > 29 && isLeapYear(theYear))||(theMonth == 2 && theDay > 28 && !isLeapYear(theYear))) {
alert("输入有误,请重新输入");
return ;
}
if((theMonth == 4 || theMonth == 6 || theMonth == 9 || theMonth == 11) && theDay == 31 ) {
alert("输入有误,请重新输入");
return ;
}作者最新文章
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
