原生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;
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 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

  • 利用Javascript开发一个二维周视图日历

    前言 本文给大家介绍了Javascript开发二维周视图日历的相关内容,即之前实现了一个月视图日历,我们今天来实现一个二维周视图的日历. 以下进行分析其中的关键部分. 结构准备 不同之处在于其在日历的基础上还有一个分类轴,用于展示不同的类目,主要用于一周内的日程安排.会议安排等. 二维则和之前单独的有所不同,二维日历再切换日期时不用全部重新渲染,分类是不用变的,仅仅改变显示的日期即可. 而且由于是二维的,插入的内容必定是同时属于一个分类和一个时间段的,内容肯定是可以跨越时间(即日期轴)的,因此不

  • js原生日历的实例(推荐)

    突然发现日期对象可以进行 加减 , 利用这个特性写了一个可以说是对只要会JavaScript  的就可以写的日历:没有各种算法,只有一些逻辑相信只要懂javascript就差不多看俩眼就会的日历. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *

  • JS实现带阴历的日历功能详解

    本文实例讲述了JS实现带阴历的日历功能.分享给大家供大家参考,具体如下: 工作中要写一个带阴历的日历,自己调研了怎么做日历. 一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解决行数问题之前,还得先知道这个月的第1天是星期几,因为每个月的1号并不都是从日历上的星期天开始排的,可能1号是星期五,星期六也说不定,所以1号的左边部分,就得用空表格代替了.那么用多少个空表格代替呢,这里就得用到getDay(

  • javascript实现考勤日历功能

    简介 用过一些开源的日历,但对于自定义去绑定数据在日历元素中却不是很方便,由于工作需要用到考勤日历,考虑到日历的实现也不是特别麻烦,于是自己弄了一个,样式比较简单,需要的可以自己去扩展.使用的时候绑定获取数据的方法即可,在这个日历中我没有直接添加选择月份.各位有兴趣可以自己扩展,已预留设置日期的方法.自定义去扩展的时候注意保证原有的代码结构不变,增加一些方法即可,下面直接上源码了,就三个文件. attendanceCalendar.js 代码已更新多次,请直接上github下载,链接 修复 第一

  • JS实现一个简单的日历

    主要分为三个部分,1:获取li元素 2:如何填写对应的日期 3:如何获取点击li元素的事件. 1:通过节点间关系的属性children 获取li元素(两个for循坏遍历): 2:在遍历填写日期时,在第一行判断在当月的第一天在星期几,然后从第一天开始填写,直到大于当月的天数就暂停填写,并开始填写下个月的日期.第一行上个月的日期显示  : 上月天数显示开始值 = 计算上个月的天数 - 这个月开始的第一天在星期几的值 -1,然后在第一行上月天数显示开始值自加. 3:利用JS的事件冒泡获取li的inne

  • javascript实现日历效果

    本文实例为大家分享了js实现日历效果的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="gb2312"> <title>万年历</title> <script type="text/javascript"> var lunarInfo = new Array( 0x04bd8, 0x04ae0, 0x0a57

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

    这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 成品显示,可左右切换月份 html 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi

  • 纯js实现无缝滚动功能代码实例

    这篇文章主要介绍了纯js实现无缝滚动功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 HTML代码 <!--父容器要使用overflow: hidden;--> <div id="imgsList" style="height:150px;width:980px;overflow: hidden;"> <!--滚动容器--> <div id="marqu

  • 通过python3实现投票功能代码实例

    这篇文章主要介绍了通过python3实现投票功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 import urllib.request # cd C:\Python36-32\Scripts # pip install BeautifulSoup from bs4 import BeautifulSoup def vote(get_url, post_url, option): # 访问投票页面,拿到cookie resp = ur

  • python基于FTP实现文件传输相关功能代码实例

    这篇文章主要介绍了python基于FTP实现文件传输相关功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 本实例有文件传输相关功能,包括:文件校验.进度条打印.断点续传 客户端示例: import socket import json import os import hashlib CODE = { '1001':'重新上传文件' } def file_md5(file_path): obj = open(file_path,'rb

  • java实现python session功能代码实例

    这篇文章主要介绍了java实现python session功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 怎么在java中实现类似于python的requests模块的session功能呢.java也是可以实现的,用java的okhttp包可以实现. 在pom.xml中加入相关依赖 <!-- https://mvnrepository.com/artifact/com.squareup.okhttp3/okhttp --> <

  • 基于JavaScript伪随机正态分布代码实例

    这篇文章主要介绍了基于JavaScript伪随机正态分布代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在游戏开发中经常遇到随机奖励的情况,一般会采取先生成数组,再一个一个取的方式发随机奖励. 下面是js测试正态分布代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

  • Java实现发送手机短信语音验证功能代码实例

    这篇文章主要介绍了Java实现发送手机短信语音验证功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 利用第三方平台可以实现发送手机短信验证码和语音验证码的功能,本文使用框架是struts2+spring+hibernate,现就action层给出核心代码功能. public class VerifyAction extends BaseAction<VerifyRequest> { private static final long

  • 微信小程序日历插件代码实例

    这篇文章主要介绍了微信小程序日历插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.wxml代码 <view class="timePick"> <picker mode="date" fields="month" value="{{timestamp}}" start="1999-01-01" end="2999-

  • JS实现“全选”和"全不选"功能代码实例

    这篇文章主要介绍了JS实现"全选"和"全不选"功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head&g

  • 通过javascript实现扫雷游戏代码实例

    这篇文章主要介绍了通过javascript实现扫雷游戏代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 html代码: <div id="mine"> <div class="level"> <button type="button">初级</button> <button type="button">中级&l

随机推荐