原生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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 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简单静态页生成过程
2008/03/27 PHP
php 静态变量的初始化
2009/11/15 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
几个Linux面试题笔试题
2016/08/01 面试题
公务员培训心得体会
2013/12/28 职场文书
文艺晚会主持词
2014/03/24 职场文书
法律顾问服务方案
2014/05/15 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
刘公岛导游词
2015/02/05 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏