原生js实现日历效果


Posted in Javascript onMarch 02, 2020

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

html代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>日历插件</title>
 <link rel="stylesheet" href="./css/reset.css" >
 <link rel="stylesheet" href="./css/index.css" >
</head>
<body>
 <div class="show">
 <button id="pre">上月</button>
 <span id="showtime">2019-01</span>
 <button id="next">下月</button>
 </div>
 <div class="box" id="box">
 </div>
</body>
<script>
 // 获取本月第一天
 function getMonthDay(date){
 date=new Date(date.valueOf())
 date.setDate(1);
 return date
 }
 // 获取本月最后一天
 function getMonthLastDay(date){
 date=new Date(date.valueOf())
 date.setMonth(date.getMonth()+1);
 date.setDate(0);
 return date
 }
 //获取本月的时间对象集合
 function getMonth(date){
 var arr=[]
 // 获取本月第一天
 var _date=getMonthDay(date)
 // // 获取本月最后一天
 var dataLast=getMonthLastDay(date).getDate()
 arr.push(new Date(_date.valueOf()))
 // 处理本月第一天 到本月最后一天
 for(var i =1;i<dataLast;i++){
  _date.setDate(_date.getDate()+1)
  arr.push(new Date(_date.valueOf()))
 }
 // 向前补全,重置为本月一号
 _date=getMonthDay(date)
 var forln=_date.getDay()
 for(var i=0;i<forln;i++){
  _date.setDate(_date.getDate()-1)
  arr.unshift(new Date(_date.valueOf()))
 }
 // 向后补全,重置为本月最后一天
 _date=getMonthLastDay(date)
 forln=_date.getDay()
 for(var i=forln;i<6;i++){
  _date.setDate(_date.getDate()+1)
  arr.push(new Date(_date.valueOf()))
 }
 return arr
 }
 // 将集合渲染到页面
 function renderTable(monthDateArr,date){
 document.getElementById("showtime").innerHTML=`${date.getFullYear()}-${date.getMonth()+1}`
 var table=document.createElement('table')
 var trTh=document.createElement('tr')
 trTh.innerHTML=`
  <th>周日</th>
  <th>周一</th>
  <th>周二</th>
  <th>周三</th>
  <th>周四</th>
  <th>周五</th>
  <th>周六</th>
 `
 table.appendChild(trTh)
 var tr=document.createElement('tr')
 for(let i in monthDateArr){
  var td=document.createElement('td')
  td.innerHTML=monthDateArr[i].getDate()
  tr.appendChild(td)
  if((i*1+1)%7===0){
  table.appendChild(tr)
  tr=document.createElement('tr')
  }else if(i == monthDateArr.length-1){
  table.appendChild(tr)
  }
 }
 document.getElementById("box").innerHTML=table.outerHTML
 }
 var date=new Date()
 document.getElementById('pre').onclick=function(){
 date.setDate(1)
 date.setMonth(date.getMonth()-1)
 renderTable(getMonth(date),date)
 }
 document.getElementById('next').onclick=function(){
 date.setDate(1)
 date.setMonth(date.getMonth()+1)
 rrenderTable(getMonth(date),date)
 }
 renderTable(getMonth(date),date)
 
</script>
</html>

css代码

.box{
 width: 700px;
 margin: 0 auto;
 box-sizing: border-box;
 padding: 0 1px;
}
table{
 width: 100%;
}
th,td{
 width:100px;
 text-align: center;
}
th{
 height: 30px;
 line-height: 30px;
 background: #e0e5e5;
}
td{
 height: 70px;
 line-height: 70px;
 background: #f3f5f5;
}
.show{
 display: flex;
 align-items: center;
 justify-content: center;
}

更多精彩内容请点击专题《javascript日历插件使用方法汇总》进行学习

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

Javascript 相关文章推荐
JQuery 选择器、过滤器介绍
Feb 14 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 #Javascript
详解Vue中的Props与Data细微差别
Mar 02 #Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 #Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 #Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 #Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 #Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 #Javascript
You might like
php实现的Cookies操作类实例
2014/09/24 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
jquery offset函数应用实例
2012/11/14 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
vue实现标签云效果的方法详解
2019/08/28 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
团工委书记自荐书范文
2013/12/17 职场文书
军训学生自我鉴定
2014/02/12 职场文书
实习评语大全
2014/04/26 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
小学教师个人总结
2015/02/05 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL