原生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 相关文章推荐
JQuery 选择器 xpath 语法应用
May 13 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
javascript实现在线客服效果
Jul 15 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 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
You might like
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
jquery 表格的增行删行实现思路
2013/03/21 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
Python中自定义函数的教程
2015/04/27 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
使用python实现省市三级菜单效果
2016/01/20 Python
pyhton列表转换为数组的实例
2018/04/04 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
python 追踪except信息方式
2020/04/25 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
重阳节标语大全
2014/10/07 职场文书
Python集合set()使用的方法详解
2022/03/18 Python