简单的 js 日历控件

m0_63156262

于 2022-05-27 11:19:05 发布

阅读量357

点赞数

分类专栏： javascript 文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_63156262/article/details/125000430

版权

这篇博客介绍了一个简单的 JavaScript 日历控件的实现，可以方便地展示每日消耗数据，并能高亮显示有数据的日期。通过 HTML、CSS 和 JavaScript 代码，实现了日历的展示、切换月份功能，并提供了当前日期的高亮效果。

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

需求背景，需要在日历上展示每天的消耗数据，有数据的高亮显示，测试集成日历控件，改起来太费劲，找了这个还可以，修改比较方便，记录下~~

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>日历</title>
       <style type="text/css">
           *{margin: 0;padding: 0;}
           .box{line-height: 40px;font-size: 16px;text-align: center;width: 280px;height: 320px; border: 1px #ccc solid;position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);color: #000;padding: 20px;}
           .top{font-size: 0;}
           .top button{width: 25%;display: inline-block;font-size: 16px;}
           .top #month{width: 50%;display: inline-block;font-size: 16px;}
           .evrday{width: 40px;height: 40px

最低0.47元/天解锁文章

m0_63156262

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单的 js 日历控件

需求背景，需要在日历上展示每天的消耗数据，有数据的高亮显示，测试集成日历控件，改起来太费劲，找了这个还可以，修改比较方便，记录下~~<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <ti...
复制链接

扫一扫