js,html,css笔记，web非常实用的api

1._.omit

删除某一个对象中的属性 返回新对象_.omit(obj,'属性A','属性B')

2.URLSearchParams

假设浏览器的url参数是 "?name=蜘蛛侠&age=16"

new URLSearchParams(location.search).get("name"); // 蜘蛛侠

3.contenteditable

可以使一个元素可以被用户编辑：

<p contenteditable>编辑我吧</p> 

 

4.classList

这是一个对象，该对象里封装了许多操作元素类名的方法：

<p class="title"></p>

let elem = document.querySelector("p");

// 增加类名

elem.classList.add("title-new"); // "title title-new" //

删除类名

elem.classList.remove("title"); // "title-new" //

切换类名（有则删、无则增，常用于一些切换操作，如显示/隐藏）

elem.classList.toggle("title"); // "title-new title" //

替换类名 elem.classList.replace("title", "title-old"); // "title-new title-old" //

是否包含指定类名 elem.classList.contains("title"); // false

 5.getBoundingClientRect

可以获取指定元素在当前页面的空间信息：

elem.getBoundingClientRect();

// 返回 { x: 604.875, y: 1312, width: 701.625, height: 31, top: 1312, right: 1306.5, bottom: 1343, left: 604.875 }

6.contains

可以判断指定元素是否包含了指定的子元素：

<div> <p></p> </div> 

 document.querySelector("div").contains(document.querySelector("p")); // true

7.online state

监听当前的网络状态变动，然后执行对应的方法

 window.addEventListener("online", xxx);

 window.addEventListener("offline", () => { alert("你断网啦！"); });

pc端效果

移动端效果如下：

8.battery state

获取设备的电池状态：

navigator.getBattery().then(battery => console.log(battery));

// 返回

{ charging, // 是否在充电

chargingTime, // 充满电所需时间

dischargingTime, // 当前电量可使用时间 level, 剩余电量

onchargingchange, // 监听充电状态变化

onchargingtimechange, // 监听充满电所需时间变化

ondischargingtimechange, // 监听当前电量可使用时间变化

onlevelchange // 监听电量变化 }

 

9.vibration

使设备进行震动：

// 震动一次

navigator.vibrate(100);

// 连续震动，震动200ms、暂停100ms、震动300ms

navigator.vibrate([200, 100, 300]); 

10.page visibility

顾名思义，这个API是用来监听页面可见性变化的，在PC端标签栏切换、最小化会触发、在移动端程序切到后台会触发，简单说就是页面消失了?‍♂️

document.addEventListener("visibilitychange", () => { console.log(`页面可见性：${document.visibilityState}`); }); 

pc端效果

移动端效果

使用场景：当程序切到后台的时候，如果当前有视频播放或者一些动画执行，可以先暂停

11.deviceOrientation

陀螺仪，也就是设备的方向，又名重力感应，该API在IOS设备上失效的解决办法，将域名协议改成https；

从左到右分别为alpha、beta、gamma;

window.addEventListener("deviceorientation", event => {

let { alpha, beta, gamma } = event;

console.log(`alpha：${alpha}`);

console.log(`beta：${beta}`);

console.log(`gamma：${gamma}`);

});

使用场景：页面上的某些元素需要根据手机摆动进行移动，达到视差的效果，比如王者荣耀进入游戏的那个界面，手机转动背景图会跟着动

12.toDataURL

将画布的内容转换成一个base64的图片地址

let canvas = document.querySelector("canvas");

let context = canvas.getContext("2d"); // 画东西 

let url = canvas.toDataURL("image/png"); // 将画布内容转换成base64地址

使用a标签进行图片下载时，图片链接跨域（图片是我的掘金头像），无法进行下载而是进行图片预览：

<img src="xxx"> <button> <a href="xxx" download="avatar">下载图片</a> </button> 

封装以下代码便可解决

const downloadImage = (url, name) => {

// 实例化画布

let canvas = document.createElement("canvas");

let context = canvas.getContext("2d");

// 实例化一个图片对象

let image = new Image();

image.crossOrigin = "Anonymous";

image.src = url;

// 当图片加载完毕

image.onload = () => {

// 将图片画在画布上

canvas.height = image.height;

canvas.width = image.width; context.drawImage(image, 0, 0);

// 将画布的内容转换成base64地址

let dataURL = canvas.toDataURL("image/png");

// 创建a标签模拟点击进行下载

let a = document.createElement("a");

a.hidden = true;

a.href = dataURL;

a.download = name;

document.body.appendChild(a); a.click(); } }

 

效果如下

13.customEvent

自定义事件，就跟vue里面的on跟emit一样；

监听自定义事件：

window.addEventListener("follow", event => {

console.log(event.detail);

// 输出

{name: "前端宇宙情报局"} });

派发自定义事件

window.dispatchEvent(new CustomEvent("follow", {

detail: { name: "前端宇宙情报局" } })); 

14.notification

PC端的桌面通知，如网页端的微信，当收到消息时，右下角会出现一个通知（尽管你把浏览器最小化），因为这个通知时独立于浏览器的，是系统的一个原生控件

const notice = new Notification("前端宇宙情报局", {

body: "这20个不常用的Web API真的有用吗?，别问，问就是有用?",

icon: "我的掘金头像",

data: { url: "https://www.baidu.com" }

});

// 点击回调

notice.onclick = () => {

window.open(notice.data.url); // 当用户点击通知时，在浏览器打开百度网站 }

效果如下

想要成功的调起通知，首先要用户的授权

Notification.requestPermission(prem => {

prem == "granted" // 同意

prem == "denied" // 拒绝

})

所以，再调用之前先向用户发起请求：

let permission = Notification.permission;

if (permission == "granted") { // 已同意，开始发送通知

...

} else if (permission == "denied") {

// 不同意，发不了咯

} else { // 其他状态，可以重新发送授权提示

Notification.requestPermission(); }

 

 15.orientation

可以监听用户手机设备的旋转方向变化

window.addEventListener("orientationchange", () => {

document.body.innerHTML += `<p>屏幕旋转后的角度值：${window.orientation}</p>`;

}, false);

效果如下

也可以使用css的媒体查询：

/* 竖屏时样式 */

@media all and (orientation: portrait) {

body::after { content: "竖屏" }

}

/* 横屏时样式 */

@media all and (orientation: landscape) {

body::after { content: "横屏" }

}

使用场景：页面需要用户开启横屏来获得更好的体验，如王者荣耀里面的活动页