CSS+Javascript+Html日历控件
最近，因需要用HTML+JAVASCRIPT+CSS实现了一个日历控件，效果如下：
单击上月、下月进行日历切换。当前日期在日历中变颜色标注显示。还是老老套路、老方法，分HML+CSS+JAVASCRIPT三部分代码。
一、html代码
<h1>学习计划</h1> <div class="month"> <ul><li class="prev"><上月</li><li class="next">下月></li><li style="text-align:center"><span id="monthbox">10月</span><br><span style="font-size:18px" id="yearbox">2023年</span></li></ul></div><ul class="weekdays"><li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li><li>星期六</li><li>星期日</li></ul> <ul class="days"></ul>
这段代码主要包含三个部分，一是头部显示年月，上月、下月切换按钮；二是显示星期一到日；三是日期容器，存在日期。
二、CSS代码
* {box-sizing:border-box;}ul {list-style-type: none;}body {font-family: Verdana,sans-serif;} .month {padding: 70px 25px;width: 100%;background: #1abc9c;} .month ul {margin: 0;padding: 0;} .month ul li {color: white;font-size: 20px;text-transform: uppercase;letter-spacing: 3px;} .month .prev {float: left;padding-top: 10px;cursor: pointer;} .month .next {float: right;padding-top: 10px;cursor: pointer;} .weekdays {margin: 0;padding: 10px 0;background-color: #ddd;} .weekdays li {display: inline-block;width: 13.6%;color: #666;text-align: center;} .days {padding: 10px 0;background: #eee;margin: 0;} .days li {list-style-type: none;display: inline-block;width: 13.6%;text-align: center;margin-bottom: 5px;font-size:12px;color: #777;} .days li .active {padding: 5px;background: #1abc9c;color: white !important} /* Add media queries for smaller screens */@media screen and (max-width:720px) {.weekdays li, .days li {width: 13.1%;}} @media screen and (max-width: 420px) {.weekdays li, .days li {width: 12.5%;} .days li .active {padding: 2px;}}@media screen and (max-width: 290px) {.weekdays li, .days li {width: 12.2%;}}
这段代码主要定义了日历的样式，一个主要的方法简述如下：
- box-sizing：border-box;就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变。
- @media screen and (max-width:720px) 。表示当浏览器的可视区域小于720px时候，执行。
三、Javascript代码
<script type="text/javascript">var currentDate=new Date();function showDateList(){let year = currentDate.getFullYear();let month = currentDate.getMonth()+1;let date = currentDate.getDate();let firstWeekDay = new Date(year,month-1,1).getDay();let monthDays = new Date(year,month,0).getDate();let str="";let daylength = monthDays+firstWeekDay-1;let startDay = firstWeekDay-1if(firstWeekDay==0) {daylength =monthDays+6;startDay=6;}for (var i = 0; i <daylength ; i++) {if(i<startDay){str +="<li></li>"}else{let today = new Date();let todate =(i-startDay+1);console.log(date)if(year == today.getFullYear() && month == today.getMonth()+1 &&todate== today.getDate()){str +="<li><span class='active'>"+todate+"</span></li>";}else{str +="<li>"+todate+"</li>";} }}document.querySelector("#monthbox").innerHTML=month+"月";document.querySelector("#yearbox").innerHTML=year+"年";document.querySelector(".days").innerHTML=str;}showDateList();document.querySelector(".next").onclick= function(){currentDate.setMonth(currentDate.getMonth() + 1);showDateList();}document.querySelector(".prev").onclick= function(){currentDate.setMonth(currentDate.getMonth() - 1);showDateList();}</script>
此段代码实现了当月日历情况，单击上月、下月进行月份切换。
这样我们的日历就成型了，完整代码如下，请参考：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title></title><style>* {box-sizing:border-box;}ul {list-style-type: none;}body {font-family: Verdana,sans-serif;}.month {padding: 70px 25px;width: 100%;background: #1abc9c;} .month ul {margin: 0;padding: 0;} .month ul li {color: white;font-size: 20px;text-transform: uppercase;letter-spacing: 3px;} .month .prev {float: left;padding-top: 10px;cursor: pointer;} .month .next {float: right;padding-top: 10px;cursor: pointer;} .weekdays {margin: 0;padding: 10px 0;background-color: #ddd;} .weekdays li {display: inline-block;width: 13.6%;color: #666;text-align: center;} .days {padding: 10px 0;background: #eee;margin: 0;} .days li {list-style-type: none;display: inline-block;width: 13.6%;text-align: center;margin-bottom: 5px;font-size:12px;color: #777;} .days li .active {padding: 5px;background: #1abc9c;color: white !important} /* Add media queries for smaller screens */@media screen and (max-width:720px) {.weekdays li, .days li {width: 13.1%;}} @media screen and (max-width: 420px) {.weekdays li, .days li {width: 12.5%;} .days li .active {padding: 2px;}}@media screen and (max-width: 290px) {.weekdays li, .days li {width: 12.2%;}}</style></head>
<body><h1>学习计划</h1> <div class="month"> <ul><li class="prev"><上月</li><li class="next">下月></li><li style="text-align:center"><span id="monthbox">10月</span><br><span style="font-size:18px" id="yearbox">2023年</span></li></ul></div><ul class="weekdays"><li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li><li>星期六</li><li>星期日</li></ul> <ul class="days"></ul> <script type="text/javascript">var currentDate=new Date();function showDateList(){let year = currentDate.getFullYear();let month = currentDate.getMonth()+1;let date = currentDate.getDate();let firstWeekDay = new Date(year,month-1,1).getDay();let monthDays = new Date(year,month,0).getDate();let str="";let daylength = monthDays+firstWeekDay-1;let startDay = firstWeekDay-1if(firstWeekDay==0) {daylength =monthDays+6;startDay=6;}for (var i = 0; i <daylength ; i++) {if(i<startDay){str +="<li></li>"}else{let today = new Date();let todate =(i-startDay+1);console.log(date)if(year == today.getFullYear() && month == today.getMonth()+1 &&todate== today.getDate()){str +="<li><span class='active'>"+todate+"</span></li>";}else{str +="<li>"+todate+"</li>";}}}document.querySelector("#monthbox").innerHTML=month+"月";document.querySelector("#yearbox").innerHTML=year+"年";document.querySelector(".days").innerHTML=str;}showDateList();document.querySelector(".next").onclick= function(){currentDate.setMonth(currentDate.getMonth() + 1);showDateList();}document.querySelector(".prev").onclick= function(){currentDate.setMonth(currentDate.getMonth() - 1);showDateList();}</script>
</body>
</html>
相关文章：
CSS+Javascript+Html日历控件
最近，因需要用HTMLJAVASCRIPTCSS实现了一个日历控件，效果如下： 单击上月、下月进行日历切换。当前日期在日历中变颜色标注显示。还是老老套路、老方法，分HMLCSSJAVASCRIPT三部分代码。 一、html代码 <h1>学习计划</h1…...
让企业的数据用起来，数据中台=数据治理？
加gzh“大数据食铁兽”，了解更多数据治理信息。 先说结论：数据中台是数据管理/治理的工具之一，数据治理是3分技术7分管理及运营。 数据中台的定义： 狭义的数据中台指在企业内部通过对数据半成品、算法、模型、工具等能力的积累&a…...
【人工智能Ⅰ】5-粒子群算法
【人工智能Ⅰ】5-粒子群算法 文章目录 【人工智能Ⅰ】5-粒子群算法5.1 粒子群算法PSO基本思想5.2 PSO介绍5.3 PSO求最优解5.4 算法流程5.5 PSO构成要素群体大小m权重因子最大速度Vm停止准则粒子空间的初始化领域的拓扑结构 5.6 PSO应用5.7 PSO改进动态调整惯性权重收缩因子法 5…...
软考高项-49个项目管理过程输入、输出和工具技术表
知识领域数量五大过程组启动规划执行监控收尾整体7制订项目章程制订项目管理计划指导与管理项目工作 管理项目知识 监控项目工作 实施整体变更控制 结束项目或阶段范围6规划范围管理 收集需求 定义范围 创建WBS 确认范围 控制范围 进度6规划进度管理 定义活动...
《C和指针》(7)函数
问题 具有空函数体的函数可以作为存根使用。你如何对这类函数进行修改，使其更加有用？ 答：当存根函数被调用时，打印一条消息，显示它已被调用，或者也可以打印作为参数传递给它的值。 .如果在一个函数的声明中…...
vue3中的Props
Props声明 一个组件需要显示声明它所接受的props，这样vue才能知道外部传入的哪些是props，哪些是透传attribute 在使script setup的单文件中，props可以使用 defineProps()宏来声明： <script setup> const props definePro…...
ElasticSearch搜索技术深入与聚合查询实战
ES分词器详解 基本概念 分词器官方称之为文本分析器，顾名思义，是对文本进行分析处理的一种手段，基本处理逻辑为按照预先制定的分词规则，把原始文档分割成若干更小粒度的词项，粒度大小取决于分词器规则。 分词发生时…...
vue+element ui中的el-button自定义icon图标
实现 button的icon属性自定义一个图标名称，这个自定义的图标名称会默认添加到button下i标签的class上，我们只需要设置i标签的样式就可以了 ##3. 按钮上使用自定义的icon 完整代码 <div class"lookBtn"><el-button icon"el-icon-…...
PyQt5：构建目标检测算法GUI界面 (附python代码)
文章目录 1.界面2.代码3.Analyze 1.界面 目标检测算法一般就是检测个图片，然后显示图片结果。 最简单的情况，我们需要一个按钮读取图片，然后后有一个地方显示图片。 2.代码 import sys import numpy as np from PIL import Imagefrom PyQt…...
SV-10A-4G IP网络报警非可视终端 （4G版）
SV-10A-4G IP网络报警非可视终端 （4G版） https://item.taobao.com/item.htm?spma21dvs.23580594.0.0.621e3d0dpv5knb&ftt&id745728046948 产品简介： 通过局域网/广域网网组网的网络报警系统，改变传统局域网组网…...
对xml文本元素赋值
public static void main(String[] args) {Map map ....;//数据Iterator it doc.getRootElement().elementIterator();//doc是xml模板//将元素ID与输入框的值放在map中while (it.hasNext()) {org.dom4j.Element nextRoot (org.dom4j.Element) it.next();Iterator nextIt ne…...
【k8s】资源管理命令-陈述式
一、资源管理介绍 1、资源管理概念 在kubernetes中，所有的内容都抽象为资源，用户需要通过操作资源来管理kubernetes。 //kubernetes的本质就是一个集群系统，用户可以在集群中部署各种服务，起始就是在kubernetes集群中运行一个个…...
无需频繁登录支付宝网站即可完成商家转账，实时到账，方便安全快捷
大家好，我是小悟 转账到支付宝账户是一种通过 API 完成单笔转账的功能，支付宝商家可以向其他支付宝账户进行单笔转账。 商家只需输入另一个正确的支付宝账号，即可将资金从本企业支付宝账户转账至另一个支付宝账户。 该产品适用行业较广&am…...
Vue 监听属性 watchEffect
watchEffect 函数：自动收集依赖源，不用指定监听哪个数据，在监听的回调中用到哪个数据，就监听哪个数据。 而 watch 函数：既要指定监听的数据，也要指定监听的回调。 watchEffect 函数：类似于 co…...
设计模式: 关于项目架构，技术选型，技术债务问题与解决方案
正确的选择是良好的开端 1 ）指标 系统稳健性系统健壮性 2 ) 衡量 在概念层次衡量架构质量在实际开发中衡量架构好坏 3 ) 架构分类 系统架构 从系统维度，负责整体系统的架构设计基础服务和各系统间协调，着眼全局比如关注负载，…...
el-tabs 默认选中第一个
1. 实际开发中el-tabs 都会设置第一个为默认值 ,这样会好看一点, 而渲染的数据经常是通过后端返回的数据 , v-model 无法写死默认值 解决办法 , 通过计算机属性 ,在data 定义一个 selectedTab watch: {defaultTab(newVal) {this.selectedTab newVal; // 设置第一个标签页…...
R -- match,pmatch,charmatch
文章目录 matchpmatchcharmatch match ?matchDescription match returns a vector of the positions of (first) matches of its first argument in its second. 第一个向量中的元素在第二个向量中的位置，如果第二个向量中有多个仅返回第一个match 元素的位置&…...
数据结构——线性表①（顺序表）
一、线性表定义 线性表是一种数据结构，它是由n个具有相同数据类型的数据元素a1,a2,…,an组成的有限序列。 其中，除第一个元素a1外，每一个元素有且只有一个直接前驱元素，除了最后一个元素an外，每一个元素有且只有一个…...
MFC网络编程-Udp客户端
目录 1、UI的设计： 2、代码的实现： （1）、重写CSocket虚函数OnReceive，并且传入对话框的指针 （2）、初始化SOCKET （3）、绑定本地IP和端口 （4）、…...
密码学基础
密码学总览 信息安全面临的危险与应对这些威胁的密码技术： 关于上图中的威胁，这里在简单的说明： 窃听：指的是需要保密的消息被第三方获取。篡改：指的是消息的内容被第三方修改，达到欺骗的效果。伪装&…...
ComfyUI-Custom-Scripts自动完成功能完整指南：提升AI绘画效率的终极解决方案
ComfyUI-Custom-Scripts自动完成功能完整指南：提升AI绘画效率的终极解决方案 【免费下载链接】ComfyUI-Custom-Scripts Enhancements & experiments for ComfyUI, mostly focusing on UI features 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-Custo…...
Win7专业版电脑重启后时间服务总停止？三步设置让它稳定运行（附命令详解）
Win7时间服务异常终极修复指南：从原理到实战每次重启Win7电脑后，右下角的时间总是停留在过去？这可能是Windows时间服务（w32time）在捣鬼。作为系统核心组件之一，时间服务不仅影响时钟显示，更会干…...
Titanic数据集分析避坑指南：新手常犯的3个错误及如何修正
Titanic数据集分析避坑指南：新手常犯的3个错误及如何修正泰坦尼克号数据集是机器学习领域的"Hello World"，但看似简单的数据背后藏着无数陷阱。许多初学者在Kaggle等平台提交分析时，常常陷入三个典型误区：用均值粗暴填充…...
新手也能搞定的Unity 2D像素风游戏：用免费素材包快速搭建你的第一个横版关卡（附JUNGLE RULES风格参考）
零基础打造Unity 2D像素风横版游戏：从素材获取到完整关卡实战指南像素风格游戏近年来持续走红，其独特的复古魅力与相对较低的制作门槛，使其成为独立开发者和新手的理想选择。Unity作为当下最受欢迎的游戏引擎之一，提供了完善的2D开…...
2026年AI模型接口中转站真实测评：五大主流大模型API聚合平台深度实测调研指南
进入2026年，大语言模型的工程化落地已经走完从尝鲜到规模化普及的全流程，对于广大AI应用开发者而言，AI大模型接口中转站早就不是过去仅承担接口转发的简单工具，如今它已经承担起链路高可用保障、多模型负载均衡、跨协议自动转换等…...
保险领域AutoML实战：从数据不平衡到模型部署的端到端解决方案
1. 项目概述：当AutoML遇上保险数据在保险行业摸爬滚打了十几年，从最初用Excel做简单的赔付率分析，到后来引入逻辑回归、决策树，再到如今面对动辄上百个特征、千万级样本的复杂数据集，我深刻体会到一件事：构…...
专业级AI音频处理实战指南：OpenVINO插件让Audacity变身智能音频工作站 [特殊字符]
专业级AI音频处理实战指南：OpenVINO插件让Audacity变身智能音频工作站 🎵 【免费下载链接】openvino-plugins-ai-audacity A set of AI-enabled effects, generators, and analyzers for Audacity. 项目地址: https://gitcode.com/gh_mirrors/op/openv…...
云原生事件驱动架构：构建高效的事件处理系统
云原生事件驱动架构：构建高效的事件处理系统 引言 在云原生环境中，事件驱动架构是一种高效的系统设计模式。通过事件驱动，可以实现松耦合、高可用的系统。事件驱动架构已经成为构建现代化应用的重要方法。 作为一名资深的DevOps工程师&#x…...
Kubernetes事件驱动架构设计：构建响应式微服务系统
Kubernetes事件驱动架构设计：构建响应式微服务系统 一、事件驱动架构概述 事件驱动架构（EDA） 是一种设计模式，其中系统的行为由事件触发。在Kubernetes环境中，事件驱动架构可以实现松耦合、高可扩展的微服务系统。 …...
从0到99.3%上下文保真度：一位阿里云M6架构师复盘DeepSeek生产环境12类对话断裂根因与自动修复脚本
更多请点击： https://intelliparadigm.com 第一章：DeepSeek多轮对话优化的演进脉络与核心挑战 DeepSeek系列模型在多轮对话场景中的持续迭代，本质上是围绕上下文建模能力、状态一致性维持与推理效率三者协同演进的过程。早期版本依赖静态窗…...