人世间10086 2022-10-21 13:14 采纳率: 80%
浏览 82
已结题

js写出一个日历怎么显示当天单元格背景颜色标红

img


怎么把当天日期的单元格背景颜色标红，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>年历</title>
    <style>
        #calender{
            width: 75%;
            /* height: 500px; */
            margin: 50px auto 0; /* 第一，三个是上下，第二，四个是左右 */
            background-color: rgb(255, 0, 0);
            display: flex;/*flex弹性布局*/
            flex-wrap: wrap;/*超出边界时的换行方式*/
            justify-content: center;
        }
        table{
            width: 200px;
            background-color: rgb(255, 255, 255);
            margin: 10px;
            /* float:left; */
        }
    </style>
</head>
<body>
    <div id="calender"></div>
    <script>
        function getCalender(){
            var year=new Date().getFullYear();//获取4位年份
            var w=new Date(year,0).getDay();//表示星期几(0-6)获取1月1号是周几
            //alert(w);
            var html=``;//放HTML标记代码
            //生成12个月份日历效果


            for(var m=1;m<=12;m++){
                html+=`<table>
                        <tr>
                         <th colspan='7'>${year}年${m}月</th>
                        </tr>
                        <tr>
                         <td>日</td>
                         <td>一</td>
                         <td>二</td>
                         <td>三</td>
                         <td>四</td>
                         <td>五</td>
                         <td>六</td>
                        </tr>
                `;
                //获取当前月有多少天
                var maxd=new Date(year,m,0).getDate();
                html+=`<tr>`;
                //把一个月从1号到maxd(最后一天)写到表格中
                for(var d=1;d<=maxd;d++){
                    
                    if(w!=0 && d==1){//如果本月第一天不是周日
                        html+=`<td colspan='${w}'></td>`;
                    }
                    html+=`<td>${d}</td>`;
                    if(w==6 && d!=maxd){
                        html+=`</tr><tr>`;//表格换行
                    }else if(d==maxd){
                html+=`</tr>`;//如果是一个月的最后一天，结束行
                    }
                    w=(w+1>6)?0:w+1;
                    /*if(w+1>6){
                        w=0;
                    }else{
                        w=w+1;
                    }*/

                    
                }
                html+=`</table>`;
            }
            return html;
        }
        document.getElementById("calender").innerHTML=getCalender();
    </script>
</body>
</html>
  • 写回答

2条回答 默认 最新

  • 音药 2022-10-21 13:50
    关注

    img

    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>年历</title>
    <style>
        #calender{
            width: 75%;
            /* height: 500px; */
            margin: 50px auto 0; /* 第一，三个是上下，第二，四个是左右 */
            background-color: rgb(255, 0, 0);
            display: flex;/*flex弹性布局*/
            flex-wrap: wrap;/*超出边界时的换行方式*/
            justify-content: center;
        }
        table{
            width: 200px;
            background-color: rgb(255, 255, 255);
            margin: 10px;
            /* float:left; */
        }
        .con{
            background: red;
        }
    </style>
</head>
<body>
    <div id="calender"></div>
    <script>
        function getCalender(){
            var year=new Date().getFullYear();//获取4位年份
            var w=new Date(year,0).getDay();//表示星期几(0-6)获取1月1号是周几
            //alert(w);
            var html=``;//放HTML标记代码
            //生成12个月份日历效果
            let month = new Date().getMonth() + 1;
            let day = new Date().getDate();
 
            for(var m=1;m<=12;m++){
                html+=`<table>
                        <tr>
                         <th colspan='7'>${year}年${m}月</th>
                        </tr>
                        <tr>
                         <td>日</td>
                         <td>一</td>
                         <td>二</td>
                         <td>三</td>
                         <td>四</td>
                         <td>五</td>
                         <td>六</td>
                        </tr>
                `;
                //获取当前月有多少天
                var maxd=new Date(year,m,0).getDate();
                html+=`<tr>`;
                //把一个月从1号到maxd(最后一天)写到表格中
                for(var d=1;d<=maxd;d++){
                    
                    if(w!=0 && d==1){//如果本月第一天不是周日
                        html+=`<td colspan='${w}'></td>`;
                    }
                    html+=`<td class="${m === month && day === d ? 'con' : ''}">${d}</td>`;
                    if(w==6 && d!=maxd){
                        html+=`</tr><tr>`;//表格换行
                    }else if(d==maxd){
                html+=`</tr>`;//如果是一个月的最后一天，结束行
                    }
                    w=(w+1>6)?0:w+1;
                    /*if(w+1>6){
                        w=0;
                    }else{
                        w=w+1;
                    }*/
 
                    
                }
                html+=`</table>`;
            }
            return html;
        }
        document.getElementById("calender").innerHTML=getCalender();
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 10月26日
  • 已采纳回答 10月21日
  • 修改了问题 10月21日
  • 创建了问题 10月21日

悬赏问题

  • ¥15 下图接收小电路，谁知道原理
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度
  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是，这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探