首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生js制作日历控件实例分享

Posted in Javascript onApril 06, 2016

本文实例为大家分享了js实现一个简单的日历控件，供大家参考，具体内容如下

效果图：

原生js制作日历控件实例分享

具体代码：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>date</title>
 <style type="text/css">
 *{ margin:0; padding:0;}
 a{ text-decoration:none; outline:none;}
 body a{outline:none;blr:expression(this.onFocus=this.blur());}
 img{ border:none;}
 ul{ list-style:none;}
 body{ color:#666666; font-size:14px; font-family:"微软雅黑"; background-color:#fff; height:100%; overflow-y:scroll;*overflow-y:inherit;}
 /*html{ height:100%;}*/
 .clearfix:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}
 .clearfix{ zoom:1;}
 
 
 #box{width:350px; position:absolute;}
 #title{width:350px; height:50px;}
 #month{ float:left;width:60px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
 #year{float:left;width:80px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
 #week{ width:350px;height:50px;}
 #week div{ float:left; width:48px; height:48px; margin:1px; background:#C90; color:#fff; text-align:center; line-height:48px; cursor:pointer;}
 #con{ width:350px;}
 #con div{ float:left; width:48px; height:48px; margin:1px; background:#CCC; color:#333; text-align:center; line-height:48px; cursor:pointer;}
 #con .edate{background:#999;}
 #con .edate:hover{background:#09F; color:#fff;}
 #con div.now{background:#09F; color:#fff;}
  
 #prevmonth,#nextmonth,#prevyear,#nextyear{float:left;width:50px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
  
 #btns{width:350px; height:40px;}
 #nowtime{ float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;}
 #nowtime:hover{background:#ddd;}
 #cleartime{float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;}
 </style>
</head>
<body>
 <p style=" margin:100px;">选择日期：<input type="text" id="date" value="" style="height:40px; line-height:40px;"/></p>
  
  
</body>
<script type="text/javascript">
window.onload=function(){ 
 
 
 
 //创建日历控件基本结构 
 var obody=document.body;
 createbox();
 function createbox(){
   
  var ddbox=document.createElement("div");
  ddbox.id="box";
  ddbox.style.display="none";
  var str="";
  str+='<div id="title"><div id="prevyear"><<</div><div id="prevmonth"><</div><div id="month"></div><div id="year"></div><div id="nextmonth">></div><div id="nextyear">>></div></div>';
  str+='<div id="week"><div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div></div>';
  str+='<div id="con" class="clearfix"></div>';
  str+='<div id="btns"><div id="nowtime">当前时间</div><div id="cleartime">清空</div></div>';
  ddbox.innerHTML=str;
  obody.appendChild(ddbox);   
 };
 //===================get ele=============================== 
 var omonth=document.getElementById("month");
 var oyear=document.getElementById("year");
 var con=document.getElementById("con");
 var prevmonth=document.getElementById("prevmonth");
 var nextmonth=document.getElementById("nextmonth");
 var prevyear=document.getElementById("prevyear");
 var nextyear=document.getElementById("nextyear");
 var nowtime=document.getElementById("nowtime");
 var date=document.getElementById("date");
 var box=document.getElementById("box");
 var cleartime=document.getElementById("cleartime");
 //===================show date===============================
 date.onfocus=function(){//显示控件
  var datel=this.getBoundingClientRect().left;
  var datet=this.getBoundingClientRect().top+40;
  box.style.left=datel+"px";
  box.style.top=datet+"px";
  box.style.display="block";
 }; 
 con.onclick=function(event){
  if(event.target.tagName=="DIV" && event.target.nodeType=="1" && hasclass(event.target.className,"edate")){
   date.value="";
   date.value=dateObj.getFullYear()+"-"+toyear(dateObj)+"-"+event.target.innerHTML;
   box.style.display="none";
  };
 };
 cleartime.onclick=function(event){
  date.value="";
 };
 //===================set year month===============================
 //默认时间对象
 var dateObj = new Date();
 //动态控制
 prevmonth.onclick=function(){//上一月
  var ddm=null;
  var ddy=null;
  if((dateObj.getMonth()-1)==-1){
   ddm=11;
   ddy=dateObj.getFullYear()-1;
  }else{
   ddm=dateObj.getMonth()-1;
   ddy=dateObj.getFullYear();
  };
  dateObj.setFullYear(ddy);
  dateObj.setMonth(ddm);
  omonth.innerHTML=toyear(dateObj)+"月";
  oyear.innerHTML=dateObj.getFullYear()+"年";
  remove();
  oneweek=oneyearoneday(dateObj);
  alld=alldays(dateObj);
  nowd=nowday(dateObj);
  init(oneweek,alld,nowd);
 };
 nextmonth.onclick=function(){//下一月
  var ddm=null;
  var ddy=null;
  if((dateObj.getMonth()+1)==12){
   ddm=0;
   ddy=dateObj.getFullYear()+1;
  }else{
   ddm=dateObj.getMonth()+1;
   ddy=dateObj.getFullYear();
  };
  dateObj.setFullYear(ddy);
  dateObj.setMonth(ddm);
  omonth.innerHTML=toyear(dateObj)+"月";
  oyear.innerHTML=dateObj.getFullYear()+"年";
  remove();
  oneweek=oneyearoneday(dateObj);
  alld=alldays(dateObj);
  nowd=nowday(dateObj);
  init(oneweek,alld,nowd);  
 };
 prevyear.onclick=function(){//上一年
  var ddy=dateObj.getFullYear()-1;
  dateObj.setFullYear(ddy);
  oyear.innerHTML=dateObj.getFullYear()+"年";
  remove();
  oneweek=oneyearoneday(dateObj);
  alld=alldays(dateObj);
  nowd=nowday(dateObj);
  init(oneweek,alld,nowd);
 };
 nextyear.onclick=function(){//下一年
  var ddy=dateObj.getFullYear()+1;
  dateObj.setFullYear(ddy);
  oyear.innerHTML=dateObj.getFullYear()+"年";
  remove();
  oneweek=oneyearoneday(dateObj);
  alld=alldays(dateObj);
  nowd=nowday(dateObj);
  init(oneweek,alld,nowd);  
 }; 
 //返回到今时今日
 nowtime.onclick=function(){
  var dddate=new Date();
  var ddm=dddate.getMonth();
  var ddy=dddate.getFullYear();
  dateObj.setFullYear(ddy);
  dateObj.setMonth(ddm);
  omonth.innerHTML=toyear(dateObj)+"月";
  oyear.innerHTML=dateObj.getFullYear()+"年";
  remove();
  oneweek=oneyearoneday(dateObj);
  alld=alldays(dateObj);
  nowd=nowday(dateObj);
  init(oneweek,alld,nowd);  
 };
 //年月获取 
 var year=dateObj.getFullYear();
 var month=toyear(dateObj);//0是12月
 //月年的显示
 omonth.innerHTML=month+"月";
 oyear.innerHTML=year+"年";
 //===================set day===============================
 
 //获取本月1号的周值
 var oneweek=oneyearoneday(dateObj);
 //本月总日数
 var alld=alldays(dateObj);
 //当前是几
 var nowd=nowday(dateObj);
 //初始化显示本月信息
 init(oneweek,alld,nowd);
  
 //===================function===============================
 //有无指定类名的判断
 function hasclass(str,cla){
  var i=str.search(cla);
  if(i==-1){
   return false;
  }else{
   return true;
  };
 };
 //初始化日期显示方法
 function remove(){
  con.innerHTML="";
 };
 function init(oneweek,alld,nowd){
  for(var i=1;i<=oneweek;i++){//留空
   var eday=document.createElement("div");
   eday.innerHTML="";
   con.appendChild(eday);
  };
  for(var i=1;i<=alld;i++){//正常区域
   var eday=document.createElement("div");
   if(i==nowd){     
    eday.innerHTML=i;
    eday.className="now edate";
    con.appendChild(eday);
   }else{
    eday.innerHTML=i;
    eday.className="edate";
    con.appendChild(eday);
   };
  };
 };
 //获取本月1号的周值
 function oneyearoneday(dateObj){
  var oneyear = new Date();
  var year=dateObj.getFullYear();
  var month=dateObj.getMonth();//0是12月
  oneyear.setFullYear(year);
  oneyear.setMonth(month);//0是12月
  oneyear.setDate(1);
  return oneyear.getDay();  
 };
 //当前是几
 function nowday(dateObj){
  return dateObj.getDate();
 };
 //获取本月总日数方法
 function alldays(dateObj){
  var year=dateObj.getFullYear();
  var month=dateObj.getMonth();
  if(isLeapYear(year)){//闰年
   switch(month) { 
   case 0: return "31"; break; 
   case 1: return "29"; break; //2月
   case 2: return "31"; break; 
   case 3: return "30"; break; 
   case 4: return "31"; break; 
   case 5: return "30"; break; 
   case 6: return "31"; break; 
   case 7: return "31"; break; 
   case 8: return "30"; break; 
   case 9: return "31"; break; 
   case 10: return "30"; break; 
   case 11: return "31"; break;   
   default:  
   };
  }else{//平年
   switch(month) { 
   case 0: return "31"; break; 
   case 1: return "28"; break; //2月 
   case 2: return "31"; break; 
   case 3: return "30"; break; 
   case 4: return "31"; break; 
   case 5: return "30"; break; 
   case 6: return "31"; break; 
   case 7: return "31"; break; 
   case 8: return "30"; break; 
   case 9: return "31"; break; 
   case 10: return "30"; break; 
   case 11: return "31"; break;   
   default:  
   };   
  };
 };
 //闰年判断函数
 function isLeapYear(year){ 
  if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
   return true;
  }else{
   return false;
  }; 
 };
 //月份转化方法
 function toyear(dateObj){ 
  var month=dateObj.getMonth()
  switch(month) { 
  case 0: return "1"; break; 
  case 1: return "2"; break; 
  case 2: return "3"; break; 
  case 3: return "4"; break; 
  case 4: return "5"; break; 
  case 5: return "6"; break; 
  case 6: return "7"; break; 
  case 7: return "8"; break; 
  case 8: return "9"; break; 
  case 9: return "10"; break; 
  case 10: return "11"; break; 
  case 11: return "12"; break;   
  default: 
  }; 
 };
};
</script>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

原生js制作日历控件实例分享

- Author -

透笔度

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
js中substr,substring,indexOf,lastIndexOf，split，replace的用法详解
Nov 09 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
js中的闭包学习心得
Feb 06 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 #Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 #Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 #Javascript
jQuery隐藏和显示效果实现
Apr 06 #Javascript
JS动态改变浏览器标题的方法
Apr 06 #Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 #Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 #Javascript
三子棋(2) variable_scope(1) name_scope (1) 绘图(1) blinker(1) data(4) Keras(3) turtle(1) 信号库(1) 神经网络(7)
You might like
Smarty中常用变量操作符汇总
2014/10/27 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
一个实用的php验证码类
2017/07/06 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
JQuery 1.6发布 性能提升，同时包含大量破坏性变更
2011/05/10 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
python实现井字棋游戏
2020/03/30 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
django 修改server端口号的方法
2018/05/14 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python实现图片转字符画
2021/02/19 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
加拿大健康、婴儿和美容产品在线购物：Well.ca
2016/11/30 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
销售类求职信
2014/06/13 职场文书
开展读书活动总结
2014/06/30 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书