纯JS+CSS手写日历

最新推荐文章于 2024-07-26 10:11:20 发布

淡淡的猿

最新推荐文章于 2024-07-26 10:11:20 发布

阅读量878

点赞数 2

文章标签： html css js

本文链接：https://blog.csdn.net/qq_39933748/article/details/105100022

版权

本文展示了如何使用纯JavaScript和CSS手写一个日历功能。日历能显示当前日期，并具有深蓝背景色突出显示。用户可以通过鼠标悬停改变日期背景色，还能上下翻阅月份。该日历实现基础功能，样式可根据个人需求自由调整。

摘要由CSDN通过智能技术生成

介绍

今天带来一个纯JS+css手写的日历，
一开始先显示当前日期，比如下方25日就是当前日期会有较深蓝色背景色，鼠标指着的日期是下方图片14日的淡蓝色背景色
上面显示日期，可左右选择上个月或者下个月
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>日历插件</title>
    <style>
        .main{
   
            width: 631px;
        }
        table{
   
			border: 1px solid #ccc; border-collapse: collapse;
            width: 50%;
		}
		th,td{
   padding:35px;}
        .title{
   
            height: 20px;
            display: flex;
            justify-content: center;
            background-color:cornflowerblue;
        }
        .title img{
   
            width: 30px;
            height: 100%;
            box-sizing: border-box;
           
        }
        #now{
   
            line-height: 20px;
        }
        .title .control{
   
            margin: 0 20px;
            cursor: pointer;
        }
        .title .control:hover{
   
            background-color: blue;
        }
        .nowday{
   
            background-color:cornflowerblue;
        }
        .allday:hover{
   
            /* cursor: pointer; */
            background-color: skyblue;
        }
    &l