ネイティブの js_javascript スキルを使用してカレンダーコントロールを作成する例を共有する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

ネイティブの js_javascript スキルを使用してカレンダーコントロールを作成する例を共有する

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:06 PM

この記事の例では、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 プログラミングを学習するすべての人に役立つことを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7463

CakePHP チュートリアル

1376

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？ Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

jQueryのパフォーマンスを即座に増やす10の方法 Mar 11, 2025 am 12:15 AM

この記事では、スクリプトのパフォーマンスを大幅に向上させるための10の簡単な手順の概要を説明します。これらの手法は簡単で、すべてのスキルレベルに適用できます。更新の維持：NPMのようなパッケージマネージャーを使用して、Viteなどのバンドラーを使用して確認してください

後遺症とMySQLを使用したパスポートを使用します Mar 11, 2025 am 11:04 AM

Sequelizeは、約束ベースのnode.js ormです。 PostgreSQL、MySQL、MariadB、SQLite、およびMSSQLで使用できます。このチュートリアルでは、Webアプリのユーザー向けに認証を実装します。また、人気のある認証ミドルであるPassportを使用します

シンプルなjQueryスライダーを構築する方法 Mar 11, 2025 am 12:19 AM

この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています！画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます

See all articles

ネイティブの js_javascript スキルを使用してカレンダーコントロールを作成する例を共有する

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

ネイティブの js_javascript スキルを使用してカレンダー コントロールを作成する例を共有する

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

ネイティブの js_javascript スキルを使用してカレンダーコントロールを作成する例を共有する