原生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 相关文章推荐
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 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 实现301重定向跳转实例代码
2016/07/18 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
再谈javascript原型继承
2014/11/10 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
python实现多线程网页下载器
2018/04/15 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
python实现贪吃蛇游戏
2020/03/21 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
基于keras中的回调函数用法说明
2020/06/17 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
新闻专业推荐信范文
2013/11/20 职场文书
教育技术职业规划范文
2014/03/04 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
股权转让协议范本
2014/12/07 职场文书
劳模事迹材料范文
2014/12/24 职场文书
安全员岗位职责
2015/02/10 职场文书
停电调休通知
2015/04/16 职场文书
普通员工辞职信范文
2015/05/12 职场文书