JS 通过年份获取月，季度，半年度，年度
原文请关注公众号 ”酒酒酒酒“，关注公众号 回复 ”JS 通过年份获取月，季度，半年度，年度“ 可获取源代码
功能描述：
实例化一个函数，给函数内传递不同的参数，获取从起始年份到现在年度所有的月份，季度，半年度，年度
动态演示
---------正文代码开始--------
1. 封装函数 createMonth 注：此代码可直接复制黏贴使用
function createMonth() {
let typeText = "";
let today = new Date();
// 获取当前的年
let currentYear = today.getFullYear();
// 获取当前的月份
let currentMonth = today.getMonth() + 1;
// 输出数据
this.arr = [];
this.type = "";
this.year = "";
this.currentMonth = currentMonth;
this.currentYear = currentYear;
/*
@desc 初始化函数，页面进来先调用init函数,实例化createMonth函数后, 调用init函数回将生成的数据 return 出去，每次生成新的数据
@param {数字} year 接收字符串类型的4位数字年份
@param {数字} type 1 月度，2 季度，3 半年度，4 年度
@param {布尔} isCurrentMonth 是否展示当前的月份，季度，半年度，年度
isCurrentMonth=false 不展示
isCurrentMonth=true 展示
@param {布尔} isSort 是否升序 true 升序[从小往大排序] false 降序[从大往大排序]
@param {数字} sortType 排序规则 1 以月进行排序， 4 以年进行排序
*/
this.init = function(year, type, isCurrentMonth = false, isSort = false,sortType=4) {
this.type = type;
this.year = year;
this.isCurrentMonth = isCurrentMonth;
this.arr = [];
this.setYear();
this.setType();
let copyArr=JSON.parse(JSON.stringify(this.arr));
let labelKey='year';
// let label=sortType==1?'val':'year';
if(sortType==1){
labelKey='val';
}else{
labelKey='year';
}
this.arr=copyArr.sort(this.dateDataSort(labelKey,isSort))
return this.arr;
}
// 处理接受到的type值
/*
处理接受到type类型，如果没有值，就赋默认值月即1
*/
this.setType = function() {
// type 不存在就赋默认值为4
let type = this.type || 4;
if (type == 1) {
// 月度
typeText = '月';
this.setMonthData();
} else if (type == 2) {
// 季度
typeText = '季度';
this.setQuarterData();
} else if (type == 3) {
// 半年度
typeText = '半年度';
this.setSemiannualData();
} else if (type == 4) {
// 年度
typeText = '年度';
this.setYearListData();
}
}
// 处理接受到的年份
/*
处理接受到的年份，如果没有值就赋默认值为当前的年
*/
this.setYear = function() {
let year = this.year;
// 判断接收到的年份是否是数值类型
if (year && Object.prototype.toString.call(year) != "[object Number]") {
year = Number(year);
} else if (!year) {
year = currentYear;
}
this.year = year;
}
// 去重 数组对象去重
this.removeDuplicateObjects = function(array, label) {
const obj = {};
let arr = [];
label = label || 'label';
arr = array.reduce((total, next) => {
let key = next[label]
if (key) {
obj[key] ? '' : obj[key] = true && total.push(next)
return total
}
}, []);
return arr;
}
// 排序 数组属性值相同的排列到一起
this.setArrSort = function(dataArr, keys) {
dataArr = JSON.parse(JSON.stringify(dataArr));
keys = keys || 'year'
return dataArr.sort((a, b) => {
if ((a[keys].toString()) != (b[keys].toString())) {
return (a[keys].toString()).localeCompare(b[keys].toString());
}
})
}
// 升降序函数
/*
property是你需要排序传入的key,bol为true时是升序，false为降序
bol 是否升序 true 升序 false 降序
*/
this.dateDataSort=function(property, bol) {
return function(a, b) {
var value1 = a[property];
var value2 = b[property];
if (bol) {
// 升序
return Date.parse(value1) - Date.parse(value2);
} else {
// 降序
return Date.parse(value2) - Date.parse(value1)
}
}
}
// 是否过滤掉当前年的当前月，季度，年度，以及当前年的下半年
// 设置年度
this.setYearListData = function() {
// console.log('设置年度');
// 设置当前年的年数据
if (this.year == currentYear) {
let obj = {
year: this.year,
val: 1,
type: this.type,
typeText: '年度',
label: this.year + '年'
}
this.arr.push(obj);
} else if (this.year < currentYear) {
// 设置小于当前年的年数据
for (let i = this.year; i <= currentYear; i++) {
let obj = {
year: i,
val: 1,
type: this.type,
typeText: '年度',
label: i + '年'
}
this.arr.push(obj);
}
// 是否展示当前的年
//
if (this.isCurrentMonth == false && this.type == 4) {
this.arr.forEach((item, index, arr) => {
// 过滤掉当前的年
if (item.year == currentYear) {
this.arr.splice(index, 1);
}
});
}
}
}
// 设置半年度
// 此处调用的年度来生成半年度
this.setSemiannualData = function() {
// console.log('设置半年度');
// 调用年数据，用以生成上半年和下半年
this.setYearListData();
// 此处用了深拷贝，如若不使用深拷贝，copyArr最后的数据无法改变
let copyArr = JSON.parse(JSON.stringify(this.arr));
// 因为是上半年，下半年，所以使用了数据拼接，将原有数据再次拼接一次
copyArr = copyArr.concat(this.arr);
// 数据排序，将相同年份的数据放到一起
let sortArr = this.setArrSort(copyArr);
// 需要删除下标
let deleteIndex = null;
// 数据排序后重新赋值
copyArr = sortArr;
// 用以标注上半年，下半年；1上半年，2下半年
let val = 1;
let label = "上半年"
for (let i = 0; i < copyArr.length; i++) {
// 当前月份大于6就是上半年
if (currentMonth > 6 && (i % 2 == 0)) {
val = 1;
// 当前月份在6-12就是下半年
} else if (currentMonth > 6 && currentMonth < 12 && (i % 2 != 0)) {
val = 2;
}
label = val == 1 ? '上半年' : '下半年';
copyArr[i].val = val;
copyArr[i].typeText = label;
copyArr[i].label = copyArr[i].year + '年' + label;
// 获取当前年的下半年下标
if (copyArr[i].year == currentYear && copyArr[i].val == 2) {
deleteIndex = i;
}
}
// 是否过展示当前年度下半年
if (this.isCurrentMonth == false) {
// 移除当前年的下半年
copyArr.splice(deleteIndex, 1);
}
this.arr = copyArr;
}
// 设置季度
// setQuarterData函数是通过月度来生成季度的
this.setQuarterData = function() {
// console.log('设置季度');
// 调用月度
this.setMonthData();
let arr = [];
let copyArr = JSON.parse(JSON.stringify(this.arr));
copyArr = copyArr.map((item, i, arr) => {
// 使用月份除以3向上取整，获取到是第几季度
let val = Math.ceil(item.val / 3);
item.val = val;
item.label = item.year + '年' + item.val + '季度'
return item;
});
// 因为调用了生成的月份，因此要过滤掉相同的数据
arr = this.removeDuplicateObjects(copyArr, 'label');
this.arr = arr;
}
// 设置月度
this.setMonthData = function() {
// console.log('设置月度');
// 调用年度
this.setYearListData();
let arr = [];
let copyArr = JSON.parse(JSON.stringify(this.arr));
// 最大月份
let maxMonth = currentMonth;
// 需要删除的数据下标
let deleteIndex = null;
for (let i = 0; i < copyArr.length; i++) {
// 如果年份小于当前的年，最大月份赋值12，如果如果年份等于当前的年，最大月份就是当前月份
if (copyArr[i].year < currentYear) {
maxMonth = 12;
} else if (copyArr[i].year == currentYear) {
maxMonth = currentMonth;
}
for (let m = 1; m <= maxMonth; m++) {
let obj = {
year: copyArr[i].year,
val: m,
type: this.type,
typeText: typeText,
label: copyArr[i].year + '年' + m + '月'
}
/*
过滤当前月份
获取当前月份的下标， 用于删除当前的月份
考虑到性能问题 所以注释掉了
*/
// if (copyArr[i].year == currentYear && m==currentMonth) {
// deleteIndex=m;
// }
arr.push(obj);
}
}
// 是否展示当前月份
if (this.isCurrentMonth == false) {
// arr.splice(deleteIndex,1)
arr = arr.filter(function(item) {
if (item.year == currentYear) {
// 移除当前的月
return item.val !== currentMonth;
} else {
return item;
}
});
}
this.arr = arr;
}
}
2. 函数解释说明
使用一下函数之前，需要先实例化createMonth函数为对象，具体看以下步骤三
2.1. this.init 初始化函数
2.11. createMonth 实例化完成后，需要调用此函数来调用实例化函数内部其他数，给一些关键性数据赋值，并且回把生成好的数据return出去
2.12. init 函数接收三个参数 year，type，isCurrentMonth
year: 接收字符串类型的4位数字年份
type: 1 月度，2 季度，3 半年度，4 年度
isCurrentMonth：true/false 是否展示当前的月份，季度，半年度，年度
isCurrentMonth：true 展示
isCurrentMonth：false 不展示,默认是false
当值是 false 时，使用了JS的 splice 移除了当前年，月，季度，和当前年的下半年
2.2 this.setType 处理接受到的type值，类型为数值类型
处理接受到type类型，如果没有值，就赋默认值月即1
2.3 this.setYear
处理接受到的年份，如果没有值就赋默认值为当前的年
2.4 this.removeDuplicateObjects
2.4.1. 去重 数组对象去重，在网找的方法，自己做了稍加修改
接收两个参数：array,label
array 数组对象
label 对象中过滤的key名称
2.5 this.setArrSort 排序 数组属性值相同的排列到一起
2.6 this.setYearListData 生成年数据
在生成半年度，月度数据时候，也调用了setYearListData 该函数
2.7 this.setSemiannualData 生成半年度数据
该函数里面调用了年函数setYearListData，使用深拷贝，生成了双份数据
2.8 this.setQuarterData 生成季度数据
该函数里面调用了月函数setMonthData来生成季度，通过月份除以三向上取整，获取到是第几季度
因为调用了月份函数setMonthData，导致生成的季度产生了重复数据，就是用了 removeDuplicateObjects 函数去重
2.9 this.setMonthData 生成月度数据
该函数里面调用了年函数setYearListData，用于生成对应年的月份
3. 函数调用-通过控制台查看
// 实例化 createMonth 函数 为一个对象
var start = new createMonth();
console.log("打印实例：",start);
// 调用实例化函数中的init函数传参，false 不展示当前月，季度，半年度，年
let arr1=start.init('2023', '1' ,false);
// 调用实例化函数中的init函数传参，true 展示当前月，季度，半年度，年
let arr2=start.init('2023', '1' ,true);
console.log("原始arr",start.arr);
console.log('arr1:',arr1);
console.log('arr2:',arr2);
--------正文代码结束--------
4. 函数调用-通过UI页面查看，如果上面正文已经理解，可以忽略以下UI页面演示
4.1 演出页面引用了layui，演示代码可以直接使用
4.2 引入layui依赖
<!-- 引入 layui.css -->
<link rel="stylesheet" href="https://unpkg.com/layui@2.6.8/dist/css/layui.css"> <!-- 引入 layui.js -->
<script src="https://unpkg.com/layui@2.6.8/dist/layui.js"></script>
4.2 演示使用的 HTML代码
<formclass="layui-form layui-form-pane"action="">
<div class="layui-form-item" pane><label class="layui-form-label">选择年份</label><div class="layui-input-inline"><input type="text" class="layui-input" id="test1"></div></div><div class="layui-form-item"><label class="layui-form-label">选择类别</label><div class="layui-input-block"><input type="radio" name="type" value="1" title="月度" lay-filter="demo-radio"><input type="radio" name="type" value="2" title="季度" lay-filter="demo-radio"><input type="radio" name="type" value="3" title="半年度" lay-filter="demo-radio"><input type="radio" name="type" value="4" title="年度" lay-filter="demo-radio" checked></div></div><div class="layui-form-item" pane><label class="layui-form-label">是否开启</label><div class="layui-input-block"><input type="checkbox" value="false" lay-skin="switch" lay-filter="demo-checkbox-switch" lay-text="开启|关闭"><div class="layui-bg-orange">是否展示现在年的当前月份，现在年的当前季度，现在年的下半年度，现在的年度</div></div></div><div class="layui-form-item" pane><label class="layui-form-label">升序/降序</label><div class="layui-input-block"><input type="checkbox" value="false" lay-skin="switch" lay-filter="demo-issort" lay-text="升序|降序"></div></div><div class="layui-form-item" pane><label class="layui-form-label">排序规则</label><div class="layui-input-block"><input type="radio" name="sortType" value="1" title="月度" lay-filter="demo-sort-typel"><input type="radio" name="sortType" value="4" title="年度" lay-filter="demo-sort-typel" checked><div class="layui-bg-orange">以月度排序：年度保持不变，按月度，季度，半年度排序</div><div class="layui-bg-orange">以年度排序：月度，季度，半年度保持不变，按年度排序</div><div class="layui-bg-orange">注意：选择类别是年度，排序规则是月度的时候，升序/降序排序将不会起作用</div></div></div></form><!-- 展示数据到页面上 --><table id="tableDemo" lay-filter="tableDemo"></table>
4.3 演示使用的相关JS代码
var start = new createMonth();
let selectYear = "",selectType = 4,isCurrentMonth = false,isSort = true,sortType=4;let dataArr = [];dataArr = start.init(selectYear, selectType, isCurrentMonth, isSort,sortType);createTable();layui.use(['laydate', 'form', 'table'], function() {var laydate = layui.laydate;var form = layui.form;var table = layui.table;var tableReload = table.reload;var $ = layui.$;// 日期触发函数laydate.render({elem: '#test1', //指定元素type: 'year',format: 'yyyy', //可任意组合done: function(value, date, endDate) {//得到日期生成的值，如：2017-08-18// console.log(value);selectYear = value;dataArr = start.init(selectYear, selectType, isCurrentMonth);// console.log(dataArr);createTable();//得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}// console.log(date);}});// 监听单选框-选择类别form.on('radio(demo-radio)', function(data) {// console.log(data.elem); //得到radio原始DOM对象// console.log(data.value); //被点击的radio的value值selectType = data.value;dataArr = start.init(selectYear, selectType, isCurrentMonth, isSort,sortType);console.log(dataArr);createTable();});// 监听开关-是否开启form.on('switch(demo-checkbox-switch)', function(data) {// console.log(data.elem); //得到checkbox原始DOM对象// console.log(data.elem.checked); //开关是否开启，true或者falseisCurrentMonth = data.elem.checked;dataArr = start.init(selectYear, selectType, isCurrentMonth, isSort,sortType);console.log(dataArr);createTable();// console.log(data.value); //开关value值，也可以通过data.elem.value得到// console.log(data.othis); //得到美化后的DOM对象});form.on('switch(demo-issort)', function(data) {// console.log(data.elem); //得到checkbox原始DOM对象// console.log(data.elem.checked); //开关是否开启，true或者falseisSort = data.elem.checked;dataArr = start.init(selectYear, selectType, isCurrentMonth, isSort,sortType);console.log(dataArr);createTable();// console.log(data.value); //开关value值，也可以通过data.elem.value得到// console.log(data.othis); //得到美化后的DOM对象});form.on('radio(demo-sort-typel)', function(data) {// console.log(data.elem); //得到checkbox原始DOM对象sortType = data.value;dataArr = start.init(selectYear, selectType, isCurrentMonth, isSort,sortType);console.log(dataArr);createTable();// console.log(data.value); //开关value值，也可以通过data.elem.value得到// console.log(data.othis); //得到美化后的DOM对象});});function createTable() {layui.use('table', function() {var table = layui.table;table.render({elem: '#tableDemo',id: "demoReload",height: 600,page: true,limit: 12,data: dataArr,parseData: function(res) { //res 即为原始返回的数据console.log(res);},cols: [[ //表头{field: 'label',title: '名称',sort: true,fixed: 'left'}, {field: 'year',title: '年份',sort: true}, {field: 'typeText',title: '类型'}, {field: 'val',title: 'val值'}, {field: 'type',title: 'type值'}]]})})}
JS 通过年份获取月，季度，半年度，年度的更多相关文章
- js根据年份获取某月份有几天
function getNum(year, month) { var temp; month = parseInt(month, 10); temp = new Date(year, month, 0 ...
- js简单日期获取( 菜鸟入门基础)
关于js日期的获取要用到最基本的Date()方法获取当日的日期 var d =new Date(); //定义日期对象 var y=d.getFullYear(); //获取年 var m=d. ...
- js 根据身份证获取出生日期及性别
js根据身份证获取出生日期及性别 CreateTime--2017年6月2日11:45:16Author:Marydon 第一步:身份证号格式校验 /** * 身份证号格式校验 */ functi ...
- 整理 js 日期对象的详细功能，使用 js 日期对象获取具体日期、昨天、今天、明天、每月天数、时间戳等，以及常用的日期时间处理方法
在 javascript 中内置了一个 Date 对象,可用于实现一些日期和时间的操作. 本文整理 js 日期对象的详细功能,使用 js 日期对象获取具体日期.昨天.今天.明天.每月天数.时间戳等,以 ...
- js设置、获取单值cookie和多值cookie
js设置.获取单值cookie和多值cookie,代码如下: var CookieUtil = (function () { var Cookie = function () { // 获取单值coo ...
- js之如何获取css样式
js之如何获取css样式 一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...
- offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js 和 jquery 获取页面和滚动条的高度 视口高度文档高度
js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...
- js与jquery获取父元素,删除子元素的不同方法
var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...
- 2.Node.js access_token的获取、存储及更新
文章目录: 1.Node.js 接入微信公众平台开发 2.Node.js access_token的获取.存储及更新 一.写在前面的话 上一篇文章中,我们使用 No ...
随机推荐
- vscode中设置Python解释器
以前在设置vscode中的Python解释器时都是采用图形化选择的方式来进行的,但是不知怎么的最近这个vscode在手动选择解释器时会出现时而好用时而不好用的情况,因此这里又给出了一种通过设置work ...
- docker 常用工具
windows 下常常需要linux环境 直接安装虚拟机不方便也浪费资源 所以直接在docker下安装一个centos 然后搭建好开发环境就是个不错的办法 一.Linux 环境 1.安装centos ...
- SMU Summer 2024 Contest Round 1
SMU Summer 2024 Contest Round 1 Dice and Coin 题意 给个 n 面骰子和一枚硬币,初始投骰子,若骰子的值在 1 到 \(K-1\) 之间则反复投硬币,硬币为 ...
- 23暑假友谊赛No.2
23暑假友谊赛No.2 A-雨_23暑假友谊赛No.2 (nowcoder.com) #include <bits/stdc++.h> using namespace std; signe ...
- Codeforces Round 886 (Div. 4)
Dashboard - Codeforces Round 886 (Div. 4) - Codeforces A. To My Critics 判断任意两个大于10即可 #include <bi ...
- IE、Chrome、Firefox修改http header信息
在测试系统交互时,可能会碰到需要修改header信息的要求,下面介绍下如何在IE.Chrome.Firefox修改http header信息. 1.IE(fiddler) >在IE下修改head ...
- LVM逻辑卷创建
创建步骤 1.创建分区 2.创建PV 3.创建VG 4.创建LV 5.格式化及挂载 创建分区 使用分区工具(如fdisk等)创建LVM分区. 创建PV $ pvcreate /dev/sdb5 #将每 ...
- JavaScript – 数据类型
前言 写着 TypeScript 学习笔记, 顺便也写点 JS 的呗. 参考 JS数据类型分类和判断 阮一峰 – 数据类型 JS 数据类型 string number boolan undefined ...
- 靠着这篇笔记，我拿下了16k车载测试offer！
如何写简历 个人技能 个人技能一般不要超过10条,一般在8条内. 一.测试流程和技术 1.熟悉车载系统研发和测试流程,能独立编写各种测试文档. 2.熟悉车载系统测试用例设计思路,能独立编写仪表和车 ...
- C++ 指针动态内存分配
动态内存分配 动态内存分配:即由程序员手动的进行内存空间的分配.内存空间的释放的内存管理操作 C++代码中,变量.数组等对象的创建,是由C++自动分配内存的,称之为(自动)静态内存分配 (自动)静态内 ...