原生js制作日歷控件實例分享
更新時間：2016年04月06日 15:32:54 作者：透筆度
這篇文章主要為大家詳細介紹了原生js制作日歷控件的具體代碼，一個日歷控件實例，原生js開發(fā)，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)一個簡單的日歷控件，供大家參考，具體內(nèi)容如下
效果圖：
具體代碼：
<!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(){
//創(chuàng)建日歷控件基本結構
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();
//動態(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);
};
//返回到今時今日
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);
//本月總日數(shù)
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++){//正常區(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號的周值
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();
};
//獲取本月總日數(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;
};
};
//月份轉化方法
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程序設計有所幫助。
相關文章
對于數(shù)據(jù)結構“樹”，想必大家都熟悉，本文，我們就再來回顧一下數(shù)據(jù)結構中的二叉樹與樹，并用JavaScript實現(xiàn)它們。下面就跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了JavaScript事件冒泡機制原理實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-01-01
無縫滾動效果在各大網(wǎng)站都有這樣的需求，應用非常廣泛，下面小編給大家分享基于JS實現(xiàn)無縫滾動思路及代碼，非常不錯具有參考借鑒價值，感興趣的朋友一起看下吧2016-06-06
這篇文章主要為大家詳細介紹了js canvas實現(xiàn)二維碼和圖片合成的海報，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
JavaScript設計模式之觀察者模式（發(fā)布者-訂閱者模式）
這篇文章主要介紹了JavaScript設計模式之觀察者模式（發(fā)布者-訂閱者模式）,本文詳細的講解了JavaScript中的觀察者模式,需要的朋友可以參考下2014-09-09
javascript省市區(qū)三級聯(lián)動下拉框菜單實例演示
這篇文章主要為大家詳細介紹了javascript實現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單很詳細的代碼，解決了大家實現(xiàn)javascript省市區(qū)三級聯(lián)動下拉框菜單的問題，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要給大家介紹了關于微信小程序如何實現(xiàn)全局重新加載的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用微信小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
js實現(xiàn)input框文字動態(tài)變換顯示效果
這篇文章主要介紹了js實現(xiàn)input框文字動態(tài)變換顯示效果,涉及javascript隨機字符串與中文的動態(tài)切換顯示效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
Js動態(tài)設置rem來實現(xiàn)移動端字體的自適應代碼
這篇文章主要介紹了Js動態(tài)設置rem來實現(xiàn)移動端字體的自適應代碼，代碼簡單易懂非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-10-10
本文給大家收藏整理了ES6 Class 中的 super 關鍵字，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-10-10