原生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 相关文章推荐
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
Javascript 面向对象 命名空间
May 13 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 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实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
python中遍历文件的3个方法
2014/09/02 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
python 图像平移和旋转的实例
2019/01/10 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
python tkinter控件布局项目实例
2019/11/04 Python
python 元组和列表的区别
2020/12/30 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
教师年度考核自我鉴定
2014/01/19 职场文书
中学团支部工作总结
2015/08/13 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript