原生js开发的日历插件


Posted in Javascript onFebruary 04, 2017

效果如下所示:

原生js开发的日历插件

代码如下:

<style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 ul, li {
 list-style: none;
 }
 #week {
 width: 350px;
 height: 350px;
 border: 1px solid #ccc;
 }
 #week h6 {
 font-size: 20px;
 overflow: hidden;
 height: 40px;
 line-height: 40px;
 }
 #week h6 div {
 float: left;
 width: 250px;
 text-align: center;
 }
 #week .prev {
 float: left;
 font-size: 12px;
 width: 50px;
 cursor: pointer;
 }
 #week .next {
 float: right;
 font-size: 12px;
 width: 50px;
 cursor: pointer;
 }
 #week p span {
 width: 50px;
 float: left;
 text-align: center;
 height: 30px;
 line-height: 30px;
 }
 #week p {
 background: #ccc;
 overflow: hidden;
 height: 30px;
 }
 #week ul {
 margin-top: 10px;
 }
 #week ul li {
 width: 50px;
 float: left;
 text-align: center;
 height: 30px;
 cursor: pointer;
 }
 </style>
<input type="text" id="ele" onfocus="currentWeek(this)"/>
<script>
 function currentWeek(ele) {
 var obj = offset(ele);
 var x = obj.left;
 var y = obj.top + ele.offsetHeight + 1;
 //创建日历界面
 if (!document.getElementById('week')) {
 var oDiv = document.createElement('div');
 document.body.appendChild(oDiv);
 oDiv.id = 'week';
 oDiv.style.top = y + "px";
 oDiv.style.left = x + "px";
 //创建日历title
 var h6 = document.createElement('h6');
 oDiv.appendChild(h6);
 var prev = document.createElement('div');
 h6.appendChild(prev);
 prev.className = 'prev';
 prev.innerHTML = '上个月';
 var content = document.createElement('div');
 content.className = "content";
 h6.appendChild(content);
 var next = document.createElement('div');
 h6.appendChild(next);
 next.className = 'next';
 next.innerHTML = '下个月';
 //创建星期日到星期六的文字行
 var oPs = document.createElement('p');
 oPs.className = "rlTitle";
 oDiv.appendChild(oPs);
 var opsCont = ['日', '一', '二', '三', '四', '五', '六'];
 for (var i = 0; i <= 6; i++) {
 var oSpan = document.createElement('span');
 oPs.appendChild(oSpan);
 oSpan.innerHTML = opsCont[i];
 }
 //创建日历上面的日期行数所需要的变量
 var oUl = document.createElement('ul');
 oUl.className = "rlCenter";
 oDiv.appendChild(oUl);
 var currentDate = new Date();
 var currentYear = currentDate.getFullYear();
 var currentMonth = currentDate.getMonth();
 active(currentMonth);//传参数月份
 //创建日历上下翻月
 prev.onclick = function () {
 active(--currentMonth);
 };
 next.onclick = function () {
 active(++currentMonth);
 };
 }
 //动态创建日历上面日期,变包装成方法
 function active(m) {
 oUl.innerHTML = ''; //切忌一定要把这个内容去掉,要不然会点一次翻页都在日历下面依次显示出来
 var activeDate = new Date(currentYear, m, 1); //外面传进来的不断变化的日期对象
 var year = activeDate.getFullYear();
 var month = activeDate.getMonth(); //把当前的月份保存下来只是为了给title获取月份
 content.innerHTML = year + '年' + (month + 1) + '月';
 //创建日历上面的日期行数
 var n = 1 - activeDate.getDay();
 if (n == 1) {
 n = -6;
 } //为了日历更友好的显示三个月,让用户看的更明白。
 activeDate.setDate(n); //如果n为负数,则减少月份.在用这个月最后一天减去这个值就可以获得日历从哪天开始的。
 for (var i = 0; i < 42; i++) {
 var oLi = document.createElement('li');
 oUl.appendChild(oLi);
 var date = activeDate.getDate(); //返回日期1-31号
 oLi.innerHTML = date;
 oLi.dateValue = year + "-" + (activeDate.getMonth() + 1) + "-" + date; //这里必须是activeDate.getMonth()+1,不能用m+1。因为这个是一直变化的。要不然日历不管点哪天都是属于当前月份的。
 oLi.onclick = function () {
  ele.value = this.dateValue;//文本框获取的年月日
  document.body.removeChild(oDiv); //获取到年月日,日历取消
  oDiv = null;
 };
 if (activeDate.getMonth() != month) {
  oLi.style.color = "#ccc"; //不是本月的天数颜色变成灰色 
 }
 //切忌下面这个增加天数语句,一定要判断完上面是不是本月的天数,然后在添加这条增加语句,要不然会出现错误。
 activeDate.setDate(date + 1); //如果超出该月份应有的天数则增加月份
 }
 }
 }
 function offset(ele) {
 var l = ele.offsetLeft;
 var t = ele.offsetTop;
 var p = ele.offsetParent;
 while (p) {
 if (window.navigator.userAgent.indexOf("MSIE 8") > -1) {
 l += p.offsetLeft;
 t += p.offsetTop;
 } else {
 l += p.offsetLeft + p.clientLeft;
 t += p.offsetTop + p.clientTop;
 }
 p = p.offsetParent;
 }
 return {
 left: l,
 top: t
 }
 }
</script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 #Javascript
原生js实现打字动画游戏
Feb 04 #Javascript
js实现自定义路由
Feb 04 #Javascript
jQuery窗口拖动功能的实现代码
Feb 04 #Javascript
简单易懂的天气插件(代码分享)
Feb 04 #Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 #Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 #Javascript
You might like
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
php防止sql注入代码实例
2013/12/18 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
laravel学习教程之关联模型
2016/07/30 PHP
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
Python import用法以及与from...import的区别
2015/05/28 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
Python list运算操作代码实例解析
2020/01/20 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
Why we need EJB
2016/10/20 面试题
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
高中教师考核方案
2014/05/18 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
2014年保洁工作总结
2014/11/24 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
alibaba seata服务端具体实现
2022/02/24 Java/Android