charles定位生产问题方法 charles定位生产问题方法：1、remote。将问题页面代理到本地的服务2、rewrite。给问题页面注入vconsole ![在这里插入图片描述](https://img-blog.csdnimg.cn/6e6adcf18af3475abef872a20c74ff72.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5byx6bih5aaC5oiR,size_20,col
手撕Promise 手撕Promise整体代码/** * @description: 手撕promise * @version: V1.0 * @date: 2021-06-22 * @author: ✨dlCai✨ */export default class MyPromise extends Object { // 三种状态 static PENDING = "pending"; static RESOLVED = "resolved"; static REJECTED = "rej
问题探究: 图片居中，大小自适应 一<html><body> <div class="border"> <div class="img-border"> <img src="https://picsum.photos/1200/900" alt=""> </div> </div> <style> .img-border { width: 80%; height: 8
18、使用reduce进行时间累加 目标一个包含多个列表项的无序列表元素，每一个列表项均添加了data-time属性，该属性用分和秒表示了时间。要求将所有的时间累加在一起，并用时:分:秒来表示计算的结果。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Videos</title></head><body> <div id=
17、数组的去前缀排序 目的为这些字符串排序，要求去除字符串中的The，A以及An的前缀后再进行排序，并把排序后的结果作为列表项展示在无序列表中。过程1.声明去前缀函数，使用String.replace()函数实现，第一参数使用字面量正则表达式。function delPrefix(item){ return item.replace(/^(The|A|An)\s{1}/,'');}2.使用Array.sort()对数组进行排序，将数组中逐项使用delPrefix()去掉前缀后再进行对比。var sorte
emoji标志符号 基础表情：????????????????????????????????????????????????????????☺️????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????☹️???????????????????????????????????????????????
16、阴影跟随鼠标移动 效果关键text-shadow样式为标准CSS3样式，用于添加一个或多个文字阴影，用于其的语法格式为：text-shadow: h-shadow v-shadow blur color代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Mouse Shadow</title></head><body
15、 LocalStorage 效果知识点Eventevent.preventDefaulteventTarget.addEventListenerlocalStoragelocalStorage.setItem()localStorage.getItem()JSONJSON.stringify()JSON.parse()过程指南默认情况下，在表单空间拥有焦点时按下 Enter 键或者点击提交按钮，会提交表单，提交时，浏览器会在发送请求给服务器之前触发 submit 事件，为了验证这个行
14、赋值、浅拷贝、深拷贝 区别首先从 String、Number、Boolean 类型的值开始。let age = 100;let age2 = age;console.log(age, age2); // 100 100age = 200;console.log(age, age2); // 200 100先声明了一个 Number 型的变量 age，并将此变量赋值给另一个变量 age2，这时两个变量的值都是 100。然后赋给 age 新的值，可见对 age 的修改并不会对 age2 造成影响。那对于
13、html页面展示区域的位置参数 图片随屏幕滚动而滑入滑出效果要点涉及控制图片的 CSS 属性：translateX 来控制左右移动scale 来控制缩放涉及页面尺寸的属性：window.scrollY 文档从顶部开始滚动过的像素值window.innerHeight viewport 部分的高度ele.height 元素的高度ele.offsetTop 当前元素顶部相对于其 offsetParent 元素的顶部的距离。debounce 的作用：降低事件监听的频率，使用了 Lodash 中的 debounc
12、暗号：键盘输入匹配 效果代码从 Cornify.com 加载一个 JS 文件，调用其中的 cornify_add() 方法时，会在页面中追加 p 标签，并在 DOM 中插入一个图标。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Key Detection</title> <script type="text/javascript" sr
11、自定义视频播放器html video 效果要点播放/暂停功能实现视频最主要的功能自然就是播放和暂停了，而且其他功能也需要视频播放之后才能看出效果，所以我们先来实现这个功能。video 对象有一个叫 paused 的属性来判断视频是否在播放；另外还提供了两个方法来进行播放和暂停的操作：.play() 方法可以播放视频，.pause() 方法暂停播放那么只需要在点击的视频的时候进行这两个操作就可以了，我们可以写一个 togglePlay 方法，根据视频的播放状态来判断该执行哪个：function togglePlay() {
10、Checkbox Input 多选 效果要点首获取到的 <input> 组转化为数组，针对每次操作，获取 A 和 B，利用 indexOf() 来获得 A 和 B 在数组中的索引值，由此即可确定范围，并能通过 slice() 来直接截取 A-B 的所有 DOM 元素，并进行状态改变的操作，而变量 onOff 表示 A-B 范围内的状态，true 表示选中，false 表示取消选中。转换 Nodelist 为数组const boxs = document.querySelectorAll('.inbox input[t
9、console调试技巧 效果给页面标签添加断点在按 F12 出现的 Chrome 开发工具中，在 Elements 选项卡之中，选择页面的某个标签（以 <p>为例），右键 → Break on → Attributes modifications。即可为该元素添加断点，当它的属性发生改变时，会自动定位到页面代码中的对应行。如此设置之后，点击页面中的文字试一试效果。.log 的更多用法这个是最常用的，但它还有一些更多功能：比如参数支持类似 C 语言的字符串替换模式。%s 字符串%d 整数%f 浮点值
8、HTML5 Canvas 彩虹绘画板 效果涉及特性Canvas：基本属性getContext()strokeStylefillStylelineCaplineJoin路径绘制beginPath()lineTo()moveTo()鼠标事件处理：mousemovemousedownmouseupmouseout要点Canvas首先需要了解最基本的 Canvas 用法，创建一个可以绘画的环境，由对某个元素获取其用于渲染的上下文开始：var canvas = document.getEle
7、js数组方法some、every、find、findIndex、slice、splice 要点：some 和 every两者的相同之处是，都接受一个函数作为参数，对数组元素都执行一次此函数，都不会改变原数组的值。不同之处在于返回条件不同：some() 中直到某个数组元素使此函数为 true，就立即返回 true。所以可以用来判断一个数组中，是否存在某个符合条件的值。 const isAdult = people.some( person => { const currentYear = (new Date()).getFullYear(); return curre
添加千分符 正则表达式/\B(?=(\d{3})+(?!\d))/解释 效果代码const numberWithCommas = (x) => { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}解释1、元字符\B我们先把这个表达式的主要结构拆分出来：/\B(?=)/，在这个表达式里面，除了\B以外的部分都不属于匹配结果（matchresult），也就是说，整个表达式里，真正参与最后的匹配到替换成,的是前面的这个\B。如果之前没接触过\B或\b的话可能会疑惑，为什么可以用这个r
6、Fetch 结合 filter 实现快速匹配 涉及特性Promisefetch()then()json()Arrayfilter()map()push()join()Spread syntax 扩展语句RegExpmatch()replace()效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Type Ahead ????<
关注
