HTML&JS笔记

一、js数组操作

    1、删除某一项
        splice(index,len,[item]);该方法会改变原始数组
        var arr = ['a','b','c','d'];
        arr.splice(1,1); // ['a','c','d']
        arr.splice(1,1,'0'); // ['a','0','c','d']
        arr.splice(1,2,'0'); // ['a','0','d']
        arr.splice(1,0,'0'); // ['a','0','b','c','d']
        delete arr[1];// ['a',undefined,'c','d']

二、取整取余操作

    parseInt(5/2); // 2 丢弃小数部分
    Math.ceil(5/2); // 3 向上取整，有小数就将整数部分加1
    Math.floor(5/2); // 2 向下取整，丢弃小数部分
    Math.round(5/2) // 3 四舍五入
    6%4; // 2 取余

三、iframe 加载完成处理

var iframe = document.createElement("iframe");
iframe.src = "https://";

if (iframe.attachEvent){
  iframe.attachEvent("onload", function(){
  alert("Iframe is now loaded.");
});
} else {
  iframe.onload = function(){
    alert("Iframe is now loaded.");
  };
}

document.body.appendChild(iframe);

四、常用插件

    QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
    Highlight.js 是一个代码高亮显示插件，可根据不同的编程语音和编程工具显示代码

五、跳出循环

[1,2,3,4,5].forEach(item => {
    if (item === 3) {
        return; // 跳出本次循环继续执行，终止需要使用throw new Error('error')
    }
    console.log(item);
});
// 输出 1 2 4 5

for (var i = 1; i <= 5; i++) {
    if (item === 3) {
        return false;
    }
    console.log(i);
}
console.log('end'); // 未执行
// 输出 1 2

for (var i = 1; i <= 5; i++) {
    if (item === 3) {
        break;
    }
    console.log(i);
}
console.log('end');
// 输出 1 2 end

for (var i = 1; i <= 5; i++) {
    if (i === 3) {
        continue;
    }
    console.log(i);
}
console.log('end');
// 输出 1 2 4 5 end

aa:for (var i = 1; i <= 5; i++) {
    for (var ii = 1; ii <= 5; ii++) {
        if (ii === 3) {
        break aa;
        }
        console.log('ii',ii);
    }
    console.log('i',i);
}
console.log('end');
// 输出 'ii 1' 'ii 2' 'end'

六、字符串日期转换

    yyyyMMdd转yyyy-MM-dd：'20240101'.replace(/^(\d{4})(\d{2})(\d{2})$/, "$1-$2-$3");
    yyyyMMddHHmmss转yyyy-MM-dd HH:mm:ss：'20240101000000'.replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/, "$1-$2-$3 $4:$5:$6");

七、日期操作

// 本周开始和结束
let firstDayOfWeek = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() - currentDate.getDay() + 1);
let lastDayOfWeek = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + (7 - currentDate.getDay()))
// 本月开始和结束
let start = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
let end = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);				
// 获取最近3个月的开始和结束 dayStr(yyyy-MM-dd)
get3MonthDay(dayStr) {
  let end = new Date(dayStr);
  let year = end.getFullYear();
  let month = end.getMonth() + 1; // 0-11表示1-12月
  let day = end.getDate();
  let dateObj = {};
  dateObj.end = year + '-' + month + '-' + day;
  let endMonthDay = new Date(year, month, 0).getDate(); // 当前月的总天数
  if (month - 3 <= 0) { // 如果是1、2、3月，年数往前推一年
    var start3MonthDay = new Date((year - 1), (12 - (3 - parseInt(month))), 0).getDate(); //3个月前所在月的总天数
    if (start3MonthDay < day) { // 3个月前所在月的总天数小于现在的天日期
      dateObj.start = (year - 1) + '-' + (12 - (3 - month)) + '-' + start3MonthDay;
    } else {
      dateObj.start = (year - 1) + '-' + (12 - (3 - month)) + '-' + day;
    }
  } else {
    var start3MonthDay = new Date(year, (parseInt(month) - 3), 0).getDate(); // 3个月前所在月的总天数
    if (start3MonthDay < day) { // 3个月前所在月的总天数小于现在的天日期
      if (day < endMonthDay) { // 当前天日期小于当前月总天数,2月份比较特殊的月份
        dateObj.start = year + '-' + (month - 3) + '-' + (start3MonthDay - (endMonthDay - day));
      } else {
        dateObj.start = year + '-' + (month - 3) + '-' + start3MonthDay;
      }
    } else {
      dateObj.start = year + '-' + (month - 3) + '-' + day;
    }
  }
  return dateObj;
}

八、页面离开和显示事件visibilitychange

// 当需要判断页面重新显示时(比如从A页面切换tab标签到B页面再回来时)可以监听这个事件来进行相应的操作，比如stompjs在tab标签后台运行时会断开连接那么就需要重新进入时重新进行连接
window.addEventListener("visibilitychange", () => {
    console.log("page is visible/hide:" + document.visibilityState)
	if (document.visibilityState === 'visible') {}
})