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解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
jQuery的框架介绍
May 11 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
js replace替换字符串同时替换多个方法
Nov 27 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
新版PHP极大的增强功能和性能
2006/10/09 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
在python中的socket模块使用代理实例
2014/05/29 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Python处理Excel文件实例代码
2017/06/20 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
一看就懂得Python的math模块
2018/10/21 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
Python列表的切片实例讲解
2019/08/20 Python
如何写python的配置文件
2020/06/07 Python
Python csv文件记录流程代码解析
2020/07/16 Python
详解如何修改python中字典的键和值
2020/09/29 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
python中pow函数用法及功能说明
2020/12/04 Python
露营世界:Camping World
2017/02/02 全球购物
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
安全教育心得体会
2013/12/29 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
教师简历自我评价
2014/02/03 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
给校长的建议书300字
2014/05/16 职场文书
工资证明格式模板
2015/06/12 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书