JavaScript自定义日历效果

本文实例为大家分享了JavaScript自定义日历效果的具体代码，供大家参考，具体内容如下

实现思路：获取每个月的第一天是星期几，然后把前面的天数填充为空，在获取每个月有多少天，循环填充，判断并给给当前时间添加单独样式，点击上一月，和下一月时改变月份。

获取当前月第一天：返回值是 0（周日） 到 6（周六） 之间的一个整数

var date = new Date();
var y=date.getFullYear();
var m=date.getMonth();
new Date(y,m,1).getDay();

获取当前月有多少天

var date = new Date();
var y=date.getFullYear();
var m=date.getMonth();
new Date(y,m+1,-1).getDate()+1;

最后点击上一月，下一月月份加一或减一，在执行封装的日历函数。

全部代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #2c3e50;
        }

        .calendar {
            width: 400px;
            margin: 50px auto;
        }

        .calendar-tip {
            font-size: 16px;
            text-align: center;
            color: #fff;
        }

        .prev {
            float: left;
            cursor: pointer;
        }

        .next {
            float: right;
            cursor: pointer;
        }

        .calendar-month {
            text-align: center;
            margin: 10px 0;
            color: #fff;
        }

        ul {
            list-style: none;
            display: flex;
        }

        li {
            width: 57px;
            text-align: center;
            height: 55px;
            line-height: 55px;
            font-size: 16px;
            color: #fff;
        }

        .calendar-day {
            display: flex;
        }

        .calendar-day span {
            flex: 1;
            color: #fff;
            text-align: center;
            height: 40px;
            line-height: 40px;

        }

        .calendar-data {
            display: flex;
            flex-wrap: wrap;
        }

        li {
            width: 57px;
            cursor: pointer;
        }

        li:hover {
            background: #2d3436;
        }

        .calendar-data .on {
            color: #d63031;
        }
    </style>
</head>

<body>
    <div class="calendar">
        <div class="calendar-tip">
            <span class="prev">上一月</span>
            <em id="year">2022年</em>
            <span class="next">下一月</span>
        </div>
        <div class="calendar-month">五月</div>
        <div class="calendar-day">
            <span>日</span>
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
        </div>
        <ul class="calendar-data">
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    </div>
    <script>
        var date = new Date();
        var year = document.querySelector("#year");
        var month = document.querySelector(".calendar-month");
        var calendarData = document.querySelector(".calendar-data");
        var prev = document.querySelector(".prev");
        var next = document.querySelector(".next");
        var monthArr = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
        var y,m,day,d,html,today;
        calendar();

        function calendar() {
            y = date.getFullYear();
            year.innerHTML = y + "年";

            m = date.getMonth();
            month.innerHTML = monthArr[m];
            day = new Date(y, m, 1).getDay(); //获取每个月第一天是周几
            d = new Date(y, m + 1, -1).getDate() + 1; //获取多少天
            html = "";

            //把每个月第一天之前的时间填充为空
            for (var i = 0; i < day; i++) {
                html += "<li> </li>";
            }

            for (var j = 1; j <= d; j++) {
                if (y==new Date().getFullYear() && m==new Date().getMonth() && j== date.getDate()) {
                    html += "<li class='on'>" + j + "</li>";
                } else {
                    html += "<li>" + j + "</li>";
                }

            }
            calendarData.innerHTML = html;
        }

        prev.onclick = function () {
            date.setMonth(date.getMonth() - 1);
            calendar();
        }

        next.onclick = function () {
            date.setMonth(date.getMonth() + 1);
            calendar();
        }
    </script>
</body>

</html>

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 纯js简单日历实现代码

    纯js简单日历实现代码

    复制代码 代码如下: <!doctype html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body,ul,li,h2,p { margin:0px; pa

  • js日历控件（可精确到分钟）

    .menu_iframe{position:absolute; visibility:inherit; top:0px; left:0px; width:170px; z-index:-1; filter: Alpha(Opacity=0);} .cal_table{ border:#333333 solid 1px; border-collapse:collapse; background:#ffffff; font-size:12px} .cal_table td{ border:1px #

  • 轻量级的原生js日历插件calendar.js使用指南

    使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤 本日历插件支持cmd模块化 如下调用: 复制代码 代码如下: xvDate({ 'targetId':'date1',//时间写入对象的id 'triggerId':['date1','dateBtn1'],//触发事件的对象id 'alignId':'datesWrap1',//日历对齐对象 'format':'-',//时间格式 默认'YYYY-

  • js+html制作简单日历的方法

    js+html制作简单日历的方法

    新手一枚,不会写什么高大上的博文,一些平时做的小练习,献丑 代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> * {margin: 0;padding: 0} #calendar {width: 210px;margin: 100px auto;overflow: hidden;bo

  • JS学习之一个简易的日历控件

    JS学习之一个简易的日历控件

    这个日历控件类似于园子用的日历,如下图: 这种日历控件实现起来不难,下面简单分析下我的思路: 首先,是该控件的可配置项: 复制代码 代码如下: ... settings: { firstDayOfWeek: 1, baseClass: "calendar", curDayClass: "curDay", prevMonthCellClass: "prevMonth", nextMonthCellClass: "nextMonth&quo

  • php+javascript的日历控件

    复制代码 代码如下: <html> <head> <title>js calendar</title> <script language="javascript"> /* Copyright Mihai Bazon, 2002-2005 | www.bazon.net/mishoo * ----------------------------------------------------------- * * The DHT

  • JS实现一个简单的日历

    JS实现一个简单的日历

    主要分为三个部分,1:获取li元素 2:如何填写对应的日期 3:如何获取点击li元素的事件. 1:通过节点间关系的属性children 获取li元素(两个for循坏遍历): 2:在遍历填写日期时,在第一行判断在当月的第一天在星期几,然后从第一天开始填写,直到大于当月的天数就暂停填写,并开始填写下个月的日期.第一行上个月的日期显示  : 上月天数显示开始值 = 计算上个月的天数 - 这个月开始的第一天在星期几的值 -1,然后在第一行上月天数显示开始值自加. 3:利用JS的事件冒泡获取li的inne

  • Vue.js创建Calendar日历效果

    Vue.js创建Calendar日历效果

    使用 Vue.js 进行数据与视图的绑定,数据更新会让视图自动进行更新,类似 Android 里面的 DataBinding. 实现一个HTML的日历效果. html 部分 <div id="calendar"> <!-- 年份 月份 --> <div class="month"> <ul> <li class="arrow" @click="pickPre(currentYear,

  • JS日历 推荐

    两年前写过一个日历,可是兼容性不好. 这次重新写了一次.  兼容多种浏览器  了解了不少东东,特别是对于W3C标准化．  如 FF和IE 对box模型的理解不同  box.style{width:100;border 1px;}  ie理解 为 box.width = 100  ff 理解 为 box.width = 100 + 1*2 = 102  可以使用这种方法使两种浏览器都可以正常浏览  box.style{width:100!important; width /**/:120px;bo

  • js css+html实现简单的日历

    js css+html实现简单的日历

    web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. html html部分比较简单,声明一个div,具体的html用javascript生成.整体内容大概是这样的: <!doctype html> <html> <head> <meta charset='utf-8'> <link rel='styleshe

随机推荐