纯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 相关文章推荐
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
JQuery学习总结【一】
Dec 01 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
RequireJS用法简单示例
Aug 20 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
重定向实现代码
2006/11/20 Javascript
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
药物学专业学生的自我评价
2013/10/27 职场文书
模具专业推荐信
2013/10/30 职场文书
七一表彰活动方案
2014/01/18 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
工地食品安全责任书
2015/05/09 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android