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 ...
随机推荐
- Gitee官网大规模封禁开源项目，如想解禁则需手动提交审核，在此过程中一些项目的信息也被gitee官方修改！！！
由于美国政府对中国的各种打压和制裁,为了支持国产软件我已经将GitHub上的大多数代码库迁移到了gitee上,虽然我的开源库基本都是个人学习时候的一些代码并不是什么成品项目代码,但是不管力量大小也都支 ...
- 关于我升级VS16.8，结果一些项目运行报错“Phx.FatalError”这件事
背景 不知道啥时候开始,一些的项目不能好好运行了.一运行就报错 解决办法 https://developercommunity.visualstudio.com/content/problem/125 ...
- 代码随想录Day9
KMP算法 主要用来进行字符串匹配 KMP的主要思想是当出现字符串不匹配时,可以知道一部分之前已经匹配的文本内容,可以利用这些信息避免从头再去做匹配了. 所以如何记录已经匹配的文本内容,是KMP的重点 ...
- CryptoHouse：由 ClickHouse 和 Goldsky 支持的免费区块链分析服务(ClickHouse 博客)
我们很高兴地宣布 CryptoHouse,在 crypto.clickhouse.com 上可访问,这是一个由 ClickHouse 提供支持的免费区块链分析服务. https://crypto.cl ...
- MFC的CBitmapButton的使用指南
注意:此按钮使用前应该将按钮的属性:Owner Draw->True 注意:此按钮使用前应该将按钮的属性:Owner Draw->True 注意:此按钮使用前应该将按钮的属性:Owner ...
- zuul集成apollo动态刷新配置
zuul集成apollo实现路由配置的动态刷新 import com.ctrip.framework.apollo.model.ConfigChangeEvent; import com.ctrip. ...
- Maven经验分享（五）Maven拷贝资源
上一章介绍使用ant拷贝资源,这里介绍maven拷贝资源,使用maven-resources-plugin插件. <plugin> <groupId>org.apache.ma ...
- armbian挂载sd卡记录
mkdir -p /mnt/mmctouch /etc/init.d/mount.shvim /etc/init.d/mount.sh内容见图mount /dev/mmcblk1p1 /mnt/mm ...
- Semantic Kernel/C#：一种通用的Function Calling方法，文末附经测试可用的大模型
Funcion Calling介绍 函数调用允许您将模型如gpt-4o与外部工具和系统连接起来.这对于许多事情都很有用,比如为AI助手赋能,或者在你的应用程序与模型之间建立深度集成. 如果您了解或者使 ...
- 2024 NepCTF
NepCTF NepMagic -- CheckIn 直接玩游戏就能出 注意有一关要把隐藏的方块全找到 NepCamera 先使用tshark读取数据 结果文件中发现大量jpeg头ffd8ffe0. ...