快捷導(dǎo)航

JS實現(xiàn)簡易日歷效果

更新時間：2021年01月25日 08:55:41 作者：一夜醒來頭禿了

這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)簡易日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)簡易日歷效果的具體代碼，供大家參考，具體內(nèi)容如下

css

* {
  margin: 0;
  padding: 0;
  list-style: none;
 }

 #box {
  width: 280px;
  height: 360px;
  margin: 50px auto;
  background-color: black;
  color: aliceblue;
  line-height: 40px;
 }

 #header {
  height: 40px;
  color: aliceblue;
  line-height: 40px;
 }

 #header span {
  float: left;
  text-align: center;
  margin-top: 10px;
  line-height: 40px;
 }

 #prev,
 #next {
  width: 20%;
  line-height: 40px;
  cursor: pointer;
 }

 #current {
  width: 60%;
  line-height: 40px;
 }

 #week li {
  width: 40px;
  text-align: center;
  float: left;
  line-height: 40px;
 }

 #content li {
  width: 40px;
  text-align: center;
  float: left;
  line-height: 40px;
}

html

<div id="box">
 <div id="header">
  <span id="prev">上</span>
  <span id="current"></span>
  <span id="next">下</span>
 </div>
 <ul id="week">
  <li>日</li>
  <li>一</li>
  <li>二</li>
  <li>三</li>
  <li>四</li>
  <li>五</li>
  <li>六</li>
 </ul>
 <ul id="content">
  <!-- <li>31</li>
    <li>1</li>
    <li>2</li> -->
 </ul>
</div>```

js

var current = document.querySelector('#current');//月份name
 var prev = document.querySelector('#prev'); // 上個月
 var next = document.querySelector('#next'); // 下個月
 var content = document.querySelector('#content'); // 日期內(nèi)容

 // 上個月要顯示的天數(shù)
 // 求出本月第一天是星期幾
 // 求出上個月最大的天數(shù) 把日期設(shè)為0
 function getPrevDays(date) {
  var date = new Date(date);
  // 把日期設(shè)為第一天，為了獲取第一天是星期幾
  date.setDate(1);
  var week = date.getDay();
  // 把日期設(shè)為0，為了得到上個月的最后一天
  date.setDate(0);
  var maxDay = date.getDate();
  var list = [];
  // 遍歷紅色日期的范圍 push進(jìn)數(shù)組
  for (var i = maxDay - week + 1; i <= maxDay; i++) {
  list.push(i);
  }
  return list;
 }


 // 求本月的天數(shù)
 // 月份推到下個月
 // 日期設(shè)為0
 function getNowDays(date) {
  var date = new Date(date);
  date.setMonth(date.getMonth() + 1);
  date.setDate(0);
  var maxDay = date.getDate();
  // console.log(maxDay)
  var list = [];
  // 
  for (var i = 1; i <= maxDay; i++) {
  list.push(i)
  }
  return list;
 }



 // 下個月要顯示的天數(shù)
 function getNextDays(prevDays, nowDays) {
  var list = [];
  // 一頁日歷42天，42 - 上月天數(shù) - 這個月天數(shù) = 最后顯示剩余的下個月天數(shù)
  for (var i = 1; i <= 42 - prevDays - nowDays; i++) {
  list.push(i)
  }
  return list
 }

 var x = 1;
 // 封裝輸出日期內(nèi)容
 // x記錄點擊月份 根據(jù)月份 上面數(shù)組自動獲取當(dāng)月要顯示的時間
 function output(x) {
  arr1 = getPrevDays('2021-' + x);
  arr2 = getNowDays('2021-' + x);
  arr3 = getNextDays(arr1.length, arr2.length);
  // console.log(arr2);
  var res = '';
  for (var i = 0; i < arr1.length; i++) {
  res += '<li style="color:red;">';
  res += arr1[i];
  res += '</li>';
  }

  for (var i = 0; i < arr2.length; i++) {
  res += '<li>';
  res += arr2[i];
  res += '</li>';
  }

  for (var i = 0; i < arr3.length; i++) {
  res += '<li style="color:red;">';
  res += arr3[i];
  res += '</li>';
  }
  // 三個數(shù)組輸出結(jié)果拼接起來 輸出
  return content.innerHTML = res;
 }




 // 輸出月份顯示
 var date = new Date();
 current.innerHTML = showMonth(new Date());
 // 月份
 function showMonth(date) {
  var date = new Date(date);
  date.setMonth(date.getMonth());
  var mon = date.getMonth();
  // var year = date.getFullyear();
  return (mon + 1) + '月';
 }

 output(x);
 // 下個月
 next.onclick = function () {
  x++;
  // console.log(x);
  if (x > 12) {
  x = 1;
  output(x);
  } else {
  current.innerHTML = showMonth('2021-' + x);
  output(x);
  }
 }

 // 上個月
 prev.onclick = function () {
  x--;
  console.log(x);
  if (x < 1) {
  x = 12;
  current.innerHTML = showMonth('2021-' + x);
  output(x);
  } else {
  current.innerHTML = showMonth('2021-' + x);
  output(x);
  }
 }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。