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

原文地址：https://www.cnblogs.com/banyuege/p/11564047.html

时间： 2024-08-30 08:22:35

原生JavaScript写出日历功能无引用Jq的相关文章

用原生JavaScript写AJAX

//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.听对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求(告诉服务器我要什么文件)//4.接收返回值下面是原生js写ajax的具体写法 <script> window.onload=function() { var oBtn = document.getElementById("btn1"); oBtn.onclick = func

原生javascript写的网页选项卡和jQuery写的比较

总的来说思路比较简单,就是先获取节点,然后对节点进行相应的处理,下面是完整的页面代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>原生js tab</title>

纯JS写出日历

封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" var yy=f23timeselecta1.value,mm=f23timeselecta2.value-1 var newdara=new Date() var dd=newdara.getDate(); var d=new Date(yy,mm,1),t if(mm==0){mm=12;yy--} var

四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现

虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们的需求,下面我简单介绍一些常见的四种提示弹出框(success,loading,error,warning),我分别用原生JavaScript和jQuery来介绍分享给各位博友! 一.首先介绍原生JavaScript来实现四种提示弹出框: 第一步:先看看html的建立 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

Html5如何快速在页面中写出多个轮播图效果

我们在做项目的过程中,有时候客户需求要求你在同一个页面中,写几个不同样式的轮播图效果,那么如何快速实现呢?(要知道若果你每个轮播图都要用原生javascript写的话,会很麻烦,代码也不够简洁) 这里我们就可以借助插件来实现这一功能,swiper.js就是一个专门处理轮播图效果的js库,下面举例来说明: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g

原生javascript添加和删除class

在操作class时,往往需要叠加或者删除一个class,这里用原生javascript写了一种方法,以供参考. 这里是html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

原生JavaScript技巧大收集100个

原生JavaScript技巧大收集 1.原生JavaScript实现字符串长度截取function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\xff]/; var strre = ""; for (var i = 0; i < str.length; i++) { if (icount < len - 1) { temp = str.substr(i, 1); if (patrn.ex

使用原生JavaScript发送ajax请求

关于使用原生JavaScript发送异步请求给服务端. 准备工作: 代码编写工具用的是sublime 服务端使用的是wamp搭的一个本地Apache服务器,主要用来返回数据方便测试步骤: 浏览器端 html标签绑定事件发送ajax请求----> 五步操作:1 创建异步对象XMLHttpRequest; 2 设置method url 3 发送请求给服务端 4 注册事件 5 在事件中获取服务端返回的数据,进行操作. 服务器端 1 获取请求数据 2 返回结果给浏览器下面来一个小demo1做一

关于使用原生Javascript的一点思考

前端很大,大到那些连类都不知道的仅仅上了培训班的人都会用jquery写网页... 当一个行业的从业人数出现爆发性增长时,基于规模效应,真正有用的有思想的技术就会出现... 这也是我推崇用原生JavaScript写代码的原因... 思路最重要,jquery对js做黑箱操作,让许多人不愿意花时间去了解js的实现逻辑... 诚然,jquery这种类库可以快速开发... 但是!但是!但是!重要的事情说三遍,借用一句hack界的一句话:思维有多开阔,方法就有多少,技术不重要,思路很重要!!! 同理,写js

原生JavaScript写出日历功能 无引用Jq

原生JavaScript写出日历功能 无引用Jq的相关文章

原生JavaScript写出日历功能无引用Jq

原生JavaScript写出日历功能无引用Jq的相关文章