页面所有资源加载完成后

window.onload事件在页面中的所有资源（包括图片、样式表、脚本等）完全加载完成后触发

window.onload = function() {
    // 页面资源加载完成后的代码
    console.log("所有资源加载完成");
};

页面链接新窗口打开

当页面出现三方链接的情况下，点击会将原网站的内容覆盖，如果想保留原页面的窗口就可以这样操作

// 链接新窗口打开
$('.content').on('click', 'a', function (e) {
    e.target.target = '_blank'
})

返回页面顶部

// JS
document.body.scrollTop = 0
document.documentElement.scrollTop = 0

// JQ（带滚动效果）
$('.goToTop').click(function () {
  $('html , body').animate({scrollTop: 0}, 'slow');
})

动态设置网页标题

document.title = '首页'

页面上下滚动事件

var scrollFunc = function (e) {
  e = e || window.event;
  if (e.wheelDelta) { //第一步：先判断浏览器IE，谷歌滑轮事件
    if (e.wheelDelta > 0) { //当滑轮向上滚动时
      console.log("滑轮向上滚动");
    }
    if (e.wheelDelta < 0) { //当滑轮向下滚动时
      console.log("滑轮向下滚动");
    }
  } else if (e.detail) { //Firefox滑轮事件
    if (e.detail > 0) { //当滑轮向上滚动时
      console.log("滑轮向上滚动");
    }
    if (e.detail < 0) { //当滑轮向下滚动时
      console.log("滑轮向下滚动");
    }
  }
}
//给页面绑定滑轮滚动事件
if (document.addEventListener) {//firefox
  document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滚动滑轮触发scrollFunc方法 //ie 谷歌
window.onmousewheel = document.onmousewheel = scrollFunc;

filter过滤

let arr = [1, 1, 2]
arr = arr.filter(item => {
  return item != 1
})

数组转字符

var a = [1,2,3]
a.join('').toString()) // 自定义拼接，结果：123
a.join('-').toString()) // 自定义拼接，结果：1-2-3

全屏

// 全屏
$('#full').on('click', function () {
  if (document.fullscreenElement) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  } else {
    var de = document.documentElement;
    if (de.requestFullscreen) {
      de.requestFullscreen();
    } else if (de.mozRequestFullScreen) {
      de.mozRequestFullScreen();
    } else if (de.webkitRequestFullScreen) {
      de.webkitRequestFullScreen();
    } else if (de.msRequestFullscreen) {
      de.msRequestFullscreen();
    }
    else {
      wtx.info("当前浏览器不支持全屏！");
    }
  }
})

下载视频

function videoDownload(filePath, fileName) {
  const a = document.createElement('a');
  document.body.append(a);
  a.style.display = 'none';
  a.href = filePath
  a.download = fileName;
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
  }, 300);
}

对象数组排序

allArticleArray.sort(function(a, b) {
  return b.time - a.time
})

js三种弹窗

浏览器自带对象

// 提示框
alert('提示内容')
// 确认框，返回布尔值
confirm('文字提示')
// 输入框（第二个参数可选）
var name = prompt('新的分类名称', oldName)

操作URL

// 发起GET请求
window.location.href = '/hello'
// 刷新本页（可以保存URL中的参数刷新）
window.location.reload()
// 返回上一页
window.history.back()
// 获取上一页URL（含有上一页面的参数）
document.referrer
// 更改URL不刷新
window.history.pushState({}, 0,  window.location.href + '?type=china');

解析地址栏参数

// 解析参数
function getQuery(url) {
  // result为存储参数键值的集合
  const result = {}
  if (url.indexOf('?') > -1) {
    // str为？之后的参数部分字符串
    const str = url.substr(url.indexOf('?') + 1)
    // arr每个元素都是完整的参数键值
    const arr = str.split('&')
    for (let i = 0; i < arr.length; i++) {
      // item的两个元素分别为参数名和参数值
      const item = arr[i].split('=')
      result[item[0]] = item[1]
    }
  }
  return result
}

NodeJS实现Sleep休眠

function sleep(ms) {
    return new Promise(resolve=>setTimeout(resolve, ms))
}
async function main() {
    console.log(1)
    await sleep(1500)
    console.log(2)
}
main()

原生事件

document.querySelector('.btn').addEventListener('click', function() {
})

事件类型：

鼠标事件
- click：鼠标点击
- mouseEnter：鼠标经过
- mouseLeave：鼠标离开
焦点事件
- focus：获得焦点
- blur：失去焦点
键盘事件
- keyDown：键盘按下触发
- keyUp：键盘弹起触发
文本事件表单输入触发
- input：用户输入事件（获取输入数据：input.value）

获取所有子元素

document.querySelector('.editor').childNodes

Yaml插件

Js读取和加载Yaml文件

npm inastall yamljs

const yaml = require('yamljs')
let config = yaml.load('../config.yaml')
console.log(config);

第二种插件下载地址：https://www.bootcdn.cn/js-yaml/

let fs = require('fs')
let yaml = require('./lib/js-yaml.min')
// 加载配置文件
const config = yaml.load(fs.readFileSync('config.yml', 'utf8'));
console.log(config);

富文本编辑器

可输入实现

给某个div添加contenteditable="true"属性

粘贴纯文本

给容器添加样式进行控制

-webkit-user-modify: read-write-plaintext-only;

注意：实验发现设置该属性后，容器中的输入都是单行文字，没有被div包裹

第一行没有div包裹问题

<div class="box" contenteditable="true"><div id=""><br></div></div>

编辑器推荐字体

font-family: Consolas, "Courier New", "Microsoft Yahei", monospace;

获取当前日期时间串

new Date().toISOString().slice(0, 10)