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%;}}

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

  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-1
			if(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-1
			if(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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/110741.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

1.6 基本安全设计准则

1.6 基本安全设计准则

思维导图&#xff1a; 1.6 基本安全设计准则笔记 目标&#xff1a;理解和遵循一套广泛认可的安全设计准则&#xff0c;以指导保护机制的开发。 主要准则&#xff1a; 机制的经济性&#xff1a;安全机制应设计得简单、短小&#xff0c;便于测试和验证&#xff0c;减少漏洞和降…
阅读更多...
ES 8.x新特性一览(完整版)

ES 8.x新特性一览(完整版)

一、看点 在 2022 年 2 月 11 日&#xff0c;Elasticsearch&#xff08;ES&#xff09;正式发布了 8.0 版本&#xff0c;而截止到 2023 年 10 月&#xff0c;历经一年半时间&#xff0c;ES官方已经连续发布了多个版本&#xff0c;最新版本为 8.10.4。这一系列的更新引入了众多引…
阅读更多...
idea 一键部署jar包

idea 一键部署jar包

上传成功
阅读更多...
【算法|动态规划No.32 | 完全背包问题】完全背包模板题

【算法|动态规划No.32 | 完全背包问题】完全背包模板题

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…
阅读更多...
如何知道服务器的某个端口是否打开

如何知道服务器的某个端口是否打开

1、telnet 命令&#xff1a;telnet ip port&#xff0c;port即端口&#xff0c;我们一般最常见的命令就是telnet&#xff0c;但是telnet使用的是tcp协议&#xff0c;换句话说telnet只能检测tcp的这个端口打开了没 若是端口打开&#xff0c;会出现下列信息 失败的是这个 如…
阅读更多...
Linux 块设备驱动实验

Linux 块设备驱动实验

前面我们都是在学习字符设备驱动&#xff0c;本章我们来学习一下块设备驱动框架&#xff0c;块设备驱动是Linux 三大驱动类型之一。块设备驱动要远比字符设备驱动复杂得多&#xff0c;不同类型的存储设备又对应不同的驱动子系统&#xff0c;本章我们重点学习一下块设备相关驱动…
阅读更多...
Elasticsearch：使用 Elasticsearch 进行词汇和语义搜索

Elasticsearch：使用 Elasticsearch 进行词汇和语义搜索

作者&#xff1a;PRISCILLA PARODI 在这篇博文中&#xff0c;你将探索使用 Elasticsearch 检索信息的各种方法&#xff0c;特别关注文本&#xff1a;词汇 (lexical) 和语义搜索 (semantic search)。 使用 Elasticsearch 进行词汇和语义搜索 搜索是根据你的搜索查询或组合查询…
阅读更多...
【Java 进阶篇】Java BeanUtils 使用详解

【Java 进阶篇】Java BeanUtils 使用详解

Java中的BeanUtils是一组用于操作JavaBean的工具&#xff0c;它允许你在不了解JavaBean的具体内部结构的情况下&#xff0c;访问和修改其属性。本文将详细介绍Java BeanUtils的使用&#xff0c;包括如何获取和设置JavaBean的属性&#xff0c;复制属性&#xff0c;以及如何处理嵌…
阅读更多...
Prometheus接入AlterManager配置钉钉告警(基于K8S环境部署)

Prometheus接入AlterManager配置钉钉告警(基于K8S环境部署)

文章目录 一、钉钉群创建报警机器人二、安装Webhook-dingtalk插件三、配置Webhook-dingtalk插件对接钉钉群四、配置AlterManager告警发送至Webhook-dingtalk五、Prometheus接入AlterManager配置六、部署PrometheusAlterManager(放到一个Pod中)七、测试告警 注意&#xff1a;请基…
阅读更多...
使用Nokogiri和OpenURI库进行HTTP爬虫

使用Nokogiri和OpenURI库进行HTTP爬虫

目录 一、Nokogiri库 二、OpenURI库 三、结合Nokogiri和OpenURI进行爬虫编程 四、高级爬虫编程 1、并发爬取 2、错误处理和异常处理 3、深度爬取 总结 在当今的数字化时代&#xff0c;网络爬虫已经成为收集和处理大量信息的重要工具。其中&#xff0c;Nokogiri和OpenUR…
阅读更多...
深入理解数据结构（2）——用数组实现队列

深入理解数据结构（2）——用数组实现队列

数组是一种数据结构&#xff0c;队列也是一种数据结构。它们都是由基础的语法实现的。 如果一个数据结构可以用另外的数据结构来实现&#xff0c;那么可以有力的证明——“数据结构是一种思想”&#xff0c;是一种讲语法组合起来实现某种功能的手段 “整体大于局部” 一、队列的…
阅读更多...
SpringSecurity6 | HelloWorld入门案例

SpringSecurity6 | HelloWorld入门案例

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Java从入门到精通 ✨特色专栏&#xf…
阅读更多...
腾讯云优惠券如何领取？详细教程来了！

腾讯云优惠券如何领取？详细教程来了！

腾讯云优惠券是腾讯云为广大用户提供的优惠福利&#xff0c;包括代金券和折扣券&#xff0c;大家可以通过领取优惠券&#xff0c;在购买腾讯云产品时享受优惠。本文将为大家介绍如何领取腾讯云优惠券&#xff0c;以及领取后的使用规则。 一、腾讯云优惠券领取方法 腾讯云优惠券…
阅读更多...
视频讲解|考虑源荷两侧不确定性的含风电电力系统低碳调度

视频讲解|考虑源荷两侧不确定性的含风电电力系统低碳调度

目录 1 主要内容 2 讲解视频 1 主要内容 本次程序讲解对应程序链接考虑源荷两侧不确定性的含风电电力系统低碳调度&#xff0c;主要实现了基于模糊机会约束的源荷两侧不确定性对含风电电力系统低碳调度的影响&#xff0c;将源荷不确定性采用清晰等价类进行处理。部分讲解重点…
阅读更多...
11.与JavaScript深入交流-[js一篇通]

11.与JavaScript深入交流-[js一篇通]

文章目录 1.变量的使用1.1基本用法1.2理解 动态类型 2.基本数据类型2.1number 数字类型2.1.1数字进制表示2.1.2特殊的数字值 2.2string 字符串类型2.2.1基本规则2.2.2转义字符2.2.3求长度2.2.4字符串拼接 2.3boolean 布尔类型2.4undefined 未定义数据类型2.5null 空值类型 3.运…
阅读更多...
原生JS 表格列拖拽 适用JqGrid

原生JS 表格列拖拽 适用JqGrid

js $(function () {var d1 new dragTable();d1.init({tabel: .drag-table}); })function dragTable() {this.disX 0; // 相对按下的位置移动的距离this.outX 0; // 鼠标按下的点到大盒子边上的距离this.lanX 0; // 拖动到的位置this.$createDiv null;this.$createDivBg …
阅读更多...
缓存和数据库一致性解决方案

缓存和数据库一致性解决方案

引入缓存提高性能 如果你的业务处于起步阶段&#xff0c;流量非常小&#xff0c;那无论是读请求还是写请求&#xff0c;直接操作数据库即可&#xff0c;这时你的架构模型是这样的&#xff1a; 但随着业务量的增长&#xff0c;你的项目请求量越来越大&#xff0c;这时如果每次都…
阅读更多...
rust std

rust std

目录 一&#xff0c;std基本数据结构 1&#xff0c;std::option 2&#xff0c;std::result 二&#xff0c;std容器 1&#xff0c;vector 三&#xff0c;std算法 1&#xff0c;排序 2&#xff0c;二分 &#xff08;1&#xff09;vector二分 &#xff08;2&#xff09;…
阅读更多...
Yusi技术资讯博客wordpress模板

Yusi技术资讯博客wordpress模板

Yusi技术资讯博客wordpress模板&#xff0c;从第一感觉看上去&#xff0c;两栏结构直接将网站的内容展现&#xff0c;以红白灰色调搭配&#xff0c;一种低调协调的风格&#xff0c;喜欢该wordpress主题的朋友可以下载试试。 下载地址&#xff1a;https://bbs.csdn.net/topics/…
阅读更多...
【ChatGPT系列】ChatGPT：创新工具还是失业威胁？

【ChatGPT系列】ChatGPT：创新工具还是失业威胁？

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…
阅读更多...
最新文章

Copyright @ 2022~2023