开源炫酷日历、网页日历模板、自适应大小日历、win10日历-阿里云开发者社区

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

2023-02-22 371

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

博主的话

本日历的样式，仿照的是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);
}

欢迎大家的批评与指导！

2019.5.2

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

博主的话

如何引用

运行图片

文件目录

开源日历html、css源码

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

博主的话

如何引用

运行图片

文件目录

开源日历html、css源码

热门文章

最新文章

相关电子书