JS实现简易日历效果

本文实例为大家分享了JS实现简易日历效果的具体代码,供大家参考,具体内容如下

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'); // 日期内容

 // 上个月要显示的天数
 // 求出本月第一天是星期几
 // 求出上个月最大的天数 把日期设为0
 function getPrevDays(date) {
  var date = new Date(date);
  // 把日期设为第一天,为了获取第一天是星期几
  date.setDate(1);
  var week = date.getDay();
  // 把日期设为0,为了得到上个月的最后一天
  date.setDate(0);
  var maxDay = date.getDate();
  var list = [];
  // 遍历红色日期的范围 push进数组
  for (var i = maxDay - week + 1; i <= maxDay; i++) {
  list.push(i);
  }
  return list;
 }

 // 求本月的天数
 // 月份推到下个月
 // 日期设为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;
 }

 // 下个月要显示的天数
 function getNextDays(prevDays, nowDays) {
  var list = [];
  // 一页日历42天,42 - 上月天数 - 这个月天数 = 最后显示剩余的下个月天数
  for (var i = 1; i <= 42 - prevDays - nowDays; i++) {
  list.push(i)
  }
  return list
 }

 var x = 1;
 // 封装输出日期内容
 // x记录点击月份 根据月份 上面数组自动获取当月要显示的时间
 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>';
  }
  // 三个数组输出结果拼接起来 输出
  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);
  }
 }

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

(0)

相关推荐

  • JS实现简易日历效果

    本文实例为大家分享了JS实现简易日历效果的具体代码,供大家参考,具体内容如下 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;

  • JS模拟简易滚动条效果代码(附demo源码)

    本文实例讲述了JS模拟简易滚动条效果的方法.分享给大家供大家参考,具体如下: 使用Js模拟滚动条.简易模式,类似手机上常见的滚动条. 效果如下: Js代码如下: var scrollMoveObj = null, scrollPageY = 0, scrollY = 0; var scrollDivList = new Array(); // obj需要添加滚动条的对象 w滚动条宽度 className滚动条样式名称 // obj元素 必须指定高度,并设置overflow:hidden; //

  • js实现简单日历效果

    本文实例为大家分享了js实现简单日历效果的具体代码,供大家参考,具体内容如下 ## css模块 <style type="text/css"> *{ margin: 0; padding: 0; } .date{ width: 300px; height: 220px; border: 1px solid #000; margin: 100px auto; } .title{ width: 200px; display: flex; font-size: 12px; mar

  • Vue.js创建Calendar日历效果

    使用 Vue.js 进行数据与视图的绑定,数据更新会让视图自动进行更新,类似 Android 里面的 DataBinding. 实现一个HTML的日历效果. html 部分 <div id="calendar"> <!-- 年份 月份 --> <div class="month"> <ul> <li class="arrow" @click="pickPre(currentYear,

  • 基于three.js实现简易照片墙效果

    学习three.js的过程中,写的一个简易照片墙,可以使用鼠标滚轮上下浏览,采用的是移动相机的方式. 代码贴出来,供学习这一块的朋友们参考和指导:  <!DOCTYPE HTML> <HTML> <HEAD>     <META charset="utf-8">     <META name="viewport" content="width=device-width, user-scalable=no

  • javascript中Date对象应用之简易日历实现

    前面的话 简易日历作为javascript中Date对象的常见应用,用途较广泛,本文将详细说明简易日历的实现思路. 效果演示 HTML说明  使用type=number的两个input分别作为年和月的输入控件,这样在高级浏览器下自带调节按钮  按照周日到周一的顺序进行星期的排列 <div class="box"> <header class='control'> <input id="conYear" class="con-i

  • js实现会跳动的日历效果(完整实例)

    一.简介 编写一个会动的日历,日历上面有年月日,周几,时分秒,效果如下: 年月日,周几,时分秒都会随着系统时间的走动而改变 二.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

  • 原生Js实现简易烟花爆炸效果的方法

    本文实例讲述了原生Js实现简易烟花爆炸效果的方法.分享给大家供大家参考.具体分析如下: 实现原理: 在一定范围内,随机生成一些div,形成烟花效果 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js烟花效果</title> <script type="text/javascript"> d

  • 原生js实现仿window10系统日历效果的实例

    舞动的灵魂版js日历,完全采用js实现,故而实现了与语言无关,jsp.asp.net php asp均可使用.无论你是开发软件,还是网站,均是不可或缺的实用代码. 该日历主要实现了获取当前时间时分秒,年月日星期,动态生成选择年的select,月的select,然后根据你所选中的年月,显示该年月对应的这一个月的日期. 点击上一个月,下一个月按钮,在下拉列表中显示对应的年月. <!DOCTYPE html> <html lang="en"> <head>

  • js编写当天简单日历效果【实现代码】

    之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日历的实现原理.自己也尝试着做了一下,收获蛮大,掌握了基本的实现原理后,再想增加更多的功能,完全就可以自由发挥了,先在这里分享一下吧,有兴趣的可以试试! 一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解

随机推荐