纯JS实现简单的日历


Posted in Javascript onJune 26, 2017

本文实例为大家分享了纯JS实现日历的具体代码,供大家参考,具体内容如下

封装代码:

(function(cmf){
 cmf.showDcalendar=function(){
  var fnname=cmf.fn
  var id="cmfrili2"
  var yy=f23timeselecta1.value,mm=f23timeselecta2.value-1
  var newdara=new Date()
  var dd=newdara.getDate();
  var d=new Date(yy,mm,1),t
  if(mm==0){mm=12;yy--}
  var a,b,c,d2
  t='<table width=100% onselectstart="return false"><tr align=center>'
  var ds='<font color=#ff0000>日</font>,一,二,三,四,五,<font color="#009900">六</font>'.split(",")
  for(x=0;x<7;x++)t+='<td><b>'+ds[x]+'</b></td>'
  t+='</tr><tr>'
  //计算显示上个月有几号在日历上
  a=d.getDay()
  if(a==0)a=7
  r=[]
  var c2=0
  for(var x=0;x<a;x++)
  {
   d2=new Date(d-24*3600*1000*(a-x))
   r[r.length]="1"+d2.getDate()
   c2++
  }
  
 //计算显示这个月有几号在日历上
  mm++
  if(mm==13){mm=1;yy++}
  c=cmf.getMonthM(yy,mm)//计算哪年哪月 有多少天
  
  d=new Date(yy,mm,1)
  for(var x=1;x<=c;x++)r[r.length]="2"+x
 
  //计算显示下个月有几号在日历上
  c2+=c//r数组有多少个
  
  d2=new Date(yy,mm-1,c)
  
  a=d2.getDay()//这个月最后一天星期几
  
  a=7-a
  if(c2<36)a+=7
 
  for(var x=1;x<a;x++)
  {
   r[r.length]="3"+x
  }
  var yy1=yy.toString()
  var mm1=mm.toString()
  for(var x=0;x<r.length;x++)
  {
   
   if(x%7==0)t+='<tr align=center>'
   t+='<td height=25 onclick="'+fnname+'('+yy1+mm1+r[x].toString().substring(1)+',this)" onmouseover=this.bgColor="#33eeff" onmouseout=this.bgColor=""'
   if(r[x]=="2"+dd)t+=' style="border:1px solid #aa0000"'
   t+='>'
   var cl=""
   if(r[x].charAt(0)!=2)cl='999999'
   else if(x%7==0)cl='ff0000'
   else if(x%7==6)cl='009900'
   if(cl!="")t+='<font color="#'+cl+'">'
   t+=r[x].substring(1)
   if(cl!="")t+='</font>'
   t+='</td>'
   if(x%7==6)t+='</tr>'
   
  }
  t+='</table>'
  
  document.getElementById(id).innerHTML=t
 }
 
 cmf.getMonthM=function(y,m){//计算哪年哪月 有多少天 月份从1开始
  if(m==4 || m==6 || m==9 || m==11)return 30
  if(m==2)return (y%4==0 && y%100!=0)|| y%400==0?29:28
  return 31
 }
 cmf.showd=function(id,fn){
  cmf.fn=fn
  var g='<div id="cmfrili1"></div><div id="cmfrili2"></div>'
  var newdara=new Date()
  var yy=newdara.getFullYear();
  var mm=newdara.getMonth()+1;
  document.getElementById(id).innerHTML=g
  var s='border-width:1px;border-style:solid;border-color:#000000 #cccccc #cccccc #000000;width: 44px;'
  var t=''
  +'<table bgcolor="#ffffff" width=100% cellpadding=0 cellspacing=0><tr align=center><td height=44>'
  +cmf.timeselect_ms(1,'<input type=text value="'+yy+'" id="f23timeselecta1" onchange="cmf.showDcalendar()" style="width:44;text-align:center;'+s+'">年')
  +'</td><td>'
  +cmf.timeselect_ms(2,'<input type=text value="'+mm+'" id="f23timeselecta2" onchange="cmf.showDcalendar()" style="width:22;text-align:center;'+s+'">月')
  +'</td>'
  document.getElementById("cmfrili1").innerHTML=t
  cmf.showDcalendar()
  
 }
 cmf.timeselect_ms=function(n,m,n2)
 {
  var t='<table cellpadding=0 cellspacing=0 height=20><tr align=center>'
  t+='<td onmouseup="cmf.timeselect_up('+n+',2)" onselectstart="return false" style="font-size:16px;cursor:pointer;"><b>◄</b></td>'
  if(m!=null)t+='<td>'+m+'</td>'
  t+='<td onmouseup="cmf.timeselect_up('+n+',1)" onselectstart="return false" style="font-size:16px;cursor:pointer;"><b>►</b></td>'
  if(n2!=null)t+='<td>'+n2+'</td>'
  t+='</tr></table>'
  return t
 }
 
 cmf.timeselect_up=function(n,m){
  var o=document.getElementById("f23timeselecta"+n),c=o.value
  if(c=="")c=1
  if(n==1)//年
  {
   if(m==2){//减
    c--
   }else if(m==1){//加
    c++
   }
  }
  else
  {
   if(m==2){//减
    if(c<2) return
    c--
   }else if(m==1){//加
    if(c==12) return
    c++
   }
  }
  o.value=c
  if(m==1 || m==2)cmf.showDcalendar()
 }
})(window.cmf={})

使用:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>日历</title>
  <script src="Dcalendar.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  
 </head>
 <body>
  <div id="ri" style="width: 400px;">
   
  </div>
 </body>
 <script type="text/javascript">
  cmf.showd('ri','dianji')
  function dianji(d,ti){
   $("#ri td").css('border','')
   $(ti).css('border','1px solid #aa0000')
   alert(d)
  }
 </script>
</html>

使用代码中dianji()函数是用户点击某天弹出某天的日期;效果如下

纯JS实现简单的日历

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
javascript数组去重方法分析
Dec 15 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
vue2.0全局组件之pdf详解
Jun 26 #Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 #Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 #Javascript
JavaScript的六种继承方式(推荐)
Jun 26 #Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 #Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 #Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 #Javascript
You might like
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
动态表格Table类的实现
2009/08/26 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
基于Python的关键字监控及告警
2017/07/06 Python
详解Python中的四种队列
2018/05/21 Python
python递归全排列实现方法
2018/08/18 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
软件缺陷的分类都有哪些
2014/08/22 面试题
什么是GWT的Module
2013/01/20 面试题
毕业生就业自荐信
2013/12/04 职场文书
小学清明节活动方案
2014/03/08 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
地雷战观后感
2015/06/09 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android