昆明java培训
达内昆明广州春城路

18487146383

热门课程

javascript实现日历控件

  • 时间:2016-03-09
  • 发布:昆明Java培训
  • 来源:达内新闻


   google绚丽的日历控件有知道的小伙伴们, 昆明java培训带大家来实现一个,虽然功能和效果比不上,但重要的是实现的过程.

  下面是要实现的html结构:

<div id="a"><div id="head"><span id="yface">:<select id="year"></select></span><span id="mface">:<select id="month"></select></span></div><div id="biaoti"></div><div id="body"></div></div>

先说一下日历查询的算法:

w=y+parseInt(y/4)+parseInt(c/4)-2*c+parseInt(26*(m+1)/10)+d-1 ;

以下是实现的javascript代码:

 代码如下:

sx.activex.calender={

bind:function(target){

var a=document.createElement("div");

var head=document.createElement("div");

var biaoti=document.createElement("div");

var select=document.createElement("select");

var yface=document.createElement("span");

var mface=document.createElement("span");

var body=document.createElement("div");

var select1=document.createElement("select");

yface.appendChild(select);

mface.appendChild(select1);

head.appendChild(yface);

head.appendChild(mface);

a.appendChild(head);

a.appendChild(biaoti);

a.appendChild(body);

yface.insertBefore(document.createTextNode(" "),yface.firstChild)

mface.insertBefore(document.createTextNode(" "),mface.firstChild)

a.style.position="absolute";

biaoti.style.height="10%";

for(var i=0;i<7;i++){

var can=document.createElement("span")

can.style.width="14%";

can.style.height="100%";

can.style.textAlign="center";

biaoti.appendChild(can);

}

biaoti.all[0].innerText=""

biaoti.all[1].innerText=""

biaoti.all[2].innerText=""

biaoti.all[3].innerText=""

biaoti.all[4].innerText=""

biaoti.all[5].innerText=""

biaoti.all[6].innerText=""

head.style.height="20%";

a.style.position="absolute";

a.style.height="200px";

a.style.width="302px";

a.style.border="1px red solid";

yface.style.width="50%";

yface.style.padding="5px";

yface.style.height="100%";

select.style.width="80%";

for(var i=1960;i<2010;i++){

var option=document.createElement("option");

option.text=i;

select.add(option);

}

mface.style.width="50%";

mface.style.padding="5px";

mface.style.height="100%";

select1.style.width="80%";

for(var i=1;i<=12;i++){

var option=document.createElement("option");

option.text=i;

select1.add(option);

}

body.style.height="70%";

for(var i=0;i<42;i++){

var span=document.createElement("span");

span.style.width="14%";

span.style.height="16%";

span.style.textAlign="center";

span.onmouseover=function(){

this.style.cursor="hand";

this.tempcolor=this.style.backgroundColor;

this.style.backgroundColor="lightblue";

}

span.onmouseout=function(){

this.style.backgroundColor=this.tempcolor;

}

span.onclick=function(){

target.value=select.options[select.selectedIndex].text+""+select1.options[select1.selectedIndex].text+""+this.innerText+"";

a.parentNode.removeChild(a);

}

body.appendChild(span);

}

select.onchange=function(){

for(var o in body.all){

body.all[o].innerText="";

if(o.toString()!="length")

body.all[o].style.backgroundColor="";

}

var year1=this.options[this.selectedIndex].text;

var month1=select1.options[select1.selectedIndex].text;

var y=parseInt(year1.substr(2,2)-0);

var c=parseInt(year1.substr(0,2));;

var m=parseInt(month1);;

m=m>=3?m:(y=y-1,m+12);

var d=1;

var w=y+parseInt(y/4)+parseInt(c/4)-2*c+parseInt(26*(m+1)/10)+d-1 ;

if(w<0) w=w+700;

w=w%7;

switch(parseInt(month1)){

case 2:

if(parseInt(year1)%4==0)

var r=29;

else

var r=28;

var day=w;

for(var d=1;d<=r;d++){

body.all[day++].innerText=d;

if(parseInt(year1)==(new Date()).getYear() && parseInt(month1)==(new Date()).getMonth()+1 && d==(new Date()).getDate())

body.all[day-1].style.backgroundColor="red";

body.all[41].innerText="关闭";

}

break;

default:

if(parseInt(month1)==1 || parseInt(month1)==3 || parseInt(month1)==5 || parseInt(month1)==7 || parseInt(month1)==8 || parseInt(month1)==10 || parseInt(month1)==12)

var r=31;

else

var r=30;

var day=w;

for(var d=1;d<=r;d++){

body.all[day++].innerText=d;

if(parseInt(year1)==(new Date()).getYear() && parseInt(month1)==(new Date()).getMonth()+1 && d==(new Date()).getDate())

body.all[day-1].style.backgroundColor="red";

body.all[41].innerText="关闭";

}

break;

}

}

select1.onchange=function(){

for(var o in body.all){

body.all[o].innerText="";

if(o.toString()!="length")

body.all[o].style.backgroundColor="";

}

var month1=this.options[this.selectedIndex].text;

var year1=select.options[select.selectedIndex].text;

var y=parseInt(year1.substr(2,2)-0);

var c=parseInt(year1.substr(0,2));

var m=parseInt(month1);

m=m>=3?m:(y=y-1,m+12);

var d=1;

var w=y+parseInt(y/4)+parseInt(c/4)-2*c+parseInt(26*(m+1)/10)+d-1 , ;;

if(w<0) w=w+700;

w=w%7;

switch(parseInt(month1)){

case 2:

if(parseInt(year1)%4==0)

var r=29;

else

var r=28;

var day=w;

for(var d=1;d<=r;d++){

body.all[day++].innerText=d;

if(parseInt(year1)==(new Date()).getYear() && parseInt(month1)==(new Date()).getMonth()+1 && d==(new Date()).getDate())

body.all[day-1].style.backgroundColor="red";

body.all[41].innerText="关闭";

}

break;

default:

if(parseInt(month1)==1 || parseInt(month1)==3 || parseInt(month1)==5 || parseInt(month1)==7 || parseInt(month1)==8 || parseInt(month1)==10 || parseInt(month1)==12)

var r=31;

else

var r=30;

var day=w;

for(var d=1;d<=r;d++){

body.all[day++].innerText=d;

if(parseInt(year1)==(new Date()).getYear() && parseInt(month1)==(new Date()).getMonth()+1 && d==(new Date()).getDate())

body.all[day-1].style.backgroundColor="red";

body.all[41].innerText="关闭";

}

break;

}

}

var date=new Date();

for(var s1=0;s1<select.options.length;s1++){

if(parseInt(select.options[s1].text)==parseInt(date.getYear())){

select.options[s1].selected=true;

break;

}

}

for(var s2=0;s2<select1.options.length;s2++){

if(parseInt(select1.options[s2].text)==parseInt(date.getMonth())+1){

select1.options[s2].selected=true;

break;

}

}

select.onchange();

for(var i in body.all){

if(body.all[i].innerText==date.getDate()){

body.all[i].style.backgroundColor="red";

}

}

target.onfocus=function(){

document.body.appendChild(a);

a.style.left=target.offsetLeft+"px";;

a.style.top=target.offsetTop+target.offsetHeight+"px";

}

target.onblur=function(){

if(a && window.event.clientY>a.offsetTop && window.event.clientY<a.offsetTop+a.offsetHeight && window.event.clientX>a.offsetLeft && window.event.clientX<a.offsetLeft+a.offsetWidth)

return;

if(!a) return;

a.parentNode.removeChild(a);

}

body.all[41].innerText="关闭";

body.all[41].onclick=function(){

this.style.backgroundColor="";

a.parentNode.removeChild(a);

}

}

}

入口参数是要绑定的html对象,这里一般是text input.

下面是调用代码:

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<script src="kongjian.js"></script>

<input type="text" id="a">

<script>

sx.activex.calender.bind(document.getElementById("a"));

</script>

</body>

</html>

     

     代码比较冗长,如果哪位同学有更好的办法,请昆明java培训中心多多交流啊,我们需要集思广益。

 


 

上一篇:js在子窗口ModalDialog中操作
下一篇:javascript仿qq界面的折叠菜单

昆明java培训教你实现JSP页面跳转简易方法,120天后月薪过万

昆明Java培训告诉你java和大数据和互联网发展中起什么作用

昆明java培训:初学者学Java Script 5个小技巧

昆明java培训多久可以学会?120天教你成为java开发大神!

选择城市和中心
贵州省

广西省

海南省

扫一扫

了解更多干货