首页
所有分类
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 相关文章推荐
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
JavaScript 面向对象之命名空间
May 04 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
深度解读vue-resize的具体用法
Jul 08 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
RP2100(1) PL550(1) PL450(1) GF515(1) 乐信(1) 低放电路(1) BCL3000(2) ICF-SW7600(1) SHARP(1) H-501(1)
You might like
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
PHP下利用shell后台运行PHP脚本，并获取该脚本的Process ID的代码
2011/09/19 PHP
php加密解密实用类分享
2014/01/07 PHP
总结对比php中的多种序列化
2016/08/28 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
Javascript验证方法大全
2015/09/21 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
浅谈Node.js 中间件模式
2018/06/12 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
详解python字节码
2018/02/07 Python
python中logging包的使用总结
2018/02/28 Python
Python多继承顺序实例分析
2018/05/26 Python
Django框架多表查询实例分析
2018/07/04 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
Django如何批量创建Model
2020/09/01 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
北京银河万佳Java面试题
2012/03/21 面试题
初一体育教学反思
2014/01/29 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
乡镇干部个人对照检查材料（群众路线）
2014/09/26 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
golang 实现并发求和
2021/05/08 Golang
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers