开源炫酷日历、网页日历模板、自适应大小日历、win10日历

开源炫酷日历、网页日历模板、自适应大小日历博主的话如何引用运行图片文件目录开源日历html、css源码博主的话本日历的样式，仿照的是Win10系统自带的日历样式。读者可自行粘贴源码放入所编写的网页里面就好。如果用了话，麻烦给个赞吧，谢谢啦。如何引用引用的话，直接把我html文件里面的id为HCQ_calendar的div容器剪切到你所要引入的网页，再把html文件里的<-src...

征途黯然.

1829人浏览 · 2019-05-02 22:12:11

征途黯然. · 2019-05-02 22:12:11 发布

开源炫酷日历、网页日历模板、自适应大小日历

博主的话

本日历的样式，仿照的是Win10系统自带的日历样式。读者可自行粘贴源码放入所编写的网页里面就好。如果用了话，麻烦给个赞吧，谢谢啦。

下载地址：https://download.csdn.net/download/qq_43592352/12368565

如何引用

引用的话，直接把我html文件里面的id为HCQ_calendar的div容器剪切到你所要引入的网页，再把html文件里的<-srcipt>标签里的内容也粘贴一下就OK了。然后引入css文件。
js部分看不懂的也欢迎大家来和我讨论。
由于我js是用的JQuery框架，所以还要引用一下JQuery文件（就是jquery-3.3.1.js），这个可以去官网下。
关于日历里面的id和class我都加了HCQ_的前缀，所以大家放心的用，不用担心id、class重复的问题！
颜色的搭配问题，大家可以自己去css里面改。

运行图片

由于日历是自适应的，所以调整css文件里的HCQ_calendar的height和width，日历里面的所有组件都会相应放大、缩小。这里是宽高都是400px：
在这里插入图片描述

文件目录

在这里插入图片描述

开源日历html、css源码

这是index.html代码：

<html>
    <head>
        <title>炫酷日历</title>
        <script src="jquery-3.3.1.js" type="text/javascript"></script>
        <link rel="stylesheet" href="css/HCQ_calendar.css" media="screen" type="text/css" />
    </head>
<body>
    <div id="HCQ_calendar"><!--根据calendar的大小来自适应,在css文件里对HCQ_calendar容器的长宽进行设置-->
        <div id="HCQ_date_time">
            <div id="HCQ_date"><span style="font-size: 20px"></span></div>
            <div id="HCQ_time"><span style="font-size: 20px"></span></div>
            <div id="HCQ_oprate">
                    <input type="button" onclick="HCQ_changeMonth(1)" value="上">
                    <span></span>
                    <input type="button" onclick="HCQ_changeMonth(2)" value="下">
            </div>
        </div>
        

        <table id="HCQ_table">
            <tr>
                <th>日</th>
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th>六</th>
            </tr>
            <tr>
                <td onmouseover="nowcss(0)"></td>
                <td onmouseover="nowcss(1)"></td>
                <td onmouseover="nowcss(2)"></td>
                <td onmouseover="nowcss(3)"></td>
                <td onmouseover="nowcss(4)"></td>
                <td onmouseover="nowcss(5)"></td>
                <td onmouseover="nowcss(6)"></td>
            </tr>
            <tr>
                <td onmouseover="nowcss(7)"></td>
                <td onmouseover="nowcss(8)"></td>
                <td onmouseover="nowcss(9)"></td>
                <td onmouseover="nowcss(10)"></td>
                <td onmouseover="nowcss(11)"></td>
                <td onmouseover="nowcss(12)"></td>
                <td onmouseover="nowcss(13)"></td>
            </tr>
            <tr>
                <td onmouseover="nowcss(14)"></td>
                <td onmouseover="nowcss(15)"></td>
                <td onmouseover="nowcss(16)"></td>
                <td onmouseover="nowcss(17)"></td>
                <td onmouseover="nowcss(18)"></td>
                <td onmouseover="nowcss(19)"></td>
                <td onmouseover="nowcss(20)"></td>
            </tr>
            <tr>
                <td onmouseover="nowcss(21)"></td>
                <td onmouseover="nowcss(22)"></td>
                <td onmouseover="nowcss(23)"></td>
                <td onmouseover="nowcss(24)"></td>
                <td onmouseover="nowcss(25)"></td>
                <td onmouseover="nowcss(26)"></td>
                <td onmouseover="nowcss(27)"></td>
            </tr>
            <tr>
                <td onmouseover="nowcss(28)"></td>
                <td onmouseover="nowcss(29)"></td>
                <td onmouseover="nowcss(30)"></td>
                <td onmouseover="nowcss(31)"></td>
                <td onmouseover="nowcss(32)"></td>
                <td onmouseover="nowcss(33)"></td>
                <td onmouseover="nowcss(34)"></td>
            </tr>
            <tr>
                <td onmouseover="nowcss(35)"></td>
                <td onmouseover="nowcss(36)"></td>
                <td onmouseover="nowcss(37)"></td>
                <td onmouseover="nowcss(38)"></td>
                <td onmouseover="nowcss(39)"></td>
                <td onmouseover="nowcss(40)"></td>
                <td onmouseover="nowcss(41)"></td>
            </tr>
        </table>
    </div>
    
</body>
<script>
    
    var date=new Date();
    var Year=date.getFullYear(),Month=date.getMonth()+1,day=date.getDate();// 年
    var Month1_num=['31','28','31','30','31','30','31','31','30','31','30','31'];//非闰年
    var Month2_num=['31','29','31','30','31','30','31','31','30','31','30','31'];//闰年
    var Month_num;
    function display_date_time(){//对日期、时间进行输出的函数
        var date=new Date();
        var time=(date.getHours()>9?date.getHours():('0'+date.getHours()))+':'+(date.getMinutes()>9?date.getMinutes():('0'+date.getMinutes()))+':'+(date.getSeconds()>9?date.getSeconds():('0'+date.getSeconds()));
        $("span")[0].innerHTML=Year+'年'+Month+"月"+day+"日";
        $("span")[1].innerHTML=time;
        $("span")[2].innerHTML=Month;
        setTimeout('display_date_time()',50);
    }
    function display_calendar(){
        var myDay=new Date(Year+'-'+Month+'-'+1).getDay();
        var i=myDay,j=0,k=myDay-1;

        for(j=1;j<=Month_num[Month-1];i++,j++){
            $("td")[i].innerHTML=j;
            $("td:eq("+i+")").attr('class','td1');
        }
        for(j=1;i<=41;i++,j++){
            $("td")[i].innerHTML=j;
            $("td:eq("+i+")").attr('class','td2');
        }
        for(j=(Month_num[Month-2]!=null?Month_num[Month-2]:31);k>=0;k--,j--){//对前一个月的天数的二目表达式，防止在一月获取不到上一年12月的天数
            $("td")[k].innerHTML=j;
            $("td:eq("+k+")").attr('class','td0');
        }
        setTimeout('display_calendar()',50);
    }
    function HCQ_changeMonth(key){//对两个按钮的操作进行编辑
        if(key==1){
            var month_next=Month-1;
            if(month_next==0) {month_next=12;Year-=1;}
            Month=month_next;
        }
        else if(key==2){
            var month_next=Month+1;
            if(month_next==13) {month_next=1;Year+=1;}
            Month=month_next;
        }
    }
    function HCQ_isMonth(){
        if(Year%4==0||Year%400==0&&Year%100!=0)
        {
            Month_num=Month2_num;
        }
        else{
            Month_num=Month1_num;
        }
        setTimeout('HCQ_isMonth()',50);
    }
    

    display_date_time();
    HCQ_isMonth();
    display_calendar();

    function HCQ_selfChange(){//实现一些自适应功能
        var CX=HCQ_calendar.scrollWidth;
        var fontSize=CX/20;
        var fontSize1=CX/30;
        $("#HCQ_date span").css('font-size',fontSize+'px');
        $("#HCQ_time span").css('font-size',fontSize+'px');
        $("#HCQ_oprate span").css('font-size',fontSize+'px');
        $("#HCQ_oprate input").css('font-size',fontSize1+'px');
    }
    function csstemple(key,degNum){
        $("#HCQ_table td:eq("+key+")").css({
            'background-clip':'padding-box,border-box',
            'background-origin':'padding-box,border-box',
            'background-image':"linear-gradient(0deg,#000,#000),linear-gradient("+degNum+"deg,rgba(2, 2, 2, 0.4),rgb(73, 73, 73))",
            'border':'4px transparent solid'});
    }
    function nowcss(i){
        $("#HCQ_table td:eq("+i+")").css({
            'border':'4px solid #909090'});
            if(i==0){csstemple(i+1,270);csstemple(i+7,0);csstemple(i+8,0);}
            else if(i>=1&&i<=5) {csstemple(i+1,270);csstemple(i-1,90);csstemple(i+6,0);csstemple(i+7,0);csstemple(i+8,0);}
            else if(i==6) {csstemple(i-1,90);csstemple(i+6,0);csstemple(i+7,0);}
            else if(i==7||i==14||i==21||i==28) {csstemple(i+1,270);csstemple(i+7,0);csstemple(i-7,180);csstemple(i+8,0);csstemple(i-6,180);}
            else if(i==13||i==20||i==27||i==34) {csstemple(i-1,90);csstemple(i+7,0);csstemple(i-8,180);csstemple(i+6,0);csstemple(i-7,180);}
            else if(i==35) {csstemple(i-7,180);csstemple(i+1,270);csstemple(i-6,180);}
            else if(i==41) {csstemple(i-1,90);csstemple(i-7,180);csstemple(i-8,180);}
            else
            {
            csstemple(i+1,270);
            csstemple(i-1,90);
            csstemple(i+7,0);
            csstemple(i-7,180);
            csstemple(i+6,0);
            csstemple(i-6,180);
            csstemple(i+8,0);
            csstemple(i-8,180);
            }
    }
    $(document).on("mouseout",'#HCQ_table td',function(){
		for(var j=0;j<=41;j++)
        $("td:eq("+j+")").css({
            'border':'4px solid black'});
    });

   
    HCQ_selfChange();
</script>
</html>

这是css文件：

#HCQ_calendar{
  color:white;
  width: 400px;
  height: 400px;
  background: black;
  opacity: .8;
  border:1px solid #888;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
#HCQ_date_time{
  width: 97%;
  margin-left: 3%;
}
#HCQ_date{
  text-align: center;
  float: left;
  width: 40%;
}
#HCQ_time{
  text-align: center;
  float: left;
  width: 30%;
}
#HCQ_oprate input{
  width:10%;
  background-color:rgb(100, 109, 100);
  border:none;
  color:black;
  display:inline-block;
  cursor: pointer;    
}
#HCQ_table{
  color: white;
  width:90%;
  height:90%;
  margin-left: 5%;
  text-align: center;
}
#HCQ_table td{
  width: 14%;
  height: 14%;
}
#HCQ_table .td0{
  color: rgb(73, 73, 73);
}
#HCQ_table .td2{
  color: rgb(73, 73, 73);
}