原生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 相关文章推荐
js控制frameSet示例
Sep 10 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
vue中的inject学习教程
Apr 24 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
js实现删除json中指定的元素
Sep 22 Javascript
Vue2.0搭建脚手架
Mar 13 Vue.js
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
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
div移动 输入框不能输入的问题
2009/11/19 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
化工专业推荐信范文
2013/11/28 职场文书
英文自荐信常用句子
2014/03/26 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
群众路线调研报告范文
2014/11/03 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js
Spring Boot 实现 WebSocket
2022/04/30 Java/Android