原生js实现日历效果
本文实例为大家分享了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日历插件使用方法汇总》进行学习
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js css+html实现简单的日历
web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. html html部分比较简单,声明一个div,具体的html用javascript生成.整体内容大概是这样的: <!doctype html> <html> <head> <meta charset='utf-8'> <link rel='styleshe
-
js+html制作简单日历的方法
新手一枚,不会写什么高大上的博文,一些平时做的小练习,献丑 代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> * {margin: 0;padding: 0} #calendar {width: 210px;margin: 100px auto;overflow: hidden;bo
-
JS实现简单日历特效
本文实例为大家分享了JS实现简单日历特效的具体代码,供大家参考,具体内容如下 知识点 1.引入我的工具包 2.运用JavaScript内置对象 Date 运行效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; pa
-
js前端日历控件（悬浮、拖拽、自由变形）
很少发现网上有简洁好用的自定义前端控件的贴子,最近项目中需要,自己YY开始写前端控件,在此给大家分享 控件是基于jQuery.UI的Widget写的,写起来就方便很多,使用起来跟普通jQuery控件一样$(#id).control(option),看着眼熟吧,下面就开始了. 首先说下控件的依赖包,加载控件的时候必须先加载jQuery, jQuqery.UI, 另外jquery-ui.css 这个包也需要引用,此包主要应用了jQuery拖拽和放缩的样式,控件样式方面大家自由发挥,给了个自己写的默认
-
js实现日历的简单算法
最近有用到日历可需要编辑文本的日历,为了绑定数据的方便,所以用js写了一套日历,其实思想也是很简单. 实现步骤如下: 1.首先取得处理月的总天数 JS不提供此参数,我们需要计算.考虑到闰年问题会影响二月份的天数,我们先编写一个判断闰年的自编函数: function is_leap(year) { return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0)); } 2.接着定义一个包含十二个月在内的月份总天数的数组: m_days=
-
纯JS实现简单的日历
本文实例为大家分享了纯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(y
-
javascript实现日历效果
本文实例为大家分享了js实现日历效果的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="gb2312"> <title>万年历</title> <script type="text/javascript"> var lunarInfo = new Array( 0x04bd8, 0x04ae0, 0x0a57
-
轻量级的原生js日历插件calendar.js使用指南
使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤 本日历插件支持cmd模块化 如下调用: 复制代码 代码如下: xvDate({ 'targetId':'date1',//时间写入对象的id 'triggerId':['date1','dateBtn1'],//触发事件的对象id 'alignId':'datesWrap1',//日历对齐对象 'format':'-',//时间格式 默认'YYYY-
-
JS日历 推荐
两年前写过一个日历,可是兼容性不好. 这次重新写了一次. 兼容多种浏览器 了解了不少东东,特别是对于W3C标准化． 如 FF和IE 对box模型的理解不同 box.style{width:100;border 1px;} ie理解 为 box.width = 100 ff 理解 为 box.width = 100 + 1*2 = 102 可以使用这种方法使两种浏览器都可以正常浏览 box.style{width:100!important; width /**/:120px;bo
-
JS学习之一个简易的日历控件
这个日历控件类似于园子用的日历,如下图: 这种日历控件实现起来不难,下面简单分析下我的思路: 首先,是该控件的可配置项: 复制代码 代码如下: ... settings: { firstDayOfWeek: 1, baseClass: "calendar", curDayClass: "curDay", prevMonthCellClass: "prevMonth", nextMonthCellClass: "nextMonth&quo