欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

js简单日历

程序员文章站 2023-12-21 17:34:16
...
    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8">
    5. 

  5. <title>Js日历</title>
    6. 

  6. <style type="text/css">
    7. 

  7.  .evrday{
    8. 

  8.         width:14%;     
    9. 

  9.          float:left;
    10. 

  10.          color:li
    11. 

  11.          }
    12. 

  12.   #calendar{
    13. 

  13.       background: rgb(231, 228, 228);
    14. 

  14.       width:400px;
    15. 

  15.       height: 300px;
    16. 

  16.       margin:auto;
    17. 

    18. 

  18.   }
    19. 

  19.  button{
    20. 

  20.      width:25%;
    21. 

  21.      height:40px;
    22. 

  22.      float:left;
    23. 

  23.  }
    24. 

  24.  div{
    25. 

  25.      margin-top:10px;
    26. 

  26.      margin-bottom:5px;
    27. 

  27.      text-align:center;
    28. 

  28.  }
    29. 

  29. #month{
    30. 

  30. width:50%;
    31. 

  31. float:left;
    32. 

  32. }
    33. 

    34. 

    35. 

  35. </style>
    36. 

  36. </head>
    37. 

  37. <body onLoad="showday()">
    38. 

  38.  <div id="calendar">
    39. 

  39.     <div>
    40. 

  40.        <button onClick="shang()">上个月</button>
    41. 

  41.          <div id="month"></div>
    42. 

  42.        <button onClick="next()" id="nav">下个月</button>
    43. 

  43.     </div>
    44. 

  44.     <div>
    45. 

  45.        <div class="evrday">周日</div>
    46. 

  46.        <div class="evrday">周一</div>
    47. 

  47.        <div class="evrday">周二</div>
    48. 

  48.        <div class="evrday">周三</div>
    49. 

  49.        <div class="evrday">周四</div>
    50. 

  50.        <div class="evrday">周五</div>
    51. 

  51.        <div class="evrday">周六</div>
    52. 

  52.     </div>
    53. 

    54. 

  54.     <div id="day" style="color:black"></div>
    55. 

  55.  </div>
    56. 

  56.  <script>
    57. 

  57.       var today=new Date();//获取当前时间
    58. 

  58.       var year=today.getFullYear();//获取当前的年份
    59. 

  59.       var month=today.getMonth()+1;//获取当前月
    60. 

  60.       var day=today.getDate();//获取当前月天
    61. 

  61.       var allday=0;
    62. 

  62.       function showmonth(){
    63. 

  63.           var year_month=year+"年"+month+"月";
    64. 

  64.           document.getElementById("month").innerHTML=year_month;//显示当前的年月日
    65. 

  65.       }
    66. 

    67. 

  67.       function count(){
    68. 

  68.           if(month!=2)
    69. 

  69.           {
    70. 

  70.           if(month==4||month==6||month==9||month==11)//判断是否是相同天数的几个月，二月除外
    71. 

  71.              allday=30;
    72. 

  72.              else
    73. 

  73.              allday=31;
    74. 

  74.           }
    75. 

  75.           else
    76. 

  76.           {
    77. 

  77.               if((year%4==0&&year%100!=0)||(year%400==0))//判断是否是闰年，进行相应的改变
    78. 

  78.               allday=29;
    79. 

  79.               else 
    80. 

  80.               allday=28;}
    81. 

  81.       }
    82. 

  82.       //显示相应月份的天数
    83. 

  83.       function showday(){      
    84. 

  84.          showmonth()
    85. 

  85.             count();
    86. 

  86.           var fistdate=new Date(year,month-1,1);
    87. 

  87.           var xinqi=fistdate.getDay();
    88. 

  88.           var daterow=document.getElementById("day");
    89. 

  89.           for(var i=0;i<xinqi;i++)//循环输出天数
    90. 

  90.           {
    91. 

  91.               var dayElement=document.createElement("div");
    92. 

  92.                 dayElement.className="evrday";
    93. 

  93.              daterow.appendChild(dayElement);
    94. 

  94.           }
    95. 

    96. 

  96.           for(var j=1;j<=allday;j++)
    97. 

  97.           {    
    98. 

  98.               var dayElement=document.createElement("div");
    99. 

  99.                dayElement.innerHTML=j;
    100. 

  100.                 dayElement.className="evrday";
    101. 

  101.                 if(j==day)//当前日，标红
    102. 

  102.                  dayElement.style.color="red";
    103. 

  103.                 daterow.appendChild(dayElement);
    104. 

  104.           }
    105. 

  105.       }
    106. 

  106.        //点击下个月
    107. 

  107.         function next(){
    108. 

  108.            document.getElementById('day').innerHTML ="";
    109. 

  109.           if(month<12){  
    110. 

    111. 

  111.             month=month+1;
    112. 

    113. 

  113.             }else{  
    114. 

  114.                 month=1;
    115. 

  115.                 year=year+1; 
    116. 

  116.              }
    117. 

  117.                 document.getElementById('div').innerHTML =showday();    
    118. 

  118.         }
    119. 

  119.         //点击上个月
    120. 

  120.         function shang(){
    121. 

  121.            document.getElementById('day').innerHTML ="";
    122. 

  122.           if(month>1){
    123. 

    124. 

  124.             month=month-1;
    125. 

    126. 

  126.               }else{
    127. 

  127.                  month=12;
    128. 

  128.                  year=year-1; 
    129. 

  129.              }
    130. 

  130.                 document.getElementById('div').innerHTML =showday();    
    131. 

  131.         }
    132. 

    133. 

    134. 

  134.       </script>
    135. 

  135. </body>
    136. 

  136. </html>
    137.

js简单日历

上一篇：

下一篇：

推荐阅读