博主的话
本日历的样式，仿照的是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
