随便写一个日历

最新推荐文章于 2022-12-03 11:25:45 发布
最新推荐文章于 2022-12-03 11:25:45 发布
阅读量533 收藏
点赞数
分类专栏： 每天一道小菜 文章标签： 日历
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjy199506/article/details/58607056
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>日历</title>
    <style>
        body {
            font: 14px "microsoft yahei", Arial, Helvetica, sans-serif;
            color:#333;
            margin:0;
            padding:0;
        }
        ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd {
            margin:0;
            padding:0;
            border:none;
            list-style:none;
        }
        a{
            color:#333;
            text-decoration:none;
        }
        .clear:after {
            clear:both;
            display: block;
            content: '';
        }
        .calender-box{
            width: 303px;
            min-height: 220px;
            border: 1px solid #e9e9e9;
            box-shadow: 5px 5px 10px #D0D0D0;
            margin: 0 auto;
            padding-bottom: 5px;
        }
        .calender-header{
            width: 100%;
            height: 43px;
            background: #E57373;
            border-radius: 20px;
            position: relative;
            margin-bottom: 10px;
        }
        .years{
            width: 180px;
            margin: 0 auto;
            text-align: center;
            height: 43px;
            line-height: 43px;
            font-size: 18px;
            font-weight: 900;
            color: #fff;
        }
        .years-lf,.years-rt,.month-lf,.month-rt{
            position: absolute;
            display: inline-block;
            color: #fff;
            width: 43px;
            height: 43px;
            border-radius: 50%;
            line-height: 43px;
            top: 50%;
            margin-top: -22px;
            font-size: 18px;
            text-align: center;
        }
        .years-lf:hover,.years-rt:hover,.month-lf:hover,.month-rt:hover{
            background: #EF9A9A;
        }
        .years-lf{
            left: 0;
        }
        .years-rt{
            right: 0;
        }
        .month-lf{
            left: 40px;
        }
        .month-rt{
            right: 35px;
        }

        .week>span{
            /*display: inline-block;*/
            float: left;
            text-align: center;
            width: 43px;
            font-weight: 800;
        }
        .today{
            margin-top: 10px;
        }
        .today>span{
            text-align: center;
            padding: 0;
            display: inline-block;
            float: left;
            width: 43px;
            height: 30px;
            line-height: 30px;
            border-radius: 20px;
            cursor: pointer;
        }
        .today>span.month:hover{
            background: #EF9A9A;
            color: #fff;
        }
        .active{
            background: #E57373;
            color: #fff;
        }
        .today>span.other{
            color: #aaa;
            font-style: normal;
        }
        /*弹出框*/
        .month{
            position: relative;
        }
        .popup{
            position: absolute;
            color: #000;
            border: 1px solid #EF9A9A;
            width: 350px;
            min-height: 150px;
            top: 35px;
            background: #fff;
            z-index: 999;
        }
        .popup>h1{
            color: #FF8801;
            font-size: 20px;
            font-weight: normal;
            border-bottom: 1px solid #EF9A9A;
        }
        .popup>ul{
            text-align: left;
            margin: 10px;
            color: #666;
        }
        .triangle{
            width: 9px;
            height: 9px;
            background: #fff;
            border-top: 1px solid #EF9A9A;
            border-left: 1px solid #EF9A9A;
            transform: rotate(45deg);
            z-index: 1200;
            position: absolute;
            left: 17px;
        }
    </style>
    <script language="JavaScript" src="js/jquery.js"></script>
</head>
<body>
<h1 style="text-align: center;">日历</h1>

<div class="calender-box">
    <div class="calender-header">
        <a class="years-lf" href="#">&lt;&lt;</a>
        <a class="month-lf" href="#">&lt;</a>

        <p class="years">2017年1月</p>
        <a class="month-rt" href="#">&gt;</a>
        <a class="years-rt" href="#">&gt;&gt;</a>
    </div>
    <div class="calender-content">
        <div class="week">
            <span>日</span>
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
        </div>
        <div class="today">
        <!--第一行-->
            <span class="other">30</span>
            <span class="other">31</span>
            <span class="month">1</span>
            <span class="month">2</span>
            <span class="month">3</span>
            <span class="month">4</span>
            <span class="month">5</span>
        <!--第二行-->
            <span class="month">6</span>
            <span class="month">7</span>
            <span class="month">8</span>
            <span class="month">9</span>
            <span class="month">10</span>
            <span class="month">11</span>
            <span class="month">12</span>
        <!--第三行-->
            <span class="month">13</span>
            <span class="month">14</span>
            <span class="month">15</span>
            <span class="month">16</span>
            <span class="month">17</span>
            <span class="month">18</span>
            <span class="month">19</span>
        <!--第四行-->
            <span class="month">20</span>
            <span class="month">21</span>
            <span class="month">22</span>
            <span class="month">23</span>
            <span class="month">24</span>
            <span class="month">25</span>
            <span class="month">26</span>
        <!--第五行-->
            <span class="month">27</span>
            <span class="month">28</span>
            <span class="month">29</span>
            <span class="month">30</span>
            <span class="month">31</span>
            <span class="other">1</span>
            <span class="other">2</span>
            <div class="clear"></div>
        </div>
    </div>
</div>
<script src="js/jquery.js"></script>
<script>
//    单击日期
    $('.today>span.month').toggle(function(){
        $(this).addClass('active');
    },function(){
        $(this).removeClass('active');
    });

//弹出框
    $('.today>span.month').hover(function () {
        $(this).append("<p class='triangle'></p><div class='popup'><h1>标题1</h1><ul><li>视频1</li><li>图片2</li></ul></div>");
    },function(){
        $('.today>span.month>div').remove();
        $('.today>span.month>p').remove();
    });

</script>
</body>
</html>
一位不愿透露姓名的大英俊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手把手撸一个小而美的日历组件
分享知识和经验，只出精品~
10-24 3356
日历是前端开发中常见的业务组件之一，虽然现在有很多现成的日历组件，但是呢很多时候需要定制的时候就需要我们自己造一个，此时我们便需要了解日历的生成原理。其实也没有想象中的那么复杂。 今天我给大家带来手把手带你撸一个日历组件的教程，本教程使用Vue开发一个小而美的日历，主要讲解实现日历的基本思路，觉得有用的小伙伴记得三连一波啊。使用vue脚手架搭建的vue2.0项目，css预处理器选择scss即可画出日历草图，构建出日历常见的骨架。当然啦，也可以借鉴一些已有的日历的外观，这里我采用较为常见的外观，包含基本的日期
打印日历
qq_43535204的博客
04-05 232
package x; import java.util.*; public class calendar { //用户输入的年份 public static int year = Integer.MIN_VALUE; //用户输入的月份 public static int month = Integer.MIN_VALUE; // 对应每个月份的天数 public static int...
写的很随便的一个js日历
m0_61502578的博客
12-03 201
当前日历主要包含三个部分的元素分别是：1.当前日期2.月份以及年份跳转按钮3.当前这个月的所有日期显示1.先写好当前时间年份月份静态元素，通过document.querySelectorAll（）.forEach((item)=>{})绑定每一个月份和年份跳转的按钮，实例化 new Date 并赋值给date。分别使用date.getFullYear();获取当前年份date.getMonth() + 1;获取当前月份（月份从0开始计算到11结束）date.getDate();获取当前日期let week
RTC时钟：一个日历
weixin_44562404的博客
07-08 500
基于正点原子课程做的RTC时钟小结，供自己复习用
随便写的日历
04-06
随便写的日历
经典的日历（可以随便运行）
11-12
1. DOS操作系统：这是一个早期的操作系统，主要以命令行界面交互，对硬件资源要求较低。 2. 经典日历软件：在DOS环境下运行的日历应用，可能包含日历视图和记事本功能，方便用户管理时间和事件。 3. 兼容性与稳定性...
周月切换日历，支持农历，节假日显示，上下左右滑动
11-17
本项目针对公司的特定需求，实现了一个功能丰富的日历视图，支持周月切换，农历显示，节假日标注，以及日期自定义标记。以下是这个定制日历组件的关键知识点和实现细节： 1. **周月切换**：此功能允许用户在周视图...
超精简弹出式日历代码
09-23
本主题将深入探讨“超精简弹出式日历代码”，这是一个利用Visual Studio（VS）内置的日历控件创建的高效解决方案。该控件不仅功能强大，而且样式灵活，可以根据需求进行自定义。 首先，我们来理解什么是日历控件。...
JS-Events-Calendar：在JavaScript和jQuery中重建了一个PHP日历
02-13
在JavaScript和jQuery中重建了一个PHP日历。 这是一个快速而肮脏的示例，但是它可以满足我的需要。 随便使用它。 我通常用数据库中的项目填充日历。 我试图提供尽可能多的起始框架，用于从数据库中提取项目并输出...
css特效:鼠标滑过图片出现一道闪光效果
勿忘初心
12-14 4035
.container{ width: 580px; height: 325px; position: relative; } .container:hover:before{ transition: left 2s;//过渡,改变闪光的位置
防止按钮在短时间内被多次点击并且倒计时
勿忘初心
03-01 2831
<!DOCTYPE html> <html> <head> <title>防止按钮在短时间内被多次点击并且倒计时</title> <script src="js/jquery-1.11.3.js" type="text/javascript"></script> </head> <body> <form> <div> <input type="button"
文字两端对齐
勿忘初心
10-26 1466
假如我们有如下HTML：<div>这是一段文字！</div>给它加点样式div{ width:500px; border:1px solid red; text-align: justify; } div:after { content: " "; display: inline-block; width: 100%; }text-align: justify这是
分组全选或全不选
勿忘初心
03-03 374
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul{ padding: 0; margin: 0; list-style: none; }
jQuery鼠标事件
勿忘初心
12-22 323
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。 mouseout和mouseleave同理 hover是指分别当鼠标指针进入和离开元素时被执行的事件相当于mouseenter+mouseleave mousemove是鼠标移动事件,只要鼠标移动都会触发工作的时候写了一个当页面变小的时候,将页面的固
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]Delphi题库管理与试卷自动生成系统.zip
最新发布
07-27
[毕设]Delphi题库管理与试卷自动生成系统
131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+图像识别与定位+该数据集相关的研究论文
07-27
<项目介绍> 包含131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+该数据集相关的研究论文。可供深度学习图像识别与定位。 - 训练集大小：67700 个图像 测试集大小：22888 个图像 文件名格式：image_index_100.jpg（例如 32_100.jpg）或 r_image_index_100.jpg（例如 r_32_100.jpg）或 r2_image_index_100.jpg 或 r3_image_index_100.jpg。 “r”代表旋转水果。 “r2”表示水果绕第三轴旋转。 “100”来自图像尺寸（100x100 像素）。 水果是如何拍摄的: 1:使用 C920 摄像机拍摄水果。最好的网络摄像头之一。 2:在水果后面，我们放了一张白纸作为背景。 3:将水果和蔬菜种植在低速电机（3转/分钟）的轴中，并录制一段20秒的短片。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
python写一个日历
06-10
以下是一个简单的示例代码： ```python import calendar # 输入年份和月份 year = int(input("请输入年份: ")) month = int(input("请输入月份: ")) # 生成日历 cal = calendar.month(year, month) # 输出日历 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值