JS实现简易日历效果


Posted in Javascript onJanuary 25, 2021

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

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);
  }
 }

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

Javascript 相关文章推荐
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
深入理解js generator数据类型
Aug 16 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
javascript代码实现简易计算器
Jan 25 #Javascript
js简单粗暴的发布订阅示例代码
Jan 23 #Javascript
JS中循环遍历数组的四种方式总结
Jan 23 #Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 #Vue.js
原生js实现自定义难度的扫雷游戏
Jan 22 #Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 #Javascript
js canvas实现五子棋小游戏
Jan 22 #Javascript
You might like
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
JS功能代码集锦
2016/05/04 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
js实现转动骰子模型
2019/10/24 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
python中的列表和元组区别分析
2020/12/30 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
售后服务经理岗位职责
2014/02/25 职场文书
小学语文业务学习材料
2014/06/02 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis