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

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

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

来源：阅读：1219 次日期：2016-07-08 14:50:06

温馨提示：小编为您整理了“原生js制作日历控件实例分享”,方便广大网友查阅！

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

效果图：

具体代码：

<!DOCTYPE html>

<html>

<head>

*{ 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>

</body>

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程序设计有所帮助。

上一篇：基于javascript bootstrap实现生日日期联动选择

下一篇：基于HTML模板和JSON数据的JavaScript交互(移动端)

手机网站地址：原生js制作日历控件实例分享

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！