js实现,改变两个《select》年月下拉框的值,得到当年当月的日历

2024-02-07 13:08

本文主要是介绍js实现,改变两个《select》年月下拉框的值,得到当年当月的日历,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 效果图:改变两个《select》下拉框的值,得到当年当月的日历

思路 :

 <!---改变两个《select》下拉框的值,得到当年当月的日历

    具体思路:

    1。添加下拉框的值

    2。下拉框值的changen函数

    3。输出日历的方法:

        1.得到这个月的一月一日是星期几,getday()

        2.得到这个月有多少天,getDate();

        2.输出这个月的每一天-->

代码 :

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>日历</title><style>*{margin: 0px;padding: 0px;font-family:'Courier New', Courier, monospace;}#wrap{width: 700px;height: auto;margin: 50px auto;}.head{width: 100%;height: 60px;line-height: 60px;background: #666;text-align: center;color: #fff;}ul{width: 100%;}#title{width: 100%;height: 60px;line-height: 60px;text-align: center;display: flex;justify-content: space-between;}li{list-style-type: none;text-align: center;width: 100px;}#dateul li{list-style: none;text-align: center;width: 98px;float: left;height: 60px;line-height: 60px;border: 1px solid red;}</style>
</head>
<body><!---改变两个《select》下拉框的值,得到当年当月的日历具体思路:1。添加下拉框的值2。下拉框值的changen函数3。输出日历的方法:1.得到这个月的一月一日是星期几,getday()2.输出这个月的每一天--><div id="wrap"><div class="head"><select id="year"></select>年<select id="month"></select>月</div><ul id="title"><li>星期日</li><li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li><li>星期六</li></ul><ul id="dateul"></ul></div><script>//初始化select内容var year=document.getElementById("year");var month=document.getElementById("month");var dateul=document.getElementById("dateul");for (var y = 1990;y <3000;y++) {year.add(new Option(y,y));}for (var m = 0; m <12; m++) {month.add(new Option(m+1,m));//0代表1月}//初始化输入今天的日历onload=function(){var now=new Date();year.value=now.getFullYear();month.value=now.getMonth();showdate()}//onchang事件year.onchange=function(){showdate();}month.onchange=function(){showdate();}//输入日历function showdate(){dateul.innerHTML="";//清空var da=new Date(year.value,month.value);//获取当前下拉框的日期for(var i=0;i<da.getDay();i++)//得到这个月的一月一日是星期几{createLi("",dateul);}var TheMonthDayNumber=mGetDay(year.value,month.value);for (var i = 1; i <=TheMonthDayNumber; i++) {createLi(i,dateul);}}//返回年月中月的天数function mGetDay(yearNumber,monthNumber){monthNumber++;var thisDate =new Date(yearNumber,monthNumber,0)//后一个月的0天,表示前一个月的最后一天,即d为month月的天数return thisDate .getDate();}//输出li的函数,//给box盒子添加一个子元素 lifunction createLi(text,box){var li=document.createElement("li");li.innerHTML=text;box.appendChild(li);}</script>
</body>
</html>

 

注意事项: 

月份的范围是(0-11),

获取一个月的天数:

getDate() 可以取得当前月份的日期,如果要获取2020年六月的日期,可以实例化 new Date(2020,6,0),【月份从0开始这里的6是六月份】,因为6月0日是一个错误的日期格式,js自动纠错,所以实际日期变成了2020年5月的最后一天,所以getDate()获取的就是5月最后一天的日期【月份从0开始这里的5是六月份】。

这篇关于js实现,改变两个《select》年月下拉框的值,得到当年当月的日历的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/687822

相关文章

C#实现将Excel表格转换为图片(JPG/ PNG)

《C#实现将Excel表格转换为图片(JPG/PNG)》Excel表格可能会因为不同设备或字体缺失等问题,导致格式错乱或数据显示异常,转换为图片后,能确保数据的排版等保持一致,下面我们看看如何使用C... 目录通过C# 转换Excel工作表到图片通过C# 转换指定单元格区域到图片知识扩展C# 将 Excel

基于Java实现回调监听工具类

《基于Java实现回调监听工具类》这篇文章主要为大家详细介绍了如何基于Java实现一个回调监听工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录监听接口类 Listenable实际用法打印结果首先,会用到 函数式接口 Consumer, 通过这个可以解耦回调方法,下面先写一个

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown(MD)因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析

Qt中QGroupBox控件的实现

《Qt中QGroupBox控件的实现》QGroupBox是Qt框架中一个非常有用的控件,它主要用于组织和管理一组相关的控件,本文主要介绍了Qt中QGroupBox控件的实现,具有一定的参考价值,感兴趣... 目录引言一、基本属性二、常用方法2.1 构造函数 2.2 设置标题2.3 设置复选框模式2.4 是否

C++使用printf语句实现进制转换的示例代码

《C++使用printf语句实现进制转换的示例代码》在C语言中,printf函数可以直接实现部分进制转换功能,通过格式说明符(formatspecifier)快速输出不同进制的数值,下面给大家分享C+... 目录一、printf 原生支持的进制转换1. 十进制、八进制、十六进制转换2. 显示进制前缀3. 指

springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法

《springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法》:本文主要介绍springboot整合阿里云百炼DeepSeek实现sse流式打印,本文给大家介绍的非常详细,对大... 目录1.开通阿里云百炼,获取到key2.新建SpringBoot项目3.工具类4.启动类5.测试类6.测

pytorch自动求梯度autograd的实现

《pytorch自动求梯度autograd的实现》autograd是一个自动微分引擎,它可以自动计算张量的梯度,本文主要介绍了pytorch自动求梯度autograd的实现,具有一定的参考价值,感兴趣... autograd是pytorch构建神经网络的核心。在 PyTorch 中,结合以下代码例子,当你

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/