Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js简单日历
Blogger Information
Blog 16
fans 0
comment 1
visits 8488
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js简单日历
浅若夏沫
Original
473 people have browsed it
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Js日历</title>
  6. <style type="text/css">
  7.  .evrday{
  8.         width:14%;     
  9.          float:left;
  10.          color:li
  11.          }
  12.   #calendar{
  13.       background: rgb(231, 228, 228);
  14.       width:400px;
  15.       height: 300px;
  16.       margin:auto;
  18.   }
  19.  button{
  20.      width:25%;
  21.      height:40px;
  22.      float:left;
  23.  }
  24.  div{
  25.      margin-top:10px;
  26.      margin-bottom:5px;
  27.      text-align:center;
  28.  }
  29. #month{
  30. width:50%;
  31. float:left;
  32. }
  35. </style>
  36. </head>
  37. <body onLoad="showday()">
  38.  <div id="calendar">
  39.     <div>
  40.        <button onClick="shang()">上个月</button>
  41.          <div id="month"></div>
  42.        <button onClick="next()" id="nav">下个月</button>
  43.     </div>
  44.     <div>
  45.        <div class="evrday">周日</div>
  46.        <div class="evrday">周一</div>
  47.        <div class="evrday">周二</div>
  48.        <div class="evrday">周三</div>
  49.        <div class="evrday">周四</div>
  50.        <div class="evrday">周五</div>
  51.        <div class="evrday">周六</div>
  52.     </div>
  54.     <div id="day" style="color:black"></div>
  55.  </div>
  56.  <script>
  57.       var today=new Date();//获取当前时间
  58.       var year=today.getFullYear();//获取当前的年份
  59.       var month=today.getMonth()+1;//获取当前月
  60.       var day=today.getDate();//获取当前月天
  61.       var allday=0;
  62.       function showmonth(){
  63.           var year_month=year+"年"+month+"月";
  64.           document.getElementById("month").innerHTML=year_month;//显示当前的年月日
  65.       }
  67.       function count(){
  68.           if(month!=2)
  69.           {
  70.           if(month==4||month==6||month==9||month==11)//判断是否是相同天数的几个月，二月除外
  71.              allday=30;
  72.              else
  73.              allday=31;
  74.           }
  75.           else
  76.           {
  77.               if((year%4==0&&year%100!=0)||(year%400==0))//判断是否是闰年，进行相应的改变
  78.               allday=29;
  79.               else 
  80.               allday=28;}
  81.       }
  82.       //显示相应月份的天数
  83.       function showday(){      
  84.          showmonth()
  85.             count();
  86.           var fistdate=new Date(year,month-1,1);
  87.           var xinqi=fistdate.getDay();
  88.           var daterow=document.getElementById("day");
  89.           for(var i=0;i<xinqi;i++)//循环输出天数
  90.           {
  91.               var dayElement=document.createElement("div");
  92.                 dayElement.className="evrday";
  93.              daterow.appendChild(dayElement);
  94.           }
  96.           for(var j=1;j<=allday;j++)
  97.           {    
  98.               var dayElement=document.createElement("div");
  99.                dayElement.innerHTML=j;
  100.                 dayElement.className="evrday";
  101.                 if(j==day)//当前日，标红
  102.                  dayElement.style.color="red";
  103.                 daterow.appendChild(dayElement);
  104.           }
  105.       }
  106.        //点击下个月
  107.         function next(){
  108.            document.getElementById('day').innerHTML ="";
  109.           if(month<12){  
  111.             month=month+1;
  113.             }else{  
  114.                 month=1;
  115.                 year=year+1; 
  116.              }
  117.                 document.getElementById('div').innerHTML =showday();    
  118.         }
  119.         //点击上个月
  120.         function shang(){
  121.            document.getElementById('day').innerHTML ="";
  122.           if(month>1){
  124.             month=month-1;
  126.               }else{
  127.                  month=12;
  128.                  year=year-1; 
  129.              }
  130.                 document.getElementById('div').innerHTML =showday();    
  131.         }
  134.       </script>
  135. </body>
  136. </html>

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post