原生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函数ajax
Aug 20 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
vue.js todolist实现代码
Oct 29 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
AngularJS快速入门
2015/04/02 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
python中import与from方法总结(推荐)
2019/03/21 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
JPA面试常见问题
2016/11/14 面试题
软件测试笔试题
2012/10/25 面试题
毕业生求职简历中的自我评价
2013/10/18 职场文书
水务局局长岗位职责
2013/11/28 职场文书
应用心理学个人求职信范文
2013/12/11 职场文书
主题酒店策划书
2014/01/28 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
经理助理岗位职责
2014/03/05 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
Django中session进行权限管理的使用
2021/07/09 Python
python井字棋游戏实现人机对战
2022/04/28 Python
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript