用原生js dom table写的日历小demo，展示一年的日历并标记自定义日期

好好敲代码的三好青年

于 2020-08-12 09:00:50 发布

阅读量777

点赞数

分类专栏：好货货不多文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_44927883/article/details/107949319

版权

这篇博客演示了如何用原生JavaScript实现一个DOM操作的日历应用，该应用能够显示一年的日历，并能对自定义日期进行标记。博客内容分为四个部分：主要函数介绍、数据集的设定、调用函数的方法以及最终展示的结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、主要函数

/*
 * 生成十二个月的日历
 * year：年份
 * dataObj：传入的时间数据,年月日
 *      data：需要标注的日期，日期需要正序排列
 *      separator：时间的分隔符
 * div：父组件div组件
 */
function generateCalendar(obj){
   
    let year = obj.year;
    let dataObj = obj.dataObj;
    let data = dataObj.data;
    let type = dataObj.type;
    let attribute = dataObj.attribute;
    let separator = dataObj.separator;
    let div = obj.div;
    //得到十二个月份
    let month = [];
    for(let i = 1;i < 13;i++){
   
        month.push(i);
    }
    div.style.width = "100%";
    let table = null;
    let thead = null;
    let tr = null;
    let td = null;
    //遍历每一月
    for (let i = 0;i < month.length;i++){
   
        table = document.createElement("table");
        table.cellPadding = "5px";
        table.style.margin = "10px";
        table.style.float = "left";
        //获取该月的天数
        let day = monthDay(year,i+1);
        //添加标题XXXX年XX月
        td = document.createElement("td");
        td.innerText = year+"年"+(i+1)+"月";
        td.colSpan = "7";
        td.style.textAlign = "center";
        td.style.border = "1px solid";
        tr = document.createElement("tr");
        tr.appendChild(td);
        thead = document.createElement("thead"

最低0.47元/天解锁文章