JS之日历实践

最新推荐文章于 2025-07-09 12:31:18 发布
最新推荐文章于 2025-07-09 12:31:18 发布 · 58 阅读 · 0

在很多采集信息的过程中，日期的准确输入是一个重要的问题，因为日期在不同的地方以不同的格式表达。本例旨在应用于网页中，用户可通过鼠标点击向程序输入日期数据。

程序是这个样子的：首先采集用户输入的年份和月份，经过计算获取该月份的最大天数，并获取月份第一天是星期几。然后在表格中填充该月份的具体信息。

<html>
<head>
<title>日历测试</title>
<script>

function getMonthJuZhen(date){

if(arguments.length == 0){
throw new Error("need a date");
}

if(arguments[0] == null){
throw new Error("date is null or undefined");
}

if(arguments[0] instanceof Date){

var monthjuzhen = new Array(5);
for(var r = 0 ; r < 5 ; r++){
monthjuzhen[r] = [0,0,0,0,0,0,0];
}

var maxDay = getMaxDay(arguments[0]);
arguments[0].setDate(1);
var r = 0;
var c = arguments[0].getDay();
for(var d = 1 ; d <= maxDay ; d++){
monthjuzhen[r][c] = d;
if(c == 6){
if(r == 4){
r = 0;
}
else{
r++;
}
c = 0;
}
else{
c++;
}
}

return monthjuzhen;

}
else{
throw new Error("need a date");
}
}

function getMaxDay(date){

if(arguments.length == 0){
throw new Error("need a date");
}

if(arguments[0] == null){
throw new Error("date is null or undefined");
}


if(arguments[0] instanceof Date){

var tempDate = new Date(arguments[0].toString());
if(arguments[0].getMonth() == 11){
tempDate.setFullYear((tempDate.getFullYear()+1));
tempDate.setMonth(0);
}
else{
tempDate.setMonth((tempDate.getMonth()+1));
}
return Math.floor((tempDate.getTime()-arguments[0].getTime())/(1000*60*60*24));
}
else{
throw new Error("need a date");
}
}


function updateDate(){
var yearInput = document.getElementById("yearinput");
var monthInput = document.getElementById("monthinput");
try{
var year = parseInt(yearInput.value);
var month = parseInt(monthInput.value);
if(isNaN(year)){
if(isNaN(month)){
monthInput.value = "";
}
yearInput.value = "";
return;
}
if(isNaN(month)){
monthInput.value = "";
return;
}
if(month > 12 || month < 1){
monthInput.value = "";
return;
}
month--;
var date = new Date(year,month);
var monthjuzhen = getMonthJuZhen(date);
var day;
var dayvalue;
for(var r in monthjuzhen){
for(var c in monthjuzhen[parseInt(r)]){
day = document.getElementById(r+"-"+c);
dayvalue = monthjuzhen[parseInt(r)][parseInt(c)];
if(dayvalue == 0){
if(day.hasChildNodes()){
day.removeChild(day.firstChild);
}
day.onmouseover = null;
day.onmouseout = null;
day.onclick = null;
continue;
}
if(day.hasChildNodes()){
day.firstChild.nodeValue = dayvalue;
}
else{
day.appendChild(document.createTextNode(dayvalue));
}
day.setAttribute("date",year+"-"+month+"-"+dayvalue);
day.onmouseover = function(){this.style.backgroundColor = "black";this.style.color = "white";};
day.onmouseout = function(){this.style.backgroundColor = "white";this.style.color = "black"};
day.onclick = subDate;
}
}
}
catch(e){
alert(e);
}
}

function subDate(){
var date = this.getAttribute("date").match(/(/d+)-(/d+)-(/d+)/);
alert(new Date(date[1],date[2],date[3]));
}

</script>
</head>
<body>
<div><table style="background-color:white;">
<tr>
<td colspan="7">
<input id="yearinput" type="text" size="4" MAXLENGTH="4" onchange="updateDate()"/>年
<input id="monthinput" type="text" size="2" MAXLENGTH="2" onchange="updateDate()"/>月&nbsp;&nbsp;<span onclick="updateDate()">更新</span></td>
</tr>
<tr>
<td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>
</tr>
<tr>
<td id="0-0"></td><td id="0-1"></td><td id="0-2"></td><td id="0-3"></td><td id="0-4"></td><td id="0-5"></td><td id="0-6"></td>
</tr>
<tr>
<td id="1-0"></td><td id="1-1"></td><td id="1-2"></td><td id="1-3"></td><td id="1-4"></td><td id="1-5"></td><td id="1-6"></td>
</tr>
<tr>
<td id="2-0"></td><td id="2-1"></td><td id="2-2"></td><td id="2-3"></td><td id="2-4"></td><td id="2-5"></td><td id="2-6"></td>
</tr>
<tr>
<td id="3-0"></td><td id="3-1"></td><td id="3-2"></td><td id="3-3"></td><td id="3-4"></td><td id="3-5"></td><td id="3-6"></td>
</tr>
<tr>
<td id="4-0"></td><td id="4-1"></td><td id="4-2"></td><td id="4-3"></td><td id="4-4"></td><td id="4-5"></td><td id="4-6"></td>
</tr>
</table>
</div>
</body>
</html>

iteye_1176
关注
JavaScript日历制作并实现拖动选择日期
Twinkle_sone的博客
07-12 1341
效果展示 代码 html <div id="timetable" onmouseup="mouseup(event)" onmousedown="mousedown(event)" onmousemove="mouseover(event)" ></div> <button id="clear">清空</button> css #timetable{ width: 21.875rem; height: 8.125rem; -webki
JS之日历实践附实现代码
10-30
在本文档中，我们主要讨论了使用JavaScript（JS）创建一个可交互的日历，并在网页上实现它，使得用户可以通过鼠标点击操作输入日期数据。这个过程涉及到JavaScript编程语言的基础知识，如函数定义、错误处理、日期...
JS日期处理
用文字记录的记忆
03-05 545
/** * 日期处理工具类 */ var DateUtil = function(){     /**      * 判断闰年      * @param date Date日期对象      * @return boolean true 或false      */     this.isLeapYear = function(date){         retur
原生js实现简单日历的制作
weixin_43673669的博客
02-22 1987
效果图 代码块 &amp;lt;!doctype html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;无标题文档&amp;lt;/title&amp;gt; &amp;lt;/head&a
用js实现一个日历
achao_2020的博客
01-28 1906
思路是这样的 日历分为两个部分，一个是header的星期，一个是body的日期，星期部分从周日开始，周一结束，而日期部分从什么时候开始，取决于本月的一号是周几，知道这些我们就可以开始编写一个日历了 首先准备我们需要的数据 把十二个月每个月有多少天列出来 获取当前月 获取今年（获取年份的主要目的是为了判断是否为闰年进而判断2月份有多少天） 月份天数list: monthInDay:[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] 当前月 mont.
JavaScript日历组件：入门至实践
weixin_35920379的博客
07-09 738
JavaScript日历组件是现代Web应用中不可或缺的一部分，尤其在处理日期和时间选择时显得尤为重要。它不仅能够提高用户体验，还能提升表单数据的有效性和准确性。文档对象模型（DOM）是一种以树状结构表现HTML和XML文档的接口。JavaScript通过DOM操作可以获取、修改、添加或删除文档的节点。每个节点都是一种对象，代表文档的一部分。DOM使得编程语言能够以编程方式访问文档结构、样式和内容，从而允许开发者动态地创建网页内容。
前端开发_JavaScript_常用对象之Date对象实践日历
u013185175的博客
01-03 521
Date对象实践万年历 1.引入 我们上一节课我们讲解了有关日期的Date()对象，现在我们写一个该对象的使用:日历。 2.实现思路 3.代码实现
掌握JavaScript与jQuery：日历应用开发实践
weixin_29940495的博客
04-09 268
本文深入探讨了如何使用JavaScript和jQuery技术开发日历应用程序。文中详细介绍了日历应用的核心功能实现，包括事件添加、编辑、删除等操作，并展示了AJAX与jQuery结合使用以实现无需刷新页面即可更新数据的技巧。此外，还探讨了通过jQuery扩展方法、事件处理和动画效果，增强了用户交互体验。本文对于前端开发者来说是一份实用的开发指南和参考资料。
JS.rar_javascript 日历_js_日历 java
09-21
在本示例中，"JS.rar_javascript 日历_js_日历 java" 提供了一个关于JavaScript日历功能的实现，这通常用于网页中的日期选择器，让用户能够方便地选取日期。 日历组件是Web开发中常见的交互元素，特别是在表单中...
原生js layDate日历控件多款日历选择器样式代码下载
11-10
原生JavaScript日历控件是前端开发中常见的一种交互元素，用于日期选择和时间输入。layDate是一款由layui团队开发的高效、轻量且功能丰富的原生JavaScript日历插件，它提供了多种日历选择器样式，适用于各种网页场景...
基于javascript实现日历功能原理及代码实例
10-15
在探讨如何使用JavaScript来实现一个日历功能之前，首先要了解日历的基本结构和显示原理。一个标准的日历通常包括年份、月份、星期以及天数。传统的日历布局通常是通过表格或者列表的排列组合来完成的，包括年份与...
基于C语言与AG32VF303单片机的智能输液器控制系统设计（含ESP8266 WIFI模块、PCB及源码文档）
12-03
本设计实现了一种基于AG32VF303可编程逻辑器件与ESP8266无线通信模块的智能输液监控系统。该系统提供了完整的源代码、设计文档及印制电路板布局文件，适用于学术研究、教学实践或工程开发等应用场景。经过充分验证的程序代码具备较高的可靠性，可供后续扩展与二次开发参考。 系统硬件架构以AG32VF303为核心处理器，配合ESP8266模块构建无线通信链路。操作界面支持物理按键与移动终端远程控制两种交互模式，用户可根据实际需求灵活选择控制方式。主要功能模块包括：输液流速精确调节单元、药液温度恒温管理单元以及储液容器液位监测预警单元。 工程文件中已包含完整的电路板设计资料，可直接用于生产制造。该设计方案充分考虑了临床输液过程的实际需求，通过集成化的控制策略实现了输液参数的智能化管理。 资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
【自主多无人机系统通信模式选择的概率模型】基于动态环境中的实时数据做出决策，从而提高多无人机协同作业中的协作效果与任务成功率（Matlab代码实现）
12-03
内容概要：本文提出了一种针对自主多无人机系统的通信模式选择概率模型，该模型能够基于动态环境中实时采集的数据进行智能决策，有效提升多无人机在协同作业中的协作效率与任务执行成功率。研究结合了不确定性因素的影响，采用Matlab实现算法仿真，构建了适应复杂环境变化的通信机制，重点解决了多无人机系统在动态环境下通信稳定性与可靠性的问题，具有较强的实用性和工程应用价值。; 适合人群：具备一定控制理论、通信系统或无人机相关背景，熟悉Matlab/Simulink仿真的科研人员及研究生；适用于从事多智能体系统、无线通信优化或协同控制方向的研究者。; 使用场景及目标：①应用于多无人机协同任务中的通信【自主多无人机系统通信模式选择的概率模型】基于动态环境中的实时数据做出决策，从而提高多无人机协同作业中的协作效果与任务成功率（Matlab代码实现）资源动态分配与模式切换；②为应对动态环境干扰下的通信中断问题提供决策支持；③提升复杂场景下无人机集群的任务完成率与系统鲁棒性； 阅读建议：建议结合Matlab代码深入理解模型实现细节，重点关注概率决策机制与实时数据处理流程，可进一步扩展至其他多智能体系统通信优化场景进行二次开发与验证。
UWB-IMU、UWB定位对比研究（Matlab代码实现）
最新发布
12-03
内容概要：本文主要围绕UWB-IMU与UWB定位技术的对比研究展开，基于Matlab代码实现，结合状态估计算法（如UKF、AUKF等）对两种定位方式的性能进行分析与比较。研究重点在于通过数据融合提升定位精度与稳定性，尤其适用于复杂环境下的高精度定位需求。文中提供了完整的仿真代码和实现方法，便于读者复现与扩展应用。此外，文档还列举了大量相关科研方向和技术服务内容，涵盖机器学习、信号处理、路径规划、电力系统等多个领域，展示了广泛的技术支持能力。; 适合人群：具备一定Matlab编程基础，从事定位技术、状态估计、传感器融合或相关科研UWB-IMU、UWB定位对比研究（Matlab代码实现）方向的研究生、科研人员及工程技术人员。; 使用场景及目标：①用于高精度室内定位系统的设计与优化；②开展UWB与IMU融合定位算法的研究与验证；③学习和掌握卡尔曼滤波（如UKF、EKF）在实际定位问题中的应用；④为科研项目提供算法仿真支持和技术参考。; 阅读建议：建议读者结合提供的Matlab代码逐模块分析，重点关注数据融合策略与状态估计实现过程，同时可参考文中提及的相关技术方向拓展研究思路。注意区分纯UWB与UWB-IMU融合方案的性能差异，深入理解IMU在补偿UWB信号缺失方面的关键作用。
基于Flask框架构建的弹幕微电影在线播放与互动平台_集成用户注册登录电影分类展示收藏评论弹幕实时发送与显示会员特权后台管理权限控制电影数据爬取与入库个人中心电影.zip
12-03
基于Flask框架构建的弹幕微电影在线播放与互动平台_集成用户注册登录电影分类展示收藏评论弹幕实时发送与显示会员特权后台管理权限控制电影数据爬取与入库个人中心电影.zip
六自由度机械臂ANN人工神经网络设计：正向逆向运动学求解、正向动力学控制、拉格朗日-欧拉法推导逆向动力学方程(Matlab代码实现)
12-03
内容概要：本文档围绕六自由度机械臂的ANN人工神经网络设计展开，涵盖正向与逆向运动学求解、正向动力学控制，并采用拉格朗日-欧拉法推导逆向动力学方程，所有内容均通过Matlab代码实现。同时结合RRT路径规划与B样条优化技术，提升机械臂运动轨迹的合理性与平滑性。文中还涉及多种先进算法与仿真技术的应用，如状态估计中的UKF、AUKF、EKF等滤波方法，以及PINN、INN、CNN-LSTM等神经网络模型在工程问题中的建模与求解，展示了Matlab在机器人控制、智能算法与系统仿真中的强大能力。; 适合人群：具备一定Ma六自由度机械臂ANN人工神经网络设计：正向逆向运动学求解、正向动力学控制、拉格朗日-欧拉法推导逆向动力学方程(Matlab代码实现)tlab编程基础，从事机器人控制、自动化、智能制造、人工智能等相关领域的科研人员及研究生；熟悉运动学、动力学建模或对神经网络在控制系统中应用感兴趣的工程技术人员。; 使用场景及目标：①实现六自由度机械臂的精确运动学与动力学建模；②利用人工神经网络解决传统解析方法难以处理的非线性控制问题；③结合路径规划与轨迹优化提升机械臂作业效率；④掌握基于Matlab的状态估计、数据融合与智能算法仿真方法； 阅读建议：建议结合提供的Matlab代码进行实践操作，重点理解运动学建模与神经网络控制的设计流程，关注算法实现细节与仿真结果分析，同时参考文中提及的多种优化与估计方法拓展研究思路。
谷粒商城是一个完整的大型分布式架构电商平台项目它全面涵盖了微服务架构下的各项核心技术旨在通过实战演练帮助开发者掌握高并发高可用的企业级电商系统开发能力_该项目以电商业务为核心.zip
12-03
谷粒商城是一个完整的大型分布式架构电商平台项目它全面涵盖了微服务架构下的各项核心技术旨在通过实战演练帮助开发者掌握高并发高可用的企业级电商系统开发能力_该项目以电商业务为核心.zip
微信小程序菜谱系统源码：含推荐、分类、列表与详情功能模块
12-03
该微信小程序专注于提供烹饪指导服务，其核心功能模块涵盖个性化食谱推送、系统化类别划分、结构化菜单陈列以及详尽的制作步骤解析。平台通过算法分析用户偏好，实现定制化内容推荐；同时依据食材类型、烹饪难度及菜系流派进行多维度分类，便于用户精准检索。每个食谱均附有高清图文教程、精确配料比例、分阶段操作指南及营养构成分析，确保烹饪过程的可靠性与成功率。界面设计强调逻辑清晰与操作便捷，支持收藏、分享及进度跟踪等辅助功能，旨在构建一体化的数字厨房助手体验。 资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值