当前位置： 首页 > news >正文

CSS+Javascript+Html日历控件

news 2026/2/9 1:31:23

最近，因需要用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%;}}

这段代码主要定义了日历的样式，一个主要的方法简述如下：

  1. box-sizing：border-box;就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变。
  2. @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日历控件

最近&#xff0c;因需要用HTMLJAVASCRIPTCSS实现了一个日历控件&#xff0c;效果如下&#xff1a; 单击上月、下月进行日历切换。当前日期在日历中变颜色标注显示。还是老老套路、老方法&#xff0c;分HMLCSSJAVASCRIPT三部分代码。 一、html代码 <h1>学习计划</h1…...

编程日记 2023/11/2 4:40:10

让企业的数据用起来，数据中台=数据治理？

加gzh“大数据食铁兽”&#xff0c;了解更多数据治理信息。 先说结论&#xff1a;数据中台是数据管理/治理的工具之一&#xff0c;数据治理是3分技术7分管理及运营。 数据中台的定义&#xff1a; 狭义的数据中台指在企业内部通过对数据半成品、算法、模型、工具等能力的积累&a…...

编程日记 2023/11/2 4:39:08

【人工智能Ⅰ】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…...

编程日记 2023/11/2 4:38:08

软考高项-49个项目管理过程输入、输出和工具技术表

知识领域数量五大过程组启动规划执行监控收尾整体7制订项目章程制订项目管理计划指导与管理项目工作 管理项目知识 监控项目工作 实施整体变更控制 结束项目或阶段范围6规划范围管理 收集需求 定义范围 创建WBS 确认范围 控制范围 进度6规划进度管理 定义活动...

编程日记 2023/11/2 4:36:05

《C和指针》(7)函数

问题 具有空函数体的函数可以作为存根使用。你如何对这类函数进行修改&#xff0c;使其更加有用&#xff1f; 答&#xff1a;当存根函数被调用时&#xff0c;打印一条消息&#xff0c;显示它已被调用&#xff0c;或者也可以打印作为参数传递给它的值。 .如果在一个函数的声明中…...

编程日记 2023/11/2 4:34:02

vue3中的Props

Props声明 一个组件需要显示声明它所接受的props&#xff0c;这样vue才能知道外部传入的哪些是props&#xff0c;哪些是透传attribute 在使script setup的单文件中&#xff0c;props可以使用 defineProps()宏来声明&#xff1a; <script setup> const props definePro…...

编程日记 2023/11/2 4:33:01

ElasticSearch搜索技术深入与聚合查询实战

ES分词器详解 基本概念 分词器官方称之为文本分析器&#xff0c;顾名思义&#xff0c;是对文本进行分析处理的一种手段&#xff0c;基本处理逻辑为按照预先制定的分词规则&#xff0c;把原始文档分割成若干更小粒度的词项&#xff0c;粒度大小取决于分词器规则。 分词发生时…...

编程日记 2023/11/2 4:31:59

vue+element ui中的el-button自定义icon图标

实现 button的icon属性自定义一个图标名称&#xff0c;这个自定义的图标名称会默认添加到button下i标签的class上&#xff0c;我们只需要设置i标签的样式就可以了 ##3. 按钮上使用自定义的icon 完整代码 <div class"lookBtn"><el-button icon"el-icon-…...

编程日记 2023/11/2 4:30:58

PyQt5：构建目标检测算法GUI界面 (附python代码)

文章目录 1.界面2.代码3.Analyze 1.界面 目标检测算法一般就是检测个图片&#xff0c;然后显示图片结果。 最简单的情况&#xff0c;我们需要一个按钮读取图片&#xff0c;然后后有一个地方显示图片。 2.代码 import sys import numpy as np from PIL import Imagefrom PyQt…...

编程日记 2023/11/2 4:29:57

SV-10A-4G IP网络报警非可视终端 （4G版）

SV-10A-4G IP网络报警非可视终端 &#xff08;4G版&#xff09; https://item.taobao.com/item.htm?spma21dvs.23580594.0.0.621e3d0dpv5knb&ftt&id745728046948 产品简介&#xff1a; 通过局域网/广域网网组网的网络报警系统&#xff0c;改变传统局域网组网…...

编程日记 2023/11/2 4:28:56

对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…...

编程日记 2023/11/2 4:27:55

【k8s】资源管理命令-陈述式

一、资源管理介绍 1、资源管理概念 在kubernetes中&#xff0c;所有的内容都抽象为资源&#xff0c;用户需要通过操作资源来管理kubernetes。 //kubernetes的本质就是一个集群系统&#xff0c;用户可以在集群中部署各种服务&#xff0c;起始就是在kubernetes集群中运行一个个…...

编程日记 2023/11/2 4:26:51

无需频繁登录支付宝网站即可完成商家转账，实时到账，方便安全快捷

大家好&#xff0c;我是小悟 转账到支付宝账户是一种通过 API 完成单笔转账的功能&#xff0c;支付宝商家可以向其他支付宝账户进行单笔转账。 商家只需输入另一个正确的支付宝账号&#xff0c;即可将资金从本企业支付宝账户转账至另一个支付宝账户。 该产品适用行业较广&am…...

编程日记 2023/11/2 4:25:49

Vue 监听属性 watchEffect

watchEffect 函数&#xff1a;自动收集依赖源&#xff0c;不用指定监听哪个数据&#xff0c;在监听的回调中用到哪个数据&#xff0c;就监听哪个数据。 而 watch 函数&#xff1a;既要指定监听的数据&#xff0c;也要指定监听的回调。 watchEffect 函数&#xff1a;类似于 co…...

编程日记 2023/11/2 4:24:48

设计模式: 关于项目架构，技术选型，技术债务问题与解决方案

正确的选择是良好的开端 1 &#xff09;指标 系统稳健性系统健壮性 2 ) 衡量 在概念层次衡量架构质量在实际开发中衡量架构好坏 3 ) 架构分类 系统架构 从系统维度&#xff0c;负责整体系统的架构设计基础服务和各系统间协调&#xff0c;着眼全局比如关注负载&#xff0c…...

编程日记 2023/11/2 4:22:45

el-tabs 默认选中第一个

1. 实际开发中el-tabs 都会设置第一个为默认值 ,这样会好看一点, 而渲染的数据经常是通过后端返回的数据 , v-model 无法写死默认值 解决办法 , 通过计算机属性 ,在data 定义一个 selectedTab watch: {defaultTab(newVal) {this.selectedTab newVal; // 设置第一个标签页…...

编程日记 2023/11/2 4:21:44

R -- match,pmatch,charmatch

文章目录 matchpmatchcharmatch match ?matchDescription match returns a vector of the positions of (first) matches of its first argument in its second. 第一个向量中的元素在第二个向量中的位置&#xff0c;如果第二个向量中有多个仅返回第一个match 元素的位置&…...

编程日记 2023/11/2 4:20:43

数据结构——线性表①（顺序表）

一、线性表定义 线性表是一种数据结构&#xff0c;它是由n个具有相同数据类型的数据元素a1,a2,…,an组成的有限序列。 其中&#xff0c;除第一个元素a1外&#xff0c;每一个元素有且只有一个直接前驱元素&#xff0c;除了最后一个元素an外&#xff0c;每一个元素有且只有一个…...

编程日记 2023/11/2 4:19:42

MFC网络编程-Udp客户端

目录 1、UI的设计&#xff1a; 2、代码的实现&#xff1a; &#xff08;1&#xff09;、重写CSocket虚函数OnReceive&#xff0c;并且传入对话框的指针 &#xff08;2&#xff09;、初始化SOCKET &#xff08;3&#xff09;、绑定本地IP和端口 &#xff08;4&#xff09;、…...

编程日记 2023/11/2 4:18:41

密码学基础

密码学总览 信息安全面临的危险与应对这些威胁的密码技术&#xff1a; 关于上图中的威胁&#xff0c;这里在简单的说明&#xff1a; 窃听&#xff1a;指的是需要保密的消息被第三方获取。篡改&#xff1a;指的是消息的内容被第三方修改&#xff0c;达到欺骗的效果。伪装&…...

编程日记 2023/11/2 4:16:38

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2026/1/2 23:01:24

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/12/15 1:34:37

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2026/1/4 5:19:25

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2026/2/6 9:49:55

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

编程新知 2026/2/1 2:49:30

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2026/2/2 3:06:53

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/12/14 17:38:21