Js+less实现自定义的日历

最新推荐文章于 2024-05-16 14:56:41 发布

Auspicious5

最新推荐文章于 2024-05-16 14:56:41 发布

阅读量687

点赞数 1

分类专栏：前端开发文章标签： less javascript

本文链接：https://blog.csdn.net/lovefive5/article/details/71425024

版权

前端开发专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现自定义日历的方法。重点讲解了如何利用Date对象及其方法，如setYear()和setDate(0)，来动态生成日历，并通过按钮控制前后月份的切换。

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

首先呢，给大家讲解一下本Demo中最关键的Date()类中的set()方法。

var date=new Date();
date.setYear(2017);
date.setDate(0);

如代码可见。setYear()是给当前的date设置年，比如setYear(2016),那你之后进行的一系列get方法都是按照2016年去执行的。
而setDate(0)的作用是什么呢？就是获得上一个月的最后一天。比如当前是5月，那setDate(0)之后的getDate()就等于30;

好了，接下来上效果图。
这里写图片描述

csdn上传的图片不太高清，可能界面不是特别美。但是基本的都实现了。如果需要的话可以自己更改一下css。

然后是贴上代码。

Html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自定义日历</title>
    <link rel="stylesheet" type="text/css" href="03.css">
    <script type="text/javascript" src="03.js"></script>
</head>
<body>
<div id="container">
    <div id="parent">
        <div id="header">
            <button class="btn1" id="btn1" onclick="last()"><</button>
            <div id="header_month">5月</div>
            <button class="btn1" id="btn2" onclick="next()">></button>
        </div>
        <div id="center">
            <table id="table_center" border="1" frame="all" rules="all">
                <tbody>
                <tr id="center_tr1"></tr>
                </tbody>
            </table>
        </div>
        <div id="footer">
            <table id="footer_table" frame="all" rules="all"></table>
        </div>
    </div>
</div>
<script>
    addWeek();
</script>
</body>
</html>

接下来是js代码

var arrays = ["日", "一", "二", "三", "四", "五", "六"];
var static_month= 0,static_year= 0,static_day=0;
/*添加星期*/
function addWeek() {
    var tr1 = document.getElementById("center_tr1");
    var i;
    arrays.forEach(function (data, i) {
        var td1 = document.createElement("td");
        td1.innerHTML = data;
        td1.className = "table_td1";
        tr1.appendChild(td1);
    });
    syncTime();
    setStart();
}

/*上个月的点击事件*/
function last(){
    if(static_month>0){
        static_month--;
        addDays(static_year,static_month);
    }else {
        static_month=11;
        static_year--;
        addDays(static_year,static_month);
    }
}

/*下个月的点击事件*/
function next(){
    if(static_month<11){
        static_month++;
        addDays(static_year,static_month);
    }else{
        static_month=0;
        static_year++;
        addDays(static_year,static_month);
    }

}

/*第一次进入时显示日期*/
function setStart() {
    var date = new Date();
    var months = date.getMonth();
    static_month=months;
    static_year=date.getFullYear();
    static_day=date.getDate();
    drawTable();
    addDays(static_year,months);
}

/*添加日期,传入年数和月份*/
function addDays(year,months) {
    var date = new Date();
    /*获取系统本天对应的年份*/
    var thisYear=date.getFullYear();

    /*更改系统年份*/
    date.setYear(year);

    /*获取当天日期*/
    var thisDate=date.getDate();
    console.log("今天：" + thisDate);
    var thisMonth=date.getMonth();
    console.log("当前月份：" + thisMonth+"静态："+static_month);
    document.getElementById("header_month").innerHTML=date.getFullYear()+"年\t  "+(months+1)+"月";

    /*当前月有多少天*/
    date.setMonth(months + 1);
    date.setDate(0);
    var thisDay = date.getDate();
    console.log("当月最后一天为" + thisDay + "号");

    date.setMonth(months);

    /*获得当月的第一天为周几*/
    date.setDate(1);
    var thisWeek = date.getDay();
    console.log("当前月份第一天为周" + thisWeek);

    /*获得上月的最后一天*/
    date.setDate(0);
    var lastDay = date.getDate();
    console.log("上月份最后一天为" + lastDay + "号");

    /*插入日期天数,先把之前的插入置为空*/
    var td_class=document.getElementsByClassName("day_td_class");
    td_class.innerHTML="";
    var x=1;j=1;
    for (var i = 1; i <= 42; i++) {
        var td1 = document.getElementById("day_td"+ i);
        /*上月份的剩余天数*/
        if(i<thisWeek+1){
            td1.style.color="#888";
            td1.innerHTML = (lastDay-thisWeek)+i;
        }
        /*本月份的天数*/
        else if(i<=thisDay+thisWeek){
            td1.style.color="#fff";
            if(x==thisDate&&thisMonth==static_month&&thisYear==static_year){
                td1.style.color="#ff0000";
            }
            td1.innerHTML =x;
            x++;
        }
        /*下月的天数*/
        else{
            td1.style.color="#888";
            td1.innerHTML=j;
            j++;
        }
    }
}

/*绘制表格*/
function drawTable() {
    var i, j;
    var d = 1;
    var table1 = document.getElementById("footer_table");
    for (j = 0; j < 6; j++) {
        var tr1 = document.createElement("tr");
        for (i = 0; i < 7; i++) {
            var td1 = document.createElement("td");
            td1.id = "day_td" + d;
            td1.className = "day_td_class";
            d++;
            tr1.appendChild(td1);
        }
        table1.appendChild(tr1);
    }
}

/*系统时间同步*/
function syncTime(){
    setInterval(function timeChange(){
        var nowDate=new Date();
        if(nowDate.getDate()!=static_day){
            setStart();
        }
    },1000);
}

写java习惯了，写js的代码结构也和java类似。这里最后为什么要加一个计时器呢？为的就是和系统时间同步。当检测到nowDate中天数和static_day不一致的时候，就会执行setStart()方法。刷新当天的日期。

接着就是less代码，个人感觉用less比css方便一点。因为css太繁琐了。用less完全可以减去很多代码量。比较程序员吗，程序的代码越少越少。

//设置宽度
@width: 100%;
@height:100%;

//设置所有边框属性
.all_border(@width:0.5px,@style:solid,@color:#ccc) {
  border: @arguments;
}

// 设置所有居中属性
.all_center(@w) {
  width: @w;
  margin: 7% auto;
}

#container {
  .all_center(100%);
}

#parent {
  .all_center(50%);
  .all_border();
}

#header {
  width: @width;
  display: flex;
  justify-content: space-between;
  .all_border(0.7px);
}

//设置btn属性
.btn1 {
  .all_border();
  color: #ffffff;
  border-radius: 50%;
  &:hover {
    background-color: #3c3c3c;
  }
}

#center {
  width: @width;
  height: @height;
}

#footer {
  width: @width;
  height: @height;
}

//设置表格属性
table {
  width: 100%;
  height: @height;
  td {
    width: 100%/7;
    height: 100%/7;
    text-align: center;
  }
}

td {
  background-color: #1b6d85;
  color: white;
}

.day_td_class:hover {
  background-color: #66ccff;
  transform: scale(1.2);
}

然后把编译后的css贴上

body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.all_center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#parent {
    border: 0.5px solid #cccccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border: 0.7px solid #cccccc;
}

.btn1 {
    border: 0.5px solid #cccccc;
    color: #ffffff;
    border-radius: 50%;
}

.btn1:hover {
    background-color: #3c3c3c;
}

#center {
    width: 100%;
}

#footer {
    width: 100%;
}

table {
    width: 100%;
}

table td {
    width: 14.28571429%;
    text-align: center;
}

td {
    background-color: #1b6d85;
    color: white;
}

.day_td_class:hover {
    background-color: #66ccff;
    transform: scale(1.2);
}

其实实现起来也不算太复杂，毕竟js代码库给我们提供好了日期。我们只需要计算把相应的日期填进去对应的表格就行了。

觉得可以的话，就给个赞赏吧!

Auspicious5

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录