原生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 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
用VsCode编辑TypeScript的实现方法
May 07 Javascript
js实现双人五子棋小游戏
May 28 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
php 获得汉字拼音首字母的函数
2009/08/01 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
VBScript版代码高亮
2006/06/26 Javascript
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
pyramid配置session的方法教程
2013/11/27 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
Python中类的初始化特殊方法
2017/12/01 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
详解Python核心对象类型字符串
2018/02/11 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
python 获取计算机的网卡信息
2021/02/18 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
交通事故检查书范文
2014/01/30 职场文书
师德演讲稿范文
2014/05/06 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
公积金贷款承诺书
2015/04/30 职场文书
音乐会主持人开场白
2015/05/28 职场文书
python四种出行路线规划的实现
2021/06/23 Python