原生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 EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
Promise扫盲贴
Jun 24 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 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
Wordpress php 分页代码
2009/10/21 PHP
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
python数据结构树和二叉树简介
2014/04/29 Python
Python实现建立SSH连接的方法
2015/06/03 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
python批量爬取下载抖音视频
2019/06/17 Python
python监控nginx端口和进程状态
2019/09/06 Python
wxPython实现列表增删改查功能
2019/11/19 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
医药大学生求职简历的自我评价
2013/10/17 职场文书
高中生的学习总结自我鉴定
2013/10/26 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
兴趣班停课通知
2015/04/24 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle