写一个小日历

以下是一个示例,展示了如何创建一个基本的日历

日历

1. HTML 结构

首先,创建一个基本的 HTML 结构,用于展示日历。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>日历</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="calendar"><div class="header"><button id="prev">上一月</button><h2 id="monthYear"></h2><button id="next">下一月</button></div><div class="days"><div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div></div><div id="dateGrid" class="date-grid"></div></div><script src="script.js"></script>
</body>
</html>

2. CSS 样式

接下来,使用 CSS 来美化日历。

/* styles.css */
body {font-family: Arial, sans-serif;background-color: #f4f4f4;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;
}.calendar {background: white;border-radius: 10px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);overflow: hidden;
}.header {display: flex;justify-content: space-between;align-items: center;padding: 10px 20px;background: #007bff;color: white;
}.days {display: grid;grid-template-columns: repeat(7, 1fr);background: #f0f0f0;
}.day {padding: 10px;text-align: center;font-weight: bold;
}.date-grid {display: grid;grid-template-columns: repeat(7, 1fr);
}.date {padding: 20px;text-align: center;cursor: pointer;
}.date:hover {background: #007bff;color: white;border-radius: 5px;
}

3. JavaScript 功能

最后,使用 JavaScript 来实现日历的动态功能。

// script.js
const monthYearElement = document.getElementById('monthYear');
const dateGridElement = document.getElementById('dateGrid');
const prevButton = document.getElementById('prev');
const nextButton = document.getElementById('next');let currentDate = new Date();function renderCalendar(date) {dateGridElement.innerHTML = '';const year = date.getFullYear();const month = date.getMonth();monthYearElement.innerText = date.toLocaleString('default', { month: 'long', year: 'numeric' });const firstDay = new Date(year, month, 1);const lastDay = new Date(year, month + 1, 0);const daysInMonth = lastDay.getDate();const startDay = firstDay.getDay();for (let i = 0; i < startDay; i++) {const emptyDiv = document.createElement('div');dateGridElement.appendChild(emptyDiv);}for (let day = 1; day <= daysInMonth; day++) {const dateDiv = document.createElement('div');dateDiv.classList.add('date');dateDiv.innerText = day;dateGridElement.appendChild(dateDiv);}
}prevButton.addEventListener('click', () => {currentDate.setMonth(currentDate.getMonth() - 1);renderCalendar(currentDate);
});nextButton.addEventListener('click', () => {currentDate.setMonth(currentDate.getMonth() + 1);renderCalendar(currentDate);
});// 初始渲染
renderCalendar(currentDate);

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot项目中引入配置文件数据的方式

yml中引用变量 1. 直接在当前文件中定义然后使用格式 ${} 引用 2. 如果使用\t 转义不成功可以添加双引号 读取yml单个属性数据 使用Value注解获取单个属性值&#xff0c;格式${一级属性名.二级属性名} Value("${country}") private String country; Value(&…

OpenHarmony、HarmonyOS、HarmonyNext互相兼容吗?

1&#xff0c;三者之间的关系 OpenHarmony&#xff1a;开源底层。HarmonyOS&#xff1a;闭源手机系统&#xff0c;兼容安卓生态。HarmonyOS NEXT&#xff1a;纯血鸿蒙&#xff0c;不兼容安卓。 上一篇文章简单介绍过&#xff0c;就不再多说了&#xff0c;这里说一下HarmonyOS …

Camera学习笔记(202410)

课程&#xff1a;CameraX&#xff1a;面向开发者的摄像头支持库 链接&#xff1a;CameraX&#xff1a;面向开发者的摄像头支持库_哔哩哔哩_bilibili 课程时长&#xff1a;28:00 学习时间&#xff1a;2024-10-29 概述&#xff1a;2019年Android CameraX的发布会 个人感觉&a…

Android 同花顺面经

Android 同花顺面经 文章目录 Android 同花顺面经一面 一面 Android组件化搭建使用接口层路由有什么缺点&#xff1f; 如果更改接口的话&#xff0c;其他的依赖的moudle都得改 说说kotlin和java的区别&#xff1f; Java是支持面向对象的编程&#xff0c;Kotlin是支持面向对象支…

Flutter报错信息Unhandled Exception: Binding has not yet been initialized.

错误信息如下&#xff1a; Typically, this is done by calling "WidgetsFlutterBinding.ensureInitialized()" or "runApp()" (the latter calls the former). Typically this call is done in the "void main()" method. The "ensureIni…

Django入门教程——用户管理实现

第六章 用户管理实现 教学目的 复习数据的增删改查的实现。了解数据MD5加密算法以及实现模型表单中&#xff0c;自定义控件的使用中间件的原理和使用 需求分析 系统问题 员工档案涉及到员工的秘密&#xff0c;不能让任何人都可以看到&#xff0c;主要是人事部门进行数据的…

算法笔记()

文章目录 什么是算法算法的分类算法的意义 其他比较好的算法网站比较知名的算法博主 算法这个课题有点太大了&#xff0c;穷尽一生也难以望其涯岸那是肯定的&#xff0c;甚至几代人无数精英也做不到完全掌握&#xff0c;我们普通人就更不要想了&#xff0c;能理解多少算多少吧。…

BugKu练习记录:矛盾

题目&#xff1a; $num$_GET[num]; if(!is_numeric($num)) { echo $num; if($num1) echo flag{**********}; }关键在于绕过is_numeric&#xff0c;PHP中字符串与数字弱比较&#xff0c;会将字符串转换为数字&#xff0c;截至到非数字字符&#xff0c;如果第一个字符就是非数字…

【Nas】X-DOC:在Mac OS X 中使用 WOL 命令唤醒局域网内 PVE 主机

【Nas】X-DOC&#xff1a;在Mac OS X 中使用 WOL 命令唤醒局域网内 PVE 主机 1、Mac OS X 端2、PVE 端&#xff08;Debian Linux&#xff09; 1、Mac OS X 端 &#xff08;1&#xff09;安装 wakeonlan 工具 brew install wakeonlan&#xff08;2&#xff09;唤醒 PVE 命令 …

8.3.2 前向分步算法与 AdaBoost

由前向分步算法可以推导出 AdaBoost&#xff0c;用定理叙述这一关系。   定理 8.3  AdaBoost 算法是前向分步加法算法的特例。 这时&#xff0c;模型是由基本分类器组成的加法模型&#xff0c;损失函数是指数函数。   证明 前向分步算法学习的正加法模型&#xff0c;当基…

batc和mini-batch

一、概念介绍 batch 批处理&#xff0c;在机器学习中&#xff0c;batch 是指一次处理整个训练数据集的方式。例如&#xff0c;如果有 1000 个训练样本&#xff0c;使用 batch 训练时&#xff0c;模型会同时使用这 1000 个样本进行一次参数更新。也就是说&#xff0c;计算损失…

Java学习教程,从入门到精通,Java for循环知识点(15)

1、Java for循环 在Java中&#xff0c;for循环是一种基本的循环控制结构&#xff0c;它允许你重复执行一段代码固定次数。for循环的语法如下&#xff1a; for (初始化表达式; 循环条件; 迭代表达式) {// 循环体&#xff1a;要重复执行的代码块 }这里是每个部分的详细解释&…

安宝特分享 | AR技术引领:跨国工业远程协作创新模式

在当今高度互联的工业环境中&#xff0c;跨国合作与沟通变得日益重要。然而&#xff0c;语言障碍常常成为高效协作的绊脚石。安宝特AR眼镜凭借其强大的多语言自动翻译和播报功能&#xff0c;正在改变这一局面&#xff0c;让远程协作变得更加顺畅。 01 多语言翻译优势 安宝特A…

生物信息与机器学习6 - 有监督学习算法和无监督学习算法

1.有监督学习算法 有监督学习算法推荐&#xff1a; 决策树分类器 - 适合处理分类问题&#xff0c;容易理解和可视化&#xff1b; KNN分类器 - 对于简单的单特征分类也很有效&#xff1b; 逻辑回归 (多分类) - 使用one-vs-all策略处理多类别。 有监督学习的选择&#xff1a; 如…

【Nas】X-DOC:Mac mini Docker部署小雅Alist

【Nas】X-DOC&#xff1a;Mac mini Docker部署小雅Alist 1、拉取镜像&#xff1a;2、获取阿里云盘信息3、启动容器4、访问服务5、定时清理阿里云盘缓存 1、拉取镜像&#xff1a; docker pull xiaoyaliu/alist:latest2、获取阿里云盘信息 mkdir /Volumes/Data/Docker/xiaoya在…

【数据结构】静态和动态空间管理

让我们来聊聊动态空间管理和静态空间管理&#xff0c;这两个听起来有点复杂的词。其实&#xff0c;它们就像你在学校里玩和学习时用的工具&#xff0c;只不过是在计算机里怎么使用“空间”的工具。我们来一起看看吧&#xff01; ### 什么是静态空间管理&#xff1f; 想象一下…

逗号运算符应用举例

在main.cpp里输入程序如下&#xff1a; #include <iostream> //使能cin(),cout(); #include <iomanip> //使能setbase(),setfill(),setw(),setprecision(),setiosflags()和resetiosflags(); //setbase( char x )是设置输出数字的基数,如输出进制数则用set…

依赖注入(Dependency Injection, DI)和控制反转(Inversion of Control, IoC)

依赖注入&#xff08;Dependency Injection, DI&#xff09;和控制反转&#xff08;Inversion of Control, IoC&#xff09;是面向对象设计中两个紧密相关的概念&#xff0c;特别是在构建可扩展和可维护的软件系统时非常有用。它们主要用于减少代码之间的耦合度&#xff0c;提高…

vxe-table v4.8+ 与 v3.10+ 虚拟滚动支持动态行高,虚拟渲染更快了

Vxe UI vue vxe-table v4.8 与 v3.10 解决了老版本虚拟滚动不支持动态行高的问题&#xff0c;重构了虚拟渲染&#xff0c;渲染性能大幅提升了&#xff0c;行高自适应和列宽拖动都支持&#xff0c;大幅降低虚拟渲染过程中的滚动白屏&#xff0c;大量数据列表滚动更加流畅。 自适…

ICPC区域赛成都站【赛后回顾+总结】

传送门 前言赛后总结赛后回顾赛后感悟 前言 首先&#xff0c;这是本人本赛季第一场XCPC区域赛&#xff0c;也是本人算竞生涯中第一场XCPC区域赛&#xff08;之前只打过邀请赛和省赛&#xff09;。 赛后总结 然后赛后总结一下&#xff1a;我队天崩开局&#xff0c;我队出师不利…