原生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 相关文章推荐
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
domReady的实现案例
Nov 23 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
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入门
2006/10/09 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
php把数组值转换成键的方法
2015/07/13 PHP
斜45度寻路实现函数
2009/08/20 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
js转换对象为xml
2017/02/17 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
详解Python中的文本处理
2015/04/11 Python
浅析Git版本控制器使用
2017/12/10 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
Python之列表实现栈的工作功能
2019/01/28 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
Python中base64与xml取值结合问题
2019/12/22 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
python可以用哪些数据库
2020/06/22 Python
英国家电直销:Appliances Direct
2016/09/22 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
中专生自荐信
2014/06/25 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
学校实习推荐信
2015/03/27 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
食堂卫生管理制度
2015/08/04 职场文书