百度用到的Js日历大家可以看看

作者：U友50081205_653 | 2022-12-24 16:59

本JavaScript日历是从百度网站里整理出来的，费了很大劲，因为感觉这个日历简直太棒了，没有使用任何的外部文件，全部是HTML代码和Javascirpt实现。

而且日历功能很强大，带有节日、农历等，运行看效果就明白了，相信不会让您失望的。

<title>百度的Js日历，值得一看</title> <table cellpadding="0" cellspacing="0" id="1"> <tr> <td><style> body,td,.p1,.p2,.i{font-family:arial} body{margin:6px 0 0 0;background-color:#fff;color:#000;} table{border:0} #cal{width:434px;border:1px solid #c3d9ff;font-size:12px;margin:8px 0 0 15px} #cal #top{height:29px;line-height:29px;background:#e7eef8;color:#003784;padding-left:70px} #cal #top select{font-size:12px} #cal #top input{padding:0} #cal ul#wk{margin:0;padding:0;height:25px} #cal ul#wk li{float:left;width:60px;text-align:center;line-height:25px;list-style:none} #cal ul#wk li b{font-weight:normal;color:#c60b02} #cal #cm{clear:left;border-top:1px solid #ddd;border-bottom:1px dotted #ddd;position:relative} #cal #cm .cell{position:absolute;width:42px;height:36px;text-align:center;margin:0 0 0 9px} #cal #cm .cell .so{font:bold 16px arial;} #cal #bm{text-align:right;height:24px;line-height:24px;padding:0 13px 0 0} #cal #bm a{color:7977ce} #cal #fd{display:none;position:absolute;border:1px solid #dddddf;background:#feffcd;padding:10px;line-height:21px;width:150px} #cal #fd b{font-weight:normal;color:#c60a00} </style>  <div id="cal"> <div id="top">公元  <select> </select>  年  <select> </select>  月    农历<span></span>年 [ <span></span>年 ]       <input type="button" value="回到今天" title="点击后跳转回今天" style="padding:0px"> </div> <ul id="wk"> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li><b>六</b></li> <li><b>日</b></li> </ul> <div id="cm"></div> <div id="bm"></div> </div></td> </tr> </table> <script type="text/javascript"> 0||c.solarMonth!=a.solarMonth){ X.dateArray[e]=null; continue } var b=new U(new Date()); if(c.solarYear==b.solarYear&&c.solarMonth==b.solarMonth&&c.solarDate==b.solarDate){ c.isToday=true } X.dateArray[e]=c; c=new U(C(c.date,1)); f-- } } return{ init:function(a){ Z(a) } ,getJson:function(){ return X } } } )(); var W=(function(){ var C=M("top").getElementsByTagName("SELECT")[0]; var X=M("top").getElementsByTagName("SELECT")[1]; var G=M("top").getElementsByTagName("SPAN")[0]; var c=M("top").getElementsByTagName("SPAN")[1]; var Y=M("top").getElementsByTagName("INPUT")[0]; function a(g){ G.innerHTML=g.ganzhiYear; c.innerHTML=g.shengxiao } function b(g){ C[g.solarYear-1901].selected=true; X[g.solarMonth-1].selected=true } function f(){ var j=C.value; var g=X.value; var i=new U(new Date(j,g-1,1)); Q.init(i); N.draw(); if(this==C){ i=new U(new Date(j,3,1)); G.innerHTML=i.ganzhiYear; c.innerHTML=i.shengxiao } var h=new U(new Date()); Y.style.visibility=(j==h.solarYear&&g==h.solarMonth)?"hidden":"visible" } function Z(){ var g=new U(new Date()); a(g); b(g); Q.init(g); N.draw(); Y.style.visibility="hidden" } function d(k,g){ for(var j=1901;j<2050;j++){ var h=R("OPTION"); h.value=j; h.innerHTML=j; if(j==k){ h.selected="selected" } C.appendChild(h) } for(var j=1;j<13;j++){ var h=R("OPTION"); h.value=j; h.innerHTML=j; if(j==g){ h.selected="selected" } X.appendChild(h) } C.onchange=f; X.onchange=f } function e(g){ d(g.solarYear,g.solarMonth); G.innerHTML=g.ganzhiYear; c.innerHTML=g.shengxiao; Y.onclick=Z; Y.style.visibility="hidden" } return{ init:function(g){ e(g) } ,reset:function(g){ b(g) } } } )(); var N=(function(){ function C(){ var Z=Q.getJson(); var c=Z.dateArray; M("cm").style.height=Z.lines*38+2+"px"; M("cm").innerHTML=""; for(var a=0;a<c.length;a++){ if(c[a]==null){ continue } var X=R("DIV"); if(c[a].isToday){ X.style.border="1px solid #a5b9da"; X.style.background="#c1d9ff" } X.className="cell"; X.style.left=(a%7)*60+"px"; X.style.top=Math.floor(a/7)*38+2+"px"; var b=R("DIV"); b.className="so"; // https://www.jb51.net b.style.color=((a%7)>4||c[a].isRest)?"#c60b02":"#313131"; b.innerHTML=c[a].solarDate; X.appendChild(b); var Y=R("DIV"); Y.style.color="#666"; Y.innerHTML=c[a].showInLunar; X.appendChild(Y); X.onmouseover=(function(d){ return function(f){ F.show({ dateIndex:d,cell:this } ) } } )(a); X.onmouseout=function(){ F.hide() } ; M("cm").appendChild(X) } var G=R("DIV"); G.id="fd"; M("cm").appendChild(G); F.init(G) } return{ draw:function(G){ C(G) } } } )(); var F=(function(){ var C; function Y(e,c){ if(arguments.length>1){ var b=/([.*+?^=!:${}()|[\]\/\\])/g,Z="{".replace(b,"\\$1"),d="}".replace(b,"\\$1"); var a=new RegExp("#"+Z+"([^"+Z+d+"]+)"+d,"g"); if(typeof (c)=="object"){ return e.replace(a,function(f,h){ var g=c[h]; return typeof (g)=="undefined"?"":g } ) } } return e } function G(b){ var a=Q.getJson().dateArray[b.dateIndex]; var Z=b.cell; var c="#{solarYear} 年 #{solarMonth} 月 #{solarDate} 日 #{solarWeekDayInChinese}"; c+="<br><b>农历 #{lunarMonthInChinese}月#{lunarDateInChinese}</b>"; c+="<br>#{ganzhiYear}年 #{ganzhiMonth}月 #{ganzhiDate}日"; if(a.solarFestival!=""||a.lunarFestival!=""||a.jieqi!=""){ c+="<br><b>#{lunarFestival} #{solarFestival} #{jieqi}</b>" } C.innerHTML=Y(c,a); C.style.top=Z.offsetTop+Z.offsetHeight-5+"px"; C.style.left=Z.offsetLeft+Z.offsetWidth-5+"px"; C.style.display="block" } function X(){ C.style.display="none" } return{ show:function(Z){ G(Z) } ,hide:function(){ X() } ,init:function(Z){ C=Z } } } )(); var A=new U(new Date()); if(S){ window.attachEvent("onload",function(){ W.reset(A) } ) } W.init(A); Q.init(A); N.draw(); } )(); //--> </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

推荐阅读

程序员
如何有效地将Matlab引擎数组转换为numpy ndarray？

如何解决《如何有效地将Matlab引擎数组转换为numpyndarray？》经验，为你挑选了2个好方法。 ... [详细]
程序员
尝试运行Qt应用程序时LD_LIBRARY_PATH失败

如何解决《尝试运行Qt应用程序时LD_LIBRARY_PATH失败》经验，为你挑选了1个好方法。 ... [详细]
程序员
_fullpath返回驱动后者的当前路径

如何解决《_fullpath返回驱动后者的当前路径》经验，为你挑选了1个好方法。 ... [详细]
程序员
SIMD/SSE:如何检查所有向量元素是否为非零

如何解决《SIMD/SSE:如何检查所有向量元素是否为非零》经验，为你挑选了1个好方法。 ... [详细]
程序员
使用带有scikit-learn的Lasso进行特征选择

如何解决《使用带有scikit-learn的Lasso进行特征选择》经验，为你挑选了0个好方法。 ... [详细]
程序员
Redis - 手动提升从属设备

如何解决《Redis-手动提升从属设备》经验，为你挑选了1个好方法。 ... [详细]
程序员
从图库中获取图像以在片段中的imageview中设置？

如何解决《从图库中获取图像以在片段中的imageview中设置？》经验，为你挑选了0个好方法。 ... [详细]
程序员
python,matplotlib:specgram数据数组值与specgram plot不匹配

如何解决《python,matplotlib:specgram数据数组值与specgramplot不匹配》经验，为你挑选了1个好方法。 ... [详细]
程序员
std :: string没有将数据存储在连续的内存位置的好处(在C++ 11之前)

如何解决《std::string没有将数据存储在连续的内存位置的好处(在C++11之前)》经验，为你挑选了1个好方法。 ... [详细]
程序员
为什么java.util.logging.Logger打印到stderr？

如何解决《为什么java.util.logging.Logger打印到stderr？》经验，为你挑选了0个好方法。 ... [详细]
程序员
MockMvc和Spring Security - Null FilterChainProxy

如何解决《MockMvc和SpringSecurity-NullFilterChainProxy》经验，为你挑选了0个好方法。 ... [详细]
程序员
子进程cp返回错误 - bufsize必须是整数

如何解决《子进程cp返回错误-bufsize必须是整数》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何在Heroku Local上查看未修剪的日志

如何解决《如何在HerokuLocal上查看未修剪的日志》经验，为你挑选了1个好方法。 ... [详细]
程序员
在Opencv和python中的K-means聚类:在mahalanobis距离中是否有任何聚类选项？

如何解决《在Opencv和python中的K-means聚类:在mahalanobis距离中是否有任何聚类选项？》经验，为你挑选了1个好方法。 ... [详细]
程序员
Haskell - 接受不同的类型并采取相应的行动

如何解决《Haskell-接受不同的类型并采取相应的行动》经验，为你挑选了2个好方法。 ... [详细]
程序员
在Crystal Report中的每条记录后插入空白页

如何解决《在CrystalReport中的每条记录后插入空白页》经验，为你挑选了0个好方法。 ... [详细]
程序员
Java 8:使用流转换日期

如何解决《Java8:使用流转换日期》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何将JSON保存到本地文本文件

如何解决《如何将JSON保存到本地文本文件》经验，为你挑选了2个好方法。 ... [详细]
程序员
错误:此标识池不支持指定的开发人员提供程序

如何解决《错误:此标识池不支持指定的开发人员提供程序》经验，为你挑选了1个好方法。 ... [详细]
程序员
SELECT + SUM + LEFT JOIN

如何解决《SELECT+SUM+LEFTJOIN》经验，为你挑选了1个好方法。 ... [详细]

U友50081205_653

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

RankList | 热门文章

百度用到的Js日历 大家可以看看

百度用到的Js日历大家可以看看