jQuery_jquery를 사용하여 달력을 구현하는 간단한 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jQuery_jquery를 사용하여 달력을 구현하는 간단한 방법

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:01 PM

jquery

이 기사의 예에서는 jQuery를 사용하여 달력을 간단하게 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

원리는 꽤 간단합니다. 먼저 한 달이 몇 일인지 계산하고, 그 달의 첫날이 되는 요일을 계산하고, 순서대로 정리하면 됩니다.

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<meta name="format-detection" content="telephone=no" />
<title>tryMyOwnCalendar</title>
<script src="js/jquery.min.js" language="javascript"></script>
<style>
*{ margin:0; padding:0;}
.choosecal{ width:96%; margin:3% auto; overflow:hidden;}
.ccaltop{ width:100%; border-radius:5px; }
.caltline1,.caltline2{ width:94%; background-color:#F90; overflow:hidden; padding:2% 3%;}
.caltline1 p,.caltline2 p{ float:left; width:10%; font-weight:700; text-align:right;}
.caltline1 .bookdate{ width:90%; text-align:left;}
.caltline2{ background-color:#FFF; display:none;}
.caltline2 p{ width:20%;}
.caltline2 .datetext{ width:35%; border:1px solid #000; 
background-color:#FFF; font-weight:700;}
.inputdate{ color:#F60;}
.calender{ width:100%; margin-top:3%; overflow:hidden; display:none;}
.selectmouth{ background-color:#F30; width:94%; 
overflow:hidden;padding:2% 3%;border-radius:5px 5px 0 0;}
.selectmouth p{ float:left; width:33%; color:#FFF;
font-weight:700; cursor:pointer;}
.selectmouth .selectdate{ width:100%; background-color:#F30; 
border:none; color:#FFF; font-weight:700; text-align:center;} 
.data_table{ width:100%;border:1px solid #cccccc;
border-collapse:collapse; }
.data_table thead{ background-color:#333;}
.data_table thead td{ color:#FFF; text-align:center;
border:1px solid #333;border-collapse:collapse; padding:1% 0;
}
.data_table tbody td{border:1px solid #cccccc;
border-collapse:collapse;
text-align:center;color:#0C6;padding:1% 0;
}
.data_table tbody td.orderdate{ color:#000;}
.data_table tbody td.tdselect{ color:#fff;background-color:#999}
</style>
</head>
<body>
 <div class="choosecal">
 <div class="ccaltop">
  <div class="caltline1">
  <p class="bookdate">选择入住日期……</p>
  <p><img src="images/next.png" /></p>
  </div>
  <div class="caltline2">
  <p style=" width:80%; text-align:left;">
   <input type="text" value=""
 class="datetext datetoday inputdate" readonly=readonly />
   至
   <input type="text" value="" class="datetext dateendday"
 readonly=readonly />
  </p>
  <p><input type="button" value="确定" class="btsure" /></p>
  </div>
 </div>
 <div class="calender">
  <div class="selectmouth">
  <p style="text-align:right" class="lastmonth"><</p>
  <p><input type="text" class="selectdate" value="2014年2月" readonly=readonly /></p>
  <p class="nextmonth">></p>
  </div>
  <table class="data_table" cellspacing="0px">
  <thead>
   <tr>
   <td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>
   </tr>
  </thead>
  <tbody>
   <tr>
   <td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
   </tr>
   <tr>
   <td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
   </tr>
   <tr>
   <td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
   </tr>
   <tr>
   <td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
   </tr>
   <tr>
   <td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
   </tr>
   <tr>
   <td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
   </tr>
   </tbody>
  </table>
 </div>
 </div>
 <script>
 window.onload=function(){
 var mydate=new Date();
 var thisyear=mydate.getFullYear();
 var thismonth=mydate.getMonth()+1;
 var thisday=mydate.getDate();
 var mydate1=new Date();
 var thisyear1=mydate1.getFullYear();
 var thismonth1=mydate1.getMonth()+1;
 var thisday1=mydate1.getDate();
 var selectday=thisday; 
 //标记日期
 var indate=thisday; 
 //入住日期
 var inmonth=thismonth; 
 //入住月份
 var outdate=thisday+1; 
 //退房日期
 var outmonth=thismonth; 
 //退房月份
 var datetxt="datetoday";  
 var datefirst;
 var datesecond;
 function initdata(){ 
 //日期初始填充
 var tdheight=jQuery(".data_table tbody tr").eq(0).find("td").height();
 jQuery(".data_table tbody td").css("height",tdheight);
 jQuery(".selectdate").val(thisyear+"年"+thismonth+"月");
 var days=getdaysinonemonth(thisyear,thismonth);
 var weekday=getfirstday(thisyear,thismonth);
 setcalender(days,weekday); 
 markdate(thisyear,thismonth,selectday);
 orderabledate(thisyear,thismonth,thisday);
 }
 initdata();
 jQuery(".datetoday").val(thisyear+"-"+thismonth+"-"+thisday);
 jQuery(".dateendday").val(thisyear+"-"+thismonth+"-"+(thisday+1));
 function orderabledate(thisyear,thismonth,thisday){   
 //能预订的日期
 if(thisyear<thisyear1){
 jQuery(".data_table tbody td").addClass("orderdate");
 jQuery(".data_table tbody td").removeClass("usedate");
 }else if(thisyear==thisyear1){
 if(thismonth<thismonth1){
 jQuery(".data_table tbody td").addClass("orderdate");
 jQuery(".data_table tbody td").removeClass("usedate");
 }else if(thismonth==thismonth1){
 for(var j=0;j<6;j++){
 for(var i=0;i<7;i++){
 var tdhtml=jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html();
 if(tdhtml<thisday){
  jQuery(".data_table tbody tr").eq(j).find("td").eq(i).addClass("orderdate");
  jQuery(".data_table tbody tr").eq(j).find("td").eq(i).removeClass("usedate");
 }else{
  jQuery(".data_table tbody tr").eq(j).find("td").eq(i).removeClass("orderdate");
 }
 }
 }
 }else{
 jQuery(".data_table tbody td").removeClass("orderdate");
 }
 }else{
 jQuery(".data_table tbody td").removeClass("orderdate");
 }
 }
 function markdate(thisyear,thismonth,thisday){   
 //标记日期
 var datetxt=thisyear+"年"+thismonth+"月";
 var thisdatetxt=thisyear1+"年"+thismonth1+"月";
 jQuery(".data_table td").removeClass("tdselect");
 if(datetxt==thisdatetxt){
 for(var j=0;j<6;j++){
 for(var i=0;i<7;i++){
 var tdhtml=jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html();
 if(tdhtml==thisday){
 jQuery(".data_table tbody tr").eq(j).find("td").eq(i).addClass("tdselect");
 }
 }
 }
 }
 }
 function getdaysinonemonth(year,month){ 
 //算某个月的总天数
 month=parseInt(month,10);
 var d=new Date(year,month,0);
 return d.getDate();
 }
 function getfirstday(year,month){ 
 //算某个月的第一天是星期几
 month=month-1;
 var d=new Date(year,month,1);
 return d.getDay();
 }
 function setcalender(days,weekday){ 
 //往日历中填入日期
 var a=1;
 for(var j=0;j<6;j++){
 for(var i=0;i<7;i++){
 if(j==0&&i<weekday){
 jQuery(".data_table tbody tr").eq(0).find("td").eq(i).html("");
 jQuery(".data_table tbody tr").eq(0).find("td").eq(i).removeClass("usedate");
 }else{
 if(a<=days){
 jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html(a);
 jQuery(".data_table tbody tr").eq(j).find("td").eq(i).addClass("usedate");
 a++;
 }else{
 jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html("");
 jQuery(".data_table tbody tr").eq(j).find("td").eq(i).removeClass("usedate");
 a=days+1;
 }
 }
 }
 }
 }
 function errorreset(){ 
 //日期报错后，数据重置
 thisyear=thisyear1;
 thismonth=thismonth1;
 thisday=thisday1;
 selectday=thisday1;
 indate=thisday1;
 inmonth=thismonth1;
 outdate=thisday1+1;
 outmonth=thismonth1;
 initdata();
 }
 jQuery(".data_table tbody td.usedate").live("click",function(){ //点击日期的效果
 var thishtml=parseInt(jQuery(this).html());
 jQuery(".data_table td").removeClass("tdselect");
 jQuery(this).addClass("tdselect");
 selectday=thishtml;
 if(datetxt=="datetoday"){
 jQuery(".datetoday").val(thisyear+"-"+thismonth+"-"+selectday);
 indate=selectday;
 inmonth=thismonth;
 }else{
 jQuery(".dateendday").val(thisyear+"-"+thismonth+"-"+selectday);
 outdate=selectday;
 outmonth=thismonth;
 if(outmonth<inmonth){
 alert("日期填写错误");
 jQuery(".datetoday").val(thisyear1+"-"+thismonth1+"-"+thisday1);
 jQuery(".dateendday").val(thisyear1+"-"+thismonth1+"-"+(thisday1+1));
 errorreset();
 }else if(outmonth==inmonth){
 if(outdate<=indate){
 alert("日期填写错误");
 jQuery(".datetoday").val(thisyear1+"-"+thismonth1+"-"+thisday1);
 jQuery(".dateendday").val(thisyear1+"-"+thismonth1+"-"+(thisday1+1));
 errorreset();
 }
 }
 }
 });
 jQuery(".datetoday").click(function(){ 
 //选择入住日期
 datetxt="datetoday";
 jQuery(".datetext").removeClass("inputdate");
 jQuery(this).addClass("inputdate");
 });
 jQuery(".dateendday").click(function(){ 
 //选择退房日期
 datetxt="dateendday";
 jQuery(".datetext").removeClass("inputdate");
 jQuery(this).addClass("inputdate");
 });
 jQuery(".lastmonth").click(function(){ 
 //上一个月
 thismonth--;
 if(thismonth==0){
 thismonth=12;
 thisyear--;
 }
 initdata();
 });
 jQuery(".nextmonth").click(function(){ 
 //上一个月
 thismonth++;
 if(thismonth==13){
 thismonth=1;
 thisyear++;
 }
 initdata();
 });
 jQuery(".btsure").click(function(){ 
 //确定日期
 var start = new Date($(".datetoday").val()); 
 var end = new Date($(".dateendday").val()); 
 var diff = parseInt((end - start) / (1000*3600*24)); 
 jQuery(".bookdate").html(inmonth+"月"+indate+"日至"+outmonth+"月"+outdate+"日("+diff+")晚")
 });
 jQuery(".caltline1").toggle(
 function(){
 jQuery(".caltline2").slideDown(500);
 jQuery(".calender").fadeIn(500);
 errorreset();
 jQuery(".caltline1").find("img").attr("src","images/iconpointup.png");
 },
 function(){
 jQuery(".caltline2").slideUp(500);
 jQuery(".calender").fadeOut(500);
 jQuery(".caltline1").find("img").attr("src","images/iconpoint.png");
 }
 );
 }
</script>
</body>
</html>

로그인 후 복사

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7441

Cakephp 튜토리얼

1371

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드 Feb 27, 2024 pm 06:45 PM

jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드 jQuery는 웹 사이트 개발에 널리 사용되는 JavaScript 라이브러리로, JavaScript 프로그래밍을 단순화하고 개발자에게 풍부한 기능을 제공합니다. 이 기사에서는 jQuery의 참조 방법을 자세히 소개하고 독자가 빠르게 시작할 수 있도록 구체적인 코드 예제를 제공합니다. jQuery 소개 먼저 HTML 파일에 jQuery 라이브러리를 도입해야 합니다. CDN 링크를 통해 소개하거나 다운로드할 수 있습니다.

jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까? Feb 28, 2024 am 08:39 AM

jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까? 프런트엔드 개발에서는 요소의 높이 속성을 조작해야 하는 경우가 종종 있습니다. 때로는 요소의 높이를 동적으로 변경해야 할 수도 있고 요소의 높이 속성을 제거해야 하는 경우도 있습니다. 이 기사에서는 jQuery를 사용하여 요소의 높이 속성을 제거하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. jQuery를 사용하여 높이 속성을 연산하기 전에 먼저 CSS의 높이 속성을 이해해야 합니다. height 속성은 요소의 높이를 설정하는 데 사용됩니다.

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? Feb 28, 2024 pm 03:12 PM

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청을 보내는 방법은 다른 유형의 요청을 보내는 것과 유사하지만 몇 가지 세부 사항과 매개 변수 설정에 주의해야 합니다. PUT 요청은 일반적으로 데이터베이스의 데이터 업데이트 또는 서버의 파일 업데이트와 같은 리소스를 업데이트하는 데 사용됩니다. 다음은 jQuery에서 PUT 요청 메소드를 사용하는 구체적인 코드 예제입니다. 먼저 jQuery 라이브러리 파일을 포함했는지 확인한 다음 $.ajax({u를 통해 PUT 요청을 보낼 수 있습니다.

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. Feb 28, 2024 pm 09:06 PM

제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. &lt

심층 분석: jQuery의 장점과 단점 Feb 27, 2024 pm 05:18 PM

jQuery는 프런트엔드 개발에 널리 사용되는 빠르고, 작고, 기능이 풍부한 JavaScript 라이브러리입니다. 2006년 출시 이후 jQuery는 많은 개발자가 선택하는 도구 중 하나가 되었지만 실제 애플리케이션에서는 몇 가지 장점과 단점도 있습니다. 이 기사에서는 jQuery의 장점과 단점을 심층적으로 분석하고 구체적인 코드 예제를 통해 설명합니다. 장점: 1. 간결한 구문 jQuery의 구문 디자인은 간결하고 명확하여 코드의 가독성과 쓰기 효율성을 크게 향상시킬 수 있습니다. 예를 들어,

jQuery를 사용하여 모든 태그의 텍스트 내용 수정 Feb 28, 2024 pm 05:42 PM

제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.

jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? Feb 29, 2024 am 09:03 AM

jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? jQuery를 사용하여 DOM 요소를 조작할 때 요소에 특정 속성이 있는지 확인해야 하는 상황이 자주 발생합니다. 이 경우 jQuery에서 제공하는 메소드를 사용하여 이 기능을 쉽게 구현할 수 있습니다. 다음은 jQuery 요소에 특정 속성이 있는지 확인하기 위해 일반적으로 사용되는 두 가지 방법을 특정 코드 예제와 함께 소개합니다. 방법 1: attr() 메서드와 typeof 연산자를 // 사용하여 요소에 특정 속성이 있는지 확인

jQuery에서 eq의 역할 및 적용 시나리오 이해 Feb 28, 2024 pm 01:15 PM

jQuery는 웹 페이지에서 DOM 조작 및 이벤트 처리를 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에서 요소를 선택하는 데 사용됩니다. 구체적인 사용 및 적용 시나리오는 다음과 같습니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에 있는 요소를 선택합니다. 인덱스 위치는 0부터 계산되기 시작합니다. 즉, 첫 번째 요소의 인덱스는 0이고 두 번째 요소의 인덱스는 1입니다. eq() 메소드의 구문은 다음과 같습니다: $("s

See all articles

jQuery_jquery를 사용하여 달력을 구현하는 간단한 방법

핫 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 버전

뜨거운 주제