首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生JavaScript实现日历功能代码实例(无引用Jq)

Posted in Javascript onSeptember 23, 2019

这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

成品显示，可左右切换月份

原生JavaScript实现日历功能代码实例(无引用Jq)

html 代码

<!DOCTYPE html>
<html>
<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/calendar.css" rel="external nofollow" >
</head>
<body>
 <div id="calendarElement">
  <div class="header">
   <div class="prev">
    <i class="previ"></i>
   </div>
   <div class="date"></div>
   <div class="next">
    <i class="nexti"></i>
   </div>
  </div>
  <div class="content">
   <div class="week">
    <div>日</div>
    <div>一</div>
    <div>二</div>
    <div>三</div>
    <div>四</div>
    <div>五</div>
    <div>六</div>
   </div>
   <div class="weekMany clearfloat">
   </div>
  </div>
 </div>
 <script src="./js/calendar.js"></script>
</body>
</html>

css代码

*{
 margin: 0;
 padding: 0;
}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
#calendarElement{
 margin: 100px auto;
 width: 80%;
 box-shadow: 0 0 10px #999999;
}
#calendarElement>.header{
 height: 80px;
 background-color: coral;
 display: flex;
 border-bottom: 1px solid #fff;
}
#calendarElement>.header .prev{
 width: 20%;
 position: relative;
}
#calendarElement>.header .prev i{
 width: 20px;
 height: 20px;
 display: block;
 position: absolute;
 left: 50%;
 top: 50%;
 margin-top: -10px;
 margin-left: -10px;
 transform: rotate(45deg);
 border: 2px solid #fff;
 border-right: none;
 border-top: none;
}
#calendarElement>.header .next{
 position: relative;
}
#calendarElement>.header .next i{
 width: 20px;
 height: 20px;
 display: block;
 position: absolute;
 left: 50%;
 top: 50%;
 margin-top: -10px;
 margin-left: -10px;
 transform: rotate(45deg);
 border: 2px solid #fff;
 border-left: none;
 border-bottom: none;
}
#calendarElement>.header .date{
 width: 60%;
 font-size: 22px;
 line-height: 80px;
 color: #fff;
 text-align: center;
}
#calendarElement>.header .next{
 width: 20%;
}
#calendarElement>.content >.week{
 box-sizing: border-box;
 width: 100%;
 height: 40px;
 color: #fff;
 display: flex;
 padding: 0 1%;
}
#calendarElement>.content >.week >div{
 width: 14%;
 text-align: center;
 line-height: 40px;
}
#calendarElement>.content >.weekMany{
 padding-top: 5px;
 padding-bottom: 15px;
}
#calendarElement>.content >.weekMany>div{
 float: left;
 width: 14.28%;
 height: 40px;
 text-align: center;
 line-height: 40px;
 font-size: 14px;
}
#calendarElement>.content >.weekMany>.otherMonth{
 color: #999999
}

JS代码

var currentTime="";   //当前时间年月日
var dom=document.querySelector("#calendarElement");       //承载元素
var color="";
getCurrentTime();
randomColor();
showDay();
function getCurrentTime(){ //获取当前时间
 var time=new Date();
 var year=time.getFullYear();
 var month=time.getMonth()+1;
 var day=time.getDate();
 if(month<10){
  month="0"+month
 }
 var data=year+ "-" +month;
 currentTime=year+ "-" +month+"-"+day;
 document.querySelector(".date").innerHTML=data;
};
dom.addEventListener("click",function(e){
 if(e.target.className=="previ" || e.target.className=="prev"){
  getMonths("prev")
 }else if(e.target.className=="nexti" || e.target.className=="next"){
  getMonths("next")
 }
})
function showDay(){
 var html="";
 var MonthOne=currentTime;
 var yearMonth=currentTime.split('-').slice(0,2);
 yearMonth=yearMonth.join('-');
 document.querySelector(".date").innerHTML=yearMonth;
 MonthOne=MonthOne.split('');
 MonthOne.splice(8,2,"01")
 MonthOne=MonthOne.join('');
 var monthLen=getMonthLength(MonthOne);  //每月有多少天
 var weekMany=new Date(MonthOne).getDay();  //每月一号是星期几
 html+=getPrevMonthHtml(weekMany);
 html+=getNowMonthHtml(monthLen);
 html+=getNextMonthHtml(weekMany,monthLen);
 document.querySelector(".weekMany").innerHTML=html;
}
function getPrevMonthHtml(weekMany){
 var html="";
 var lastMonth=currentTime.substring(0, 7);  //得出年月
 lastMonth=lastMonth.split('-')
 if(lastMonth[1]-1==0){
  lastMonth[1]=12;
  lastMonth[0]=lastMonth[0]-1;
 }else if(lastMonth[1]-1<10){
  lastMonth[1]="0"+(lastMonth[1]-1);
 }
 lastMonth=lastMonth.join('-');
 var monthLen=getMonthLength(lastMonth);
 var start=monthLen-weekMany;
 for(var i=start+1;i<=monthLen;i++){
  html+='<div class="otherMonth day" data-date="'+lastMonth+'-'+i+'">'+i+'</div>';
 }
 return html;
}
function getNowMonthHtml(monthLen){
 var html="";
 var MonthOne=currentTime.substring(0, 7);  //得出年月
 var today=currentTime.split('-')[2];
 for(var i=1;i<=monthLen;i++){
  if(i<10){
   var q="0"+i;
  }else{
   var q=i;
  }
  if(i==today){
   html+='<div class="thisMonth day" style="background-color:'+color+';color:#fff" data-date="'+MonthOne+'-'+q+'">'+i+'</div>';
  }else{
   html+='<div class="thisMonth day" data-date="'+MonthOne+'-'+q+'">'+i+'</div>';
  }
 }
 return html;
}
function getNextMonthHtml(weekMany,monthLen){
 var html="";
 var daynum=weekMany+monthLen;
 if(daynum%7==0){
  return html;
 }else{
  var num=daynum%7;
  var lessNum=7-num;  //差几天
  var lowerMonth=currentTime.substring(0, 7);  //得出年月
  lowerMonth=lowerMonth.split('-')
  if(lowerMonth[1]+1==13){
   lowerMonth[1]="0"+1;
   lowerMonth[0]=+lowerMonth[0]+1;
  }else{
   lowerMonth[1]=+lowerMonth[1]+1;
   if(lowerMonth[1]<10){
    lowerMonth[1]="0"+lowerMonth[1];
   }
  }
  lowerMonth=lowerMonth.join('-');
  for(var i=1;i<=lessNum;i++){
   if(i<10){
    var q="0"+i
   }
   html+='<div class="otherMonth day" data-date="'+lowerMonth+'-'+q+'">'+i+'</div>';
  }
 }
 return html;
}
function getMonths(around){
 if(around=="prev"){
  currentTime=currentTime.split('-');
  currentTime[1]=currentTime[1]-1;
  if(currentTime[1]==0){
   currentTime[1]="12"
   currentTime[0]=+currentTime[0]-1
  }
  if(currentTime[1]<10){
   currentTime[1]="0"+currentTime[1]
  }
  currentTime=currentTime.join('-');
  showDay();
 }else if(around=="next"){
  currentTime=currentTime.split('-');
  currentTime[1]=+currentTime[1]+1;
  if(currentTime[1]==13){
   currentTime[1]="1"
   currentTime[0]=+currentTime[0]+1
  }
  if(currentTime[1]<10){
   currentTime[1]="0"+currentTime[1]
  }
  currentTime=currentTime.join('-');
  showDay();
 }
}
 
function getMonthLength(date) {  // 获取每月有多少天
 let d = new Date(date)
 // 将日期设置为下月一号
 d.setMonth(d.getMonth()+1)
 d.setDate('1')
 // 获取本月最后一天
 d.setDate(d.getDate()-1)
 return d.getDate()
}
function randomColor(){   //随机颜色
 color = '#'+Math.floor(Math.random()*16777215).toString(16); 
 if(color.length==6){
  color+="0"
 }
 document.querySelector(".header").style.backgroundColor=color;
 document.querySelector(".week").style.backgroundColor=color;
};

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

原生JavaScript实现日历功能代码实例(无引用Jq)

- Author -

伴月阁

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
popdiv
Jul 14 Javascript
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
小程序实现上下移动切换位置
Sep 23 #Javascript
微信小程序分包加载代码实现方法详解
Sep 23 #Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 #Javascript
layer扩展打开/关闭动画的方法
Sep 23 #Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 #Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 #Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 #Javascript
有序排列(1) 公共键(1) python-pcl(1) html标准库(1) dll(1) pycryto(1) 历史记录(1) 遍历文件夹(1) Anaconda(2) key(1)
You might like
基于mysql的bbs设计（五）
2006/10/09 PHP
简单的用PHP编写的导航条程序
2006/10/09 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
js下用层来实现select的title提示属性
2010/02/23 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
高性能js数组去重(12种方法，史上最全)
2019/12/21 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
Python smallseg分词用法实例分析
2015/05/28 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
python内打印变量之%和f的实例
2020/02/19 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
BIBLOO波兰：捷克的一家在线服装店
2018/03/09 全球购物
Saucony澳大利亚官网：美国跑鞋品牌，运动鞋中的劳斯莱斯
2018/05/05 全球购物
医院护士的求职信范文
2013/12/26 职场文书
美容师的职业规划书
2013/12/27 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
一年级学生评语大全
2014/04/21 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
学生保证书
2015/01/16 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
辅导员学期工作总结
2015/08/14 职场文书
三严三实学习心得体会（精选N篇）
2016/01/05 职场文书
使用HttpSessionListener监听器实战
2022/03/17 Java/Android