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

对于前端开发来说，日历空间在网站里应用的很多，比如：填写表单时，是选取一下事件了--等等。下面就来分析一下怎么用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. <body>
  9. <div class="rili">
  10. <div class="time_y_m_d" style="width: 100%; height: 35px; overflow: hidden; position:relative">
  11. <div class="time_date">2014/6</div>
  12. <div class="m_dowmn">下一月</div>
  13. <div class="m_up">上一月</div>
  14. </div>
  15. <ul class="rili_h"><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul>
  16. <ul class="rili_z"></ul>
  17. </div>
  18. <style>
  19. .time_y_m_d div.time_date {
  20. height: 35px;
  21. line-height: 35px;
  22. margin: 0 auto;
  23. text-align: center;
  24. width: 61px;
  25. }
  26. .time_y_m_d{ font-size:12px; background:#FFF}
  27. .time_y_m_d div{ height:35px; line-height:35px; text-align:center;width: 61px; top:0px; cursor:pointer}
  28. .m_dowmn{ position:absolute; right:0px}
  29. .m_up{ position:absolute; left:0px}
  30. .time_y_m_d{ border-left:1px solid #ccc;border-top:1px solid #ccc;}
  31. .rili .rili_h li{ background:#e6e6e6}
  32. .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}
  33. .rili{ width:350px; height:auto; overflow:hidden; border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
  34. .rili *,.rili{ padding:0px;margin:0}
  35. .rili{ margin:0px auto; background:#F5F5F5}
  36. </style>
  37. <script>
  38. var calendar={
  39. nowMonth:null,
  40. nowYear:null,
  41. nowDate:null,
  42. getDates:function(M){//获取当前月有多少天
  43. var D=new Date();
  44. D.setMonth(M+1);
  45. D.setDate(0);
  46. return D.getDate()
  47. },
  48. getMonthOne:function(M){//获取当前月第一天是星期几
  49. var D=new Date();
  50. var D2=new Date(D.getFullYear(),M,1)
  51. return D2.getDay()
  52. },
  53. nowDate:function(){
  54. var D=new Date();
  55. calendar.nowMonth=D.getMonth();
  56. calendar.nowYear=D.getFullYear();
  57. calendar.nowDate=D.getDate();
  58. $(".time_date").html(calendar.nowYear+"年/"+(calendar.nowMonth+1))
  59. },
  60. downM:function(){
  61. if(calendar.nowMonth>=11){
  62. alert("已经是最后一月了")
  63. }else{
  64. calendar.nowMonth+=1;
  65. }
  66. $(".time_date").html(calendar.nowYear+"年/"+(calendar.nowMonth+1))
  67. calendar.initHtml();
  68. },
  69. upM:function(){
  70. if(calendar.nowMonth<=0){
  71. alert("已经是第一月了")
  72. }else{
  73. calendar.nowMonth-=1;
  74. }
  75. $(".time_date").html(calendar.nowYear+"年/"+(calendar.nowMonth+1))
  76. calendar.initHtml();
  77. },
  78. initHtml:function(){
  79. var Da=new Date();
  80. var dates=calendar.getDates(calendar.nowMonth)
  81. var day=calendar.getMonthOne(calendar.nowMonth)
  82. var zHtml="";
  83. var d=0;
  84. if(day!=0){
  85. for(p=0; p<day; p++){
  86. zHtml+="<li></li>"
  87. }
  88. }
  89. for(i=0; i<dates; i++)
  90. {
  91. if(Da.getMonth()==calendar.nowMonth){
  92. if(Da.getDate()==(i+1)){
  93. zHtml+="<li style=‘color:#fff‘>"+(i+1)+"</li>";
  94. }else{
  95. zHtml+="<li>"+(i+1)+"</li>";
  96. }
  97. }else{
  98. zHtml+="<li>"+(i+1)+"</li>";
  99. }
  100. }
  101. $(".rili_z").html(zHtml)
  102. var dL=$(".rili_z li").length;
  103. var zLeng=42
  104. if(dL!=zLeng){
  105. for(k=0; k<(zLeng-dL); k++){
  106. $(".rili_z").append("<li></li>")
  107. }
  108. }
  109. }
  110. }
  111. calendar.nowDate()
  112. calendar.initHtml()
  113. $(".m_dowmn").click(function(){ calendar.downM()})
  114. $(".m_up").click(function(){ calendar.upM()})
  115. </script>
  116. </body>
  117. </html>

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

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

时间： 2024-08-24 20:31:18

js 面向对象日历实现原理详解的相关文章

[转]js中几种实用的跨域方法原理详解

转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 一.通过jsonp跨域 在js中,我们直接用XMLHttpRequ

js中几种实用的跨域方法原理详解(转)

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 一.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同

js对象浅拷贝和深拷贝详解

js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文为大家分享了JavaScript对象的浅拷贝和深拷贝代码,供大家参考,具体内容如下 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var

JSPatch实现原理详解&lt;二&gt;

本文转载至 http://blog.cnbang.net/tech/2855/ 距离上次写的<JSPatch实现原理详解>有一个月的时间,在这段时间里 JSPatch 在不断地完善和改进,代码已经有很多变化,有一些修改值得写一下,作为上一篇的补充. Special Struct 先说下 _objc_msgForward,在上一篇提到为了让替换的方法走 forwardInvocation,把它指向一个不存在的 IMP: class_getMethodImplementation(cls, @se

AES 加密算法的原理详解

AES 加密算法的原理详解 本教程摘选自 https://blog.csdn.net/qq_28205153/article/details/55798628 的原理部分. AES简介 高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法(微信小程序加密传输就是用这个加密算法的).对称加密算法也就是加密和解密用相同的密钥,具体的加密流程如下图: 下面简单介绍下各个部分的作用与意义: 明文P 没有经过加密的数据. 密钥K 用来加密明文的密码,在对称

图像处理中的数学原理详解17——卷积定理及其证明

欢迎关注我的博客专栏"图像处理中的数学原理详解" 全文目录请见 图像处理中的数学原理详解(总纲) http://blog.csdn.net/baimafujinji/article/details/48467225 图像处理中的数学原理详解(已发布的部分链接整理) http://blog.csdn.net/baimafujinji/article/details/48751037 1.4.5   卷积定理及其证明 卷积定理是傅立叶变换满足的一个重要性质.卷积定理指出,函数卷积的傅立叶变

js的offsetParent属性用法详解

js的offsetParent属性用法详解:此属性是javascript中较为常用的属性,对于它的良好掌握也是非常有必要的,下面就通过代码实例介绍一下它的用法,希望能够给需要的朋友带来一定的帮助.一.基本介绍:此属性可以返回距离指定元素最近的采用定位(position属性值为fixed.relative或者absolute)父级元素,如果父级元素中没有采用定位的元素,则返回body对象的引用.语法结构: obj.offsetParent 二.代码实例: <!DOCTYPE html> <

Java虚拟机工作原理详解

原文地址:http://blog.csdn.net/bingduanlbd/article/details/8363734 一.类加载器 首先来看一下java程序的执行过程. 从这个框图很容易大体上了解java程序工作原理.首先,你写好java代码,保存到硬盘当中.然后你在命令行中输入 [java] view plaincopy javac YourClassName.java 此时,你的java代码就被编译成字节码(.class).如果你是在Eclipse IDE或者其他开发工具中,你保存代码

kickstart安装系统原理详解

前言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装. 常规的办法有什么? 光盘安装系统===>一个服务器DVD内置光驱百千块,百台服务器都配光驱就浪费了,因为一台服务器也就开始装系统能用的上,以后用的机会屈指可数.用USB外置光驱,插来插去也醉了. U盘安装系统===>还是同样的问题,要一台一台服务器插U盘. 网络安装系统(ftp,http,nfs) ===>这个方法不错,只要服务器能联网就可以装系统了