HTML+css+JS实现日历组件

最新推荐文章于 2024-07-08 09:50:33 发布
最新推荐文章于 2024-07-08 09:50:33 发布
阅读量2w 收藏 79
点赞数 27
分类专栏： HTML5 文章标签： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22317389/article/details/80349497
版权 
<!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>Document</title>
    <style type="text/css">
        *{
            padding: 0%;
            margin: 0%;
        }

        html, body{
            background:#f2f2f2;
        }

        .calendar{
            margin: 45px;
            width: 450px;
            height: 350px;
            background: white;
            box-shadow: 0px 1px 1px rgba(0,0,0,.1);
        }

        .title{
            height: 70px;
            border-bottom: 1px solid rgba(0,0,0,.1);
            position: relative;
            text-align: center;
        }

        #calendar-title{
            font-size: 25px;
            text-transform: uppercase;
            font-family: Arial, Helvetica, sans-serif;
            padding: 14px 0 0 0;
        }

        #calendar-year{
            font-size: 15px;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: normal;
        }

        #pre{
            position: absolute;
            top: 0px;
            left: 0px;
            background: url(prev.png) no-repeat 50% 50%;

            /*没规定大小时，图片显示 0X0*/
            width: 60px;
            height: 70px;
            
        }

        #next{
            position: absolute;
            top: 0px;
            right: 0px;
            background: url(next.png) no-repeat 50% 50%;
            width: 60px;
            height: 70px;
        }  

        .body-list ul{
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            width: 100%;
            box-sizing: border-box;
      
        }  

        .body-list ul li{
            list-style: none;
            /*
            display:inline-block; 
            width: 13.3%;
            */

            /*100/7 = 14.28%*/
            display: block;
            width: 14.28%;
            float: left;

            /*规定行高，垂直居中*/
            height: 36px;
            line-height: 36px;
            box-sizing: border-box;
            text-align: center;
            
        }


        .green{
            color:#6ac13c;
        }

        .lightgrey{ /*浅灰色显示过去的日期*/
	        color:#a8a8a8;
        }   
        .darkgrey{ /*深灰色显示将来的日期*/
	        color:#565656;
        }

        /*日期当天用绿色背景绿色文字加以显示*/
        .greenbox{
            border: 1px solid #6ac13c;
            background: #e9f8df;
        }
    </style>
</head>
<body>
    <div class="calendar">
        <div class="title">
            <h1 class="green" id="calendar-title">Month</h1>
            <h2 class="green" id="calendar-year">Year</h2>
            <a href="" id="pre"></a>
            <a href="" id="next"></a>
        </div>

        <div class="body">
            <div class="lightgrey body-list">
                <ul>
                    <li>SUN</li>
                    <li>MON</li>
                    <li>TUE</li>
                    <li>WED</li>
                    <li>THU</li>
                    <li>FRI</li>
                    <li>SAT</li>
                    
                </ul>

            </div>

            <div class="darkgrey body-list">
                <ul id="days">

                </ul>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var month_olypic = [31,29,31,30,31,30,31,31,30,31,30,31];//闰年每个月份的天数
        var month_normal = [31,28,31,30,31,30,31,31,30,31,30,31];
        var month_name =["January","Febrary","March","April","May","June","July","Auguest","September","October","November","December"];
        //获取以上各个部分的id
        var holder = document.getElementById("days");
        var prev = document.getElementById("prev");
        var next = document.getElementById("next");
        var ctitle = document.getElementById("calendar-title");
        var cyear = document.getElementById("calendar-year");
        //获取当天的年月日
        var my_date = new Date();
        var my_year = my_date.getFullYear();//获取年份
        var my_month = my_date.getMonth(); //获取月份，一月份的下标为0
        var my_day = my_date.getDate();//获取当前日期

        //根据年月获取当月第一天是周几
        function dayStart(month,year){
            var tmpDate = new Date(year, month, 1);
            return (tmpDate.getDay());
        }
        //根据年份判断某月有多少天(11,2018),表示2018年12月
        function daysMonth(month, year){
            var tmp1 = year % 4;
            var tmp2 = year % 100;
            var tmp3 = year % 400;

            if((tmp1 == 0 && tmp2 != 0) || (tmp3 == 0)){
                return (month_olypic[month]);//闰年
            }else{
                return (month_normal[month]);//非闰年
            }
        }
        //js实现str插入li+class,不要忘了用innerhtml进行插入
        function refreshDate(){
            var str = "";
            //计算当月的天数和每月第一天都是周几，day_month和day_year都从上面获得
            var totalDay = daysMonth(my_month,my_year);
            var firstDay = dayStart(my_month, my_year);
            //添加每个月的空白部分
            for(var i = 0; i < firstDay; i++){
                str += "<li>"+"</li>";
            }

            //从一号开始添加知道totalDay，并为pre，next和当天添加样式
            var myclass;
            for(var i = 1; i <= totalDay; i++){
                //三种情况年份小，年分相等月份小，年月相等，天数小
                //点击pre和next之后，my_month和my_year会发生变化，将其与现在的直接获取的再进行比较
                //i与my_day进行比较,pre和next变化时，my_day是不变的
                console.log(my_year+" "+my_month+" "+my_day);
                console.log(my_date.getFullYear()+" "+my_date.getMonth()+" "+my_date.getDay());
                if((my_year < my_date.getFullYear())||(my_year == my_date.getFullYear() && my_month < my_date.getMonth()) || (my_year == my_date.getFullYear() && my_month == my_date.getMonth() && i < my_day)){
                    myclass = " class='lightgrey'";
                }else if(my_year == my_date.getFullYear() && my_month == my_date.getMonth() && i == my_day){
                    myclass = "class = 'green greenbox'";
                }else{
                    myclass = "class = 'darkgrey'";
                }
                str += "<li "+myclass+">"+i+"</li>";
            }
            holder.innerHTML = str;
            ctitle.innerHTML = month_name[my_month];
            cyear.innerHTML = my_year;
        }
        //调用refreshDate()函数，日历才会出现
        refreshDate();
        //实现onclick向前或向后移动
        pre.onclick = function(e){
            e.preventDefault();
            my_month--;
            if(my_month < 0){
                my_year--;
                my_month = 11; //即12月份
            }
            refreshDate();
        }
        
        next.onclick = function(e){
            e.preventDefault();
            my_month++;
            if(my_month > 11){
                my_month = 0;
                my_year++;
            }
            refreshDate();
        }
    </script>
</body>
</html>

qq_22317389
关注
  • 27
    点赞
  • 踩
  • 79
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html日历修改,HTML精美日历插件
weixin_34524284的博客
06-03 1456
Html精美日历插件，包括日期选择，日期查看，星期查看等等功能。文章末尾附有演示地址。先看看效果图：源代码：varCalendarHandler={currentYear:0,currentMonth:0,isRunning:false,initialize:function(){$calendarItem=this.CreateCalendar(0,0,0);$("#...
HTML+CSS日历制作
shaguakaimen123的专栏
11-03 5300
日历 .month{   border-collapse:collapse;   table-layout:fixed;   width:780px; } .month caption { text-align:left; font-family:宋体,arial; font-size:20px; font-weight:bold; padding-bottom:6px;
fullcalendar v5.3.2 日历插件+LayerUi弹窗，实现自定义HTML表格
飞奔的屎壳郎
10-09 6958
fullcalendar官网：https://fullcalendar.io/ 插件下载地址（v5.3.2版本）：https://github.com/fullcalendar/fullcalendar/releases 项目中用的是 LayerUi弹窗+fullcalendar日历插件，上面是效果图 我这里用的是v5.3.2版本，5.x以上版本好像改版了，命令与4.X完全不一样 注意：日历插件里面的表格是 自定义的HTML代码 当前的项目中有个BUG，就是点击单元格后，弹出窗口 演示效果如下： 下载下的
手写日历calendar组件（html版本）
最新发布
Tian0815的博客
07-08 357
html版本的。一个日历calendar组件。纯原创
日历 ，日历待办事项
12-16
生成待办日历，动态日历，一行日历移动端
CSS+Javascript+Html日历控件
zhaoyang314的博客
10-30 1878
最近，因需要用HTML+JAVASCRIPT+CSS实现了一个日历控件，单击上月、下月进行日历切换。当前日期在日历中变颜色标注显示。还是老老套路、老方法，分HML+CSS+JAVASCRIPT三部分代码。 这段代码主要包含三个部分，一是头部显示年月，上月、下月切换按钮；二是显示星期一到日；三是日期容器，存在日期。 这段代码主要定义了日历的样式，一个主要的方法简述如下： 此段代码实现了当月日历情况，单击上月、下月进行月份切换。
日历 利用js制作Html日历插件 可在日历里面根据需求插入数据
fang5211的博客
07-06 1723
可修改的日历插件
html+css+js 实现日历控件
duguboxia的博客
05-07 1201
*talk is cheap show me the code** html+css ```java <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0%; margin: 0%; } html, body{ background:#f2f2f2; } .c
js怎么制作html的主题,js+html制作简单日历的方法
weixin_30345333的博客
05-31 260
新手一枚，不会写什么高大上的博文，一些平时做的小练习，献丑代码：无标题文档* {margin: 0;padding: 0}#calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative}#calendar h4 {text-alig...
[js]html实现日历功能
WW_的博客
03-24 699
js html css 日历功能 html <!doctype html> <html> <head> <meta charset='utf-8'> <link rel='stylesheet' href='外部的css文件路径' /> <title>demo</title> </head> <body> <div class='calendar' id='calendar'
HTML5+CSS3背景变色日历表切换代码
06-11
在这个“HTML5+CSS3背景变色日历表切换代码”项目中，开发者利用了这两者的特性来创建一个视觉上吸引人的日历组件，每个月份都有独特的背景颜色，增加了用户体验的多样性。 首先，我们来看HTML5的部分。HTML5是超...
HTML的日历控件（个人推荐）
11-07
此控件是个人使用多年的纯HTML控件，而且此官方版本还在不停升级,不仅支持用户在此基础上进行编程，还可以让用户自由定制日历显示格式，而且更好的是使用起来非常非常简单~~~个人力推
js css+html实现简单的日历
10-21
总之，通过HTML、CSS和JavaScript的结合，我们可以创建出具有交互性和美观性的日历组件。这种方法不仅适用于学习和实践，也是实际项目中常见的一种实现方式。理解这三个技术的协同工作原理，将有助于提升网页开发的...
calendar-widget:带有html + css + js的波斯日历小部件
05-09
总的来说，这个项目提供了一个用现代Web技术实现的波斯日历组件，可以方便地集成到任何支持HTML、CSS和JavaScript的网站中。它不仅展示了Web开发的基本技术组合，还展示了对特定文化需求的理解和应用。对于学习Web...
Vue3+Typescript日历组件
07-29
本篇将详细介绍如何利用Vue3和TypeScript来创建一个功能丰富的日历组件。 首先，我们从标题"Vue3+Typescript日历组件"出发，理解其核心是创建一个基于Vue3的组件，且使用了TypeScript作为编程语言。TypeScript是...
html+js+css带阴历的日历控件
11-28
综上，"html+js+css带阴历的日历控件"是一个结合了HTML、JavaScript和CSS技术的实用组件，它需要开发者具备良好的前端基础和一定的问题解决能力。通过合理的设计和编码，这个控件可以很好地集成到各种网页项目中，...
日历(HTML,CSS和JavaScript实现)
千万亿
10-23 1404
用最原生的方式实现一个日历(html,css和javascript)
html+css+js 简单日历
yolanda的数据分析进阶记录
02-28 5572
效果图：实现以下功能: 1）初始时显示系统当前日期 2）选中的日期只可以大于当前的日期 3）鼠标在日期上时，底色变成橘色，离开时恢复 4）通过翻页查看上（下）一个月 5）自主选择月份 6）自主选择年份细节设计： 1）当选中一个日期后，系统的日期不消失； 2）只要切换回当前月份，都会自动显示系统日期； 3）年份的输入限定在1990-2099； js:var MONT
HTML页面日历插件
真皮的博客
01-22 3403
web页面显示日历插件。如下图 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body, td, .p1, .p2, .i { font-family: arial } body { margin: 6px 0 0 0; ba
Vue3代码实现日历组件
04-04
以下是一个简单的 Vue3 日历组件的实现示例： ```html <template> <div> <div class="calendar-header"> <button @click="prevMonth">上个月</button> <h3>{{ monthStr }}</h3> <button @click="nextMonth">下个月</button> </div> <div class="calendar-grid"> <div v-for="(day, index) in days" :key="index" :class="{ 'calendar-cell': true, 'calendar-cell-disabled': !day }"> {{ day }} </div> </div> </div> </template> <script> import { computed, reactive } from 'vue' export default { setup() { const state = reactive({ currentMonth: new Date(), days: [] }) const prevMonth = () => { state.currentMonth.setMonth(state.currentMonth.getMonth() - 1) } const nextMonth = () => { state.currentMonth.setMonth(state.currentMonth.getMonth() + 1) } const monthStr = computed(() => { return state.currentMonth.toLocaleString('default', { month: 'long', year: 'numeric' }) }) const generateCalendar = () => { const firstDay = new Date(state.currentMonth.getFullYear(), state.currentMonth.getMonth(), 1).getDay() const lastDay = new Date(state.currentMonth.getFullYear(), state.currentMonth.getMonth() + 1, 0).getDate() const days = new Array(35).fill(null) for (let i = 1; i <= lastDay; i++) { days[firstDay + i - 1] = i } state.days = days } generateCalendar() return { state, prevMonth, nextMonth, monthStr } } } </script> <style> .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .calendar-cell { border: 1px solid #ccc; padding: 10px; text-align: center; } .calendar-cell-disabled { opacity: 0.3; } </style> ``` 这个组件使用了 Vue3 的 `reactive` 和 `computed` 函数来声明响应式状态和计算属性。它还使用了 JavaScript 的 `Date` 对象来计算日历表格中的日期。在 `setup` 函数中，我们定义了一些帮助函数来生成日历，并将它们绑定到组件的方法中。最后，我们通过使用 CSS Grid 布局来组织日历表格的每个单元格。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值