原生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 相关文章推荐
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 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
基于mysql的论坛(1)
2006/10/09 PHP
php模板原理讲解
2013/11/13 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
PHP代码优化技巧小结
2015/09/29 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
Webpack的dll功能使用
2018/06/28 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
javascript 数组精简技巧小结
2020/02/26 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
python数组过滤实现方法
2015/07/27 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
什么是TCP/IP
2014/07/27 面试题
机械设计及其自动化专业推荐信
2013/10/31 职场文书
应届生自荐信范文
2014/02/21 职场文书
入职担保书怎么写
2014/05/12 职场文书
大专毕业生求职信
2014/07/05 职场文书
中标通知书
2015/04/17 职场文书
小学英语教学随笔
2015/08/14 职场文书
初中美术教学反思
2016/02/17 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
Java spring定时任务详解
2021/10/05 Java/Android
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技