原生js制作日歷控件實(shí)例分享

當(dāng)前位置：首頁(yè) > 范文|應(yīng)用文 > IT技術(shù)專(zhuān)欄 > 網(wǎng)絡(luò)編程

原生js制作日歷控件實(shí)例分享

來(lái)源：易賢網(wǎng) 閱讀：1716 次日期：2016-07-08 14:50:06

溫馨提示：易賢網(wǎng)小編為您整理了“原生js制作日歷控件實(shí)例分享”,方便廣大網(wǎng)友查閱！

本文實(shí)例為大家分享了js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的日歷控件，供大家參考，具體內(nèi)容如下

效果圖：

具體代碼：

<!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(){

//創(chuàng)建日歷控件基本結(jié)構(gòu)

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">當(dāng)前時(shí)間</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===============================

//默認(rèn)時(shí)間對(duì)象

var dateObj = new Date();

//動(dòng)態(tài)控制

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);

};

//返回到今時(shí)今日

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號(hào)的周值

var oneweek=oneyearoneday(dateObj);

//本月總?cè)諗?shù)

var alld=alldays(dateObj);

//當(dāng)前是幾

var nowd=nowday(dateObj);

//初始化顯示本月信息

init(oneweek,alld,nowd);

//===================function===============================

//有無(wú)指定類(lèi)名的判斷

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++){//正常區(qū)域

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號(hào)的周值

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();

};

//當(dāng)前是幾

function nowday(dateObj){

return dateObj.getDate();

};

//獲取本月總?cè)諗?shù)方法

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:

};

//閏年判斷函數(shù)

function isLeapYear(year){

if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){

return true;

}else{

return false;

};

//月份轉(zhuǎn)化方法

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>

希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

更多信息請(qǐng)查看網(wǎng)絡(luò)編程

上一篇：基于javascript bootstrap實(shí)現(xiàn)生日日期聯(lián)動(dòng)選擇

下一篇：基于HTML模板和JSON數(shù)據(jù)的JavaScript交互(移動(dòng)端)

易賢網(wǎng)手機(jī)網(wǎng)站地址：原生js制作日歷控件實(shí)例分享

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢(xún)回復(fù)僅供參考，敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢(xún)?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)絡(luò)編程

Shell中如何刪除文本比較長(zhǎng)的行的實(shí)現(xiàn)方法10月30日

vue.js語(yǔ)法及常用指令10月30日

python 讀寫(xiě)中文json的實(shí)例詳解10月30日

Objective-C Json 實(shí)例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計(jì)實(shí)現(xiàn)方法10月30日

python生成二維碼的實(shí)例詳解10月30日

Python批量更改文件名的實(shí)現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問(wèn)題10月30日

jQuery實(shí)現(xiàn)切換隱藏與顯示同時(shí)切換圖標(biāo)功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實(shí)例代碼10月30日

vue.js todolist實(shí)現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實(shí)例代碼10月30日

apache 開(kāi)啟重定向 rewrite的實(shí)現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開(kāi)發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點(diǎn)安裝教程10月23日

易賢網(wǎng)移動(dòng)網(wǎng)站

2026上岸·考公考編培訓(xùn)報(bào)班

報(bào)班類(lèi)型
姓名
手機(jī)號(hào)
驗(yàn)證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合