JavaScript+css打造的精美日历控件

发布时间：2019-01-02 09:31:38 所属栏目：专访来源：站长网

导读：烈火网(LieHuo.Net)教程一款利用 Java Script+css打造的精美日历控件，非常不错，在 IE浏览器下测试通过，其它浏览器没有测试，代码有点乱，喜欢的朋友自己整理一下，请见下面的代码与演示： titleJavascript+css打造的精美日历控件 - Liehuo.Net/titles

　　烈火网(LieHuo.Net)教程一款利用JavaScript+css打造的精美日历控件，非常不错，在IE浏览器下测试通过，其它浏览器没有测试，代码有点乱，喜欢的朋友自己整理一下，请见下面的代码与演示：

<title>Javascript+css打造的精美日历控件 - Liehuo.Net</title> <style> *{ font:12px; letter-spacing:0px; } body{ background-color:#E5E9F2; overflow:hidden; margin:0; border:0px; } #titleYear{ text-align:center; padding-top:3px; width:120px; height:20px; border:solid #E5E9F2; border-width:0px 1px 1px 0px; background-color:#A4B9D7; color:#000; cursor:default; } #weekNameBox{ width:282px; border-bottom:0; } .weekName{ text-align:center; padding-top:4px; width:40px; height:20px; border:solid #E5E9F2; border-width:0px 1px 1px 0px; background-color:#C0D0E8; color:#243F65; cursor:default; } .controlButton{ font-family: Webdings; font:9px; text-align:center; padding-top:2px; width:40px; height:20px; border:solid #E5E9F2; border-width:0px 1px 1px 0px; background-color:#A4B9D7; color:#243F65; cursor:default; } .Ctable{ width:282px; margin-bottom:20px; } .Ctable span{ font:9px verdana; font-weight:bold; color:#243F65; text-align:center; padding-top:4px; width:40px; height:26px; border:solid #C0D0E8; border-width:0px 1px 1px 0px; cursor:default; } .Cdate{ background-color:#E5E9F2; } .Ctable span.OtherMonthDate{ color:#999; background-color:#f6f6f6; } .selectBox{ cursor:hand; font:9px verdana; width:80px; position:absolute; border:1px solid #425E87; overflow-y:scroll; overflow-x:hidden; background-color:#fff; FILTER:progid:DXImageTransform.Microsoft.Shadow(Color=#999999,offX=10,offY=10,direction=120,Strength=5); SCROLLBAR-FACE-COLOR: #E5E9F2; SCROLLBAR-HIGHLIGHT-COLOR: #E5E9F2; SCROLLBAR-SHADOW-COLOR: #A4B9D7; SCROLLBAR-3DLIGHT-COLOR: #A4B9D7; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #eeeee6; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; } .selectBox nobr{ padding:0px 0px 2px 5px; width:100%; color:#000; letter-spacing:2px; text-decoration:none; } </style> <body onselectstart="return false"> <div style="margin:0 0 0 0"> <div id=controlBar><span class=controlButton cmd=py title=上一年>33</span><span class=controlButton cmd=pm title=上一月>3</span><span id=titleYear></span><span class=controlButton cmd=nm title=下一月>4</span><span class=controlButton cmd=ny title=下一年>44</span></div> <div id=weekNameBox></div> <div id=calendarBox></div> </div> </body> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' title="liehuo.net" target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：宁德站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!