手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >纯javascript制作日历控件
纯javascript制作日历控件
摘要:#date_text{background-image:url(images/input.png);background-repeat:no...
#date_text { background-image: url(images/input.png); background-repeat:no-repeat; width: 198px; height: 27px; border:none; padding-left:5px; cursor:pointer; } #cal_body { width: 198px; height: auto; overflow:hidden; border: solid 1px #CCCCCC; display: none; position:absolute; z-index:10; } .line { width:100%; height:26px; float:left; background-color:#0FF; font-size:14px; } .cube { float:left; width:26px; height:26px; line-height:26px; text-align:center; margin-left:2px; margin-bottom:2px; } .btn { float:left; background-color:#CCC; margin-left:10px; width:20px; height:20px; text-align:center; line-height:20px; border-radius:3px; border:solid 1px; margin-top:2px; cursor:pointer; } .year_month { float:left; margin-left:10px; width:90px; height:19px; text-align:center; line-height:19px; border-radius:6px; } .end_tag { height:26px; line-height:26px; margin-left:10px; }

以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了。可能最值得说的一点就是让input控件内部右边显示一个按钮,我是直接给input加了个背景,然后把input的边框去掉实现的。

这个是最初版的,再往后打算做出纯javascript版的,再往后打算用JQuery做一套。

以上所述就是本文的全部内容了,希望大家能够喜欢。

【纯javascript制作日历控件】相关文章:

javascript鼠标滑动评分控件完整

javascript搜索框效果实现方法

javascript中动态函数用法

JavaScript基本语法讲解

javascript实现仿腾讯游戏选择

使用JavaScript刷新网页的方法

javascript实现获取服务器时间

JavaScript中操作字符串小结

Javascript 高阶函数使用介绍

javascript实现日期按月份加减

精品推荐
分类导航