首页 > 代码库 > js 面向对象日历实现原理详解

js 面向对象日历实现原理详解

2024-07-31 19:40:19   221人阅读

对于前端开发来说，日历空间在网站里应用的很多，比如：填写表单时，是选取一下事件了--等等。下面就来分析一下怎么用js来写一个自己万年历。

在没有开始之前，我们是先弄明白是什么原理，要通过几个步骤来实现。

第一，我们的知道某一个月的某第一天是星期几。

第二，我们得知道某一个月有一共有几天，

只要有了这两部就可以循环出来了，下面看一下代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <script src="http://suiyidian.cn/texiao/tab/jquery-1.5.2.min.js" type="text/javascript"></script>
  6. <title>无标题文档</title>
  7. </head>
  8.  
  9. <body>
  10. <div class="rili">
  11. <div class="time_y_m_d" style="width: 100%; height: 35px; overflow: hidden; position:relative">
  12. <div class="time_date">2014/6</div>
  13. <div class="m_dowmn">下一月</div>
  14. <div class="m_up">上一月</div>
  15. </div>
  16. <ul class="rili_h"><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul>
  17. <ul class="rili_z"></ul>
  18. </div>
  19. <style>
  20. .time_y_m_d div.time_date {
  21. height: 35px;
  22. line-height: 35px;
  23. margin: 0 auto;
  24. text-align: center;
  25. width: 61px;
  26. }
  27. .time_y_m_d{ font-size:12px; background:#FFF}
  28. .time_y_m_d div{ height:35px; line-height:35px; text-align:center;width: 61px; top:0px; cursor:pointer}
  29. .m_dowmn{ position:absolute; right:0px}
  30. .m_up{ position:absolute; left:0px}
  31. .time_y_m_d{ border-left:1px solid #ccc;border-top:1px solid #ccc;}
  32. .rili .rili_h li{ background:#e6e6e6}
  33. .rili li{list-style:none; float:left; border-left:1px solid #ccc; width:49px; height:49px; text-align:center; line-height:49px;border-top:1px solid #ccc; font-size:12px}
  34. .rili{ width:350px; height:auto; overflow:hidden; border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
  35. .rili *,.rili{ padding:0px;margin:0}
  36. .rili{ margin:0px auto; background:#F5F5F5}
  37. </style>
  38.  
  39. <script>
  40. var calendar={
  41. nowMonth:null,
  42. nowYear:null,
  43. nowDate:null,
  44. getDates:function(M){//获取当前月有多少天
  45. var D=new Date();
  46. D.setMonth(M+1);
  47. D.setDate(0);
  48. return D.getDate()
  49. },
  50. getMonthOne:function(M){//获取当前月第一天是星期几
  51. var D=new Date();
  52. var D2=new Date(D.getFullYear(),M,1)
  53. return D2.getDay()
  54. },
  55. nowDate:function(){
  56. var D=new Date();
  57. calendar.nowMonth=D.getMonth();
  58. calendar.nowYear=D.getFullYear();
  59. calendar.nowDate=D.getDate();
  60. $(".time_date").html(calendar.nowYear+"年/"+(calendar.nowMonth+1))
  61. },
  62. downM:function(){
  63. if(calendar.nowMonth>=11){
  64. alert("已经是最后一月了")
  65. }else{
  66. calendar.nowMonth+=1;
  67. }
  68. $(".time_date").html(calendar.nowYear+"年/"+(calendar.nowMonth+1))
  69. calendar.initHtml();
  70. },
  71. upM:function(){
  72. if(calendar.nowMonth<=0){
  73. alert("已经是第一月了")
  74. }else{
  75. calendar.nowMonth-=1;
  76. }
  77. $(".time_date").html(calendar.nowYear+"年/"+(calendar.nowMonth+1))
  78. calendar.initHtml();
  79. },
  80. initHtml:function(){
  81. var Da=new Date();
  82. var dates=calendar.getDates(calendar.nowMonth)
  83. var day=calendar.getMonthOne(calendar.nowMonth)
  84. var zHtml="";
  85. var d=0;
  86. if(day!=0){
  87. for(p=0; p<day; p++){
  88. zHtml+="<li></li>"
  90. }
  91. }
  92. for(i=0; i<dates; i++)
  93. {
  94. if(Da.getMonth()==calendar.nowMonth){
  95. if(Da.getDate()==(i+1)){
  96. zHtml+="<li style=‘color:#fff‘>"+(i+1)+"</li>";
  97. }else{
  98. zHtml+="<li>"+(i+1)+"</li>";
  99. }
  100. }else{
  101. zHtml+="<li>"+(i+1)+"</li>";
  102. }
  104. }
  106. $(".rili_z").html(zHtml)
  107. var dL=$(".rili_z li").length;
  108. var zLeng=42
  109. if(dL!=zLeng){
  110. for(k=0; k<(zLeng-dL); k++){
  111. $(".rili_z").append("<li></li>")
  112. }
  113. }
  116. }
  117. }
  118. calendar.nowDate()
  119. calendar.initHtml()
  120. $(".m_dowmn").click(function(){ calendar.downM()})
  121. $(".m_up").click(function(){ calendar.upM()})
  122. </script>
  123.  
  124. </body>
  125. </html>

是不是看起来很简单呢，这里可以结合你别的知识做出各式各样的日历风格.

文章来源：js 面向对象日历实现原理详解

js 面向对象日历实现原理详解


联系
我们