- 博客(51)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 charles定位生产问题方法
charles定位生产问题方法：1、remote。将问题页面代理到本地的服务2、rewrite。给问题页面注入vconsole 
480
原创 手撕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
2021-06-22 15:11:54
264
原创 问题探究: 图片居中，大小自适应
一<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
2020-09-25 15:09:21
530
1
原创 18、使用reduce进行时间累加
目标一个包含多个列表项的无序列表元素，每一个列表项均添加了data-time属性，该属性用分和秒表示了时间。要求将所有的时间累加在一起，并用时:分:秒来表示计算的结果。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Videos</title></head><body> <div id=
2020-09-25 11:03:10
544
原创 17、数组的去前缀排序
目的为这些字符串排序，要求去除字符串中的The，A以及An的前缀后再进行排序，并把排序后的结果作为列表项展示在无序列表中。过程1.声明去前缀函数，使用String.replace()函数实现，第一参数使用字面量正则表达式。function delPrefix(item){ return item.replace(/^(The|A|An)\s{1}/,'');}2.使用Array.sort()对数组进行排序，将数组中逐项使用delPrefix()去掉前缀后再进行对比。var sorte
2020-09-25 09:56:27
273
原创 emoji标志符号
基础表情：????????????????????????????????????????????????????????☺️????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????☹️???????????????????????????????????????????????
2020-09-25 09:43:02
4917
原创 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
2020-09-24 18:52:01
356
原创 15、 LocalStorage
效果知识点Eventevent.preventDefaulteventTarget.addEventListenerlocalStoragelocalStorage.setItem()localStorage.getItem()JSONJSON.stringify()JSON.parse()过程指南默认情况下，在表单空间拥有焦点时按下 Enter 键或者点击提交按钮，会提交表单，提交时，浏览器会在发送请求给服务器之前触发 submit 事件，为了验证这个行
2020-09-17 11:47:10
197
原创 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 造成影响。那对于
2020-09-17 11:08:37
132
原创 13、html页面展示区域的位置参数
图片随屏幕滚动而滑入滑出效果要点涉及控制图片的 CSS 属性：translateX 来控制左右移动scale 来控制缩放涉及页面尺寸的属性：window.scrollY 文档从顶部开始滚动过的像素值window.innerHeight viewport 部分的高度ele.height 元素的高度ele.offsetTop 当前元素顶部相对于其 offsetParent 元素的顶部的距离。debounce 的作用：降低事件监听的频率，使用了 Lodash 中的 debounc
2020-09-11 10:29:48
640
原创 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
2020-09-10 15:18:10
693
原创 11、自定义视频播放器html video
效果要点播放/暂停功能实现视频最主要的功能自然就是播放和暂停了，而且其他功能也需要视频播放之后才能看出效果，所以我们先来实现这个功能。video 对象有一个叫 paused 的属性来判断视频是否在播放；另外还提供了两个方法来进行播放和暂停的操作：.play() 方法可以播放视频，.pause() 方法暂停播放那么只需要在点击的视频的时候进行这两个操作就可以了，我们可以写一个 togglePlay 方法，根据视频的播放状态来判断该执行哪个：function togglePlay() {
2020-09-10 11:48:07
1569
1
原创 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
2020-09-10 09:48:50
921
原创 9、console调试技巧
效果给页面标签添加断点在按 F12 出现的 Chrome 开发工具中，在 Elements 选项卡之中，选择页面的某个标签（以 <p>为例），右键 → Break on → Attributes modifications。即可为该元素添加断点，当它的属性发生改变时，会自动定位到页面代码中的对应行。如此设置之后，点击页面中的文字试一试效果。.log 的更多用法这个是最常用的，但它还有一些更多功能：比如参数支持类似 C 语言的字符串替换模式。%s 字符串%d 整数%f 浮点值
2020-09-09 16:33:03
660
原创 8、HTML5 Canvas 彩虹绘画板
效果涉及特性Canvas：基本属性getContext()strokeStylefillStylelineCaplineJoin路径绘制beginPath()lineTo()moveTo()鼠标事件处理：mousemovemousedownmouseupmouseout要点Canvas首先需要了解最基本的 Canvas 用法，创建一个可以绘画的环境，由对某个元素获取其用于渲染的上下文开始：var canvas = document.getEle
2020-09-09 16:05:07
800
原创 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
2020-09-09 15:02:13
781
转载 添加千分符 正则表达式/\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
2020-09-09 11:28:13
2341
原创 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 ????<
2020-09-09 11:00:31
282
原创 5、可伸缩的图片墙
涉及特性display: flexflex-directionjustify-contentalign-itemstransform: translateX/translateYelement.classList.toggle()transitionend 事件效果：CSS 部分CSS 在这个过程中占了重点，运用 flex 可以使各个元素按一定比例占据页面。在调试的时候，可以把边框显示出来方便查看效果。（border: 1px solid #f00;）将 .panels
2020-09-08 17:40:11
190
原创 4、js数组方法Map、fileter、reduce、sort
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Array Cardio ????</title></head><body> <p><em>Psst: have a look at the JavaScript Console</em> ????</p&g
2020-09-08 15:20:23
650
原创 3、图片+动态样式
知识点：:rootvar(--xxx)：CSS 变量（CSS Variables）filter: blur()事件 change、mousemove效果JS 实时更新 CSS 值获取页面中 input 元素给每个 input 添加监听事件，使其在值变动，触发更新操作同 2 ，添加鼠标滑过时的事件监听编写处理更新操作的方法获取参数值后缀获取参数名（blur、spacing、color）获取参数值（12px、#efefef）赋值给对应的 CSS 变量
2020-09-07 19:11:00
175
原创 2、Css、js写时钟
技术点css3 transform元素添加<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS + CSS Clock</title></head><body> <div class="clock"> <div class="clock-face">
2020-09-04 16:40:51
175
原创 JavaScript异步解决方案----Promise与Await
文章目录前言1.Promise的原理2.Promise的基本语法3、Promise常用方法4、Async/Await简介与用法- Async/Await简介- Async/Await的用法5、Async/Await错误处理6、为什么Async/Await更好？前言异步编程模式在前端开发过程中，显得越来越重要。从最开始的XHR到封装后的Ajax都在试图解决异步编程过程中的问题。随着ES6新标准的...
2020-09-04 11:00:39
353
原创 学习《JavaScript高级程序设计》（二）
JS基本概念语法大小写敏感标识符：第一个是字母、下划线、美元符号，其他可以是字母、下划线、美元符号、数字。注释：//单行 /* *多 *行 */ 严格模式：strict mode,这是一个编译指示，告诉javascript引擎切换到严格模式。funtion doSomething(){"use strict";//其他}...
2020-09-04 11:00:15
133
原创 Python网络爬虫与信息提取
目录标题Python网络爬虫与信息提取requests库Robots协议Beautiful soup 库Python网络爬虫与信息提取requests库try: r = requests.get(url,timeout=30) r.raise_for_status()#没有200将产生异常 r.encoding = r.apparent_encoding #解码方式的获取和解码 re...
2020-09-04 10:59:46
189
转载 XSS与CSRF 介绍和防范
XSS：跨站脚本（Cross-site scripting，通常简称为XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。通过客户端脚本语言（最常见如：JavaScript）在一个论坛发帖中发布一段恶意的JavaScript代码就是脚本注入，如果这个代码内容有请求外部服务...
2020-09-04 10:59:08
282
转载 前端跨域解决方案
一、跨域：是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。如果两个页面拥有相同的协议（protocol），端口（如果指定），和主机，那么这两个页面就属于同一个源（origin），JavaScript 允许这种同源页面的数据互相通信。值得关注的是， 跨域并非浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但返回结果被浏览器拦截了。 最好的例子是CSRF跨站攻击原理，...
2020-09-04 10:58:51
183
原创 前端学习历程
问题console.log(([])?true:false);console.log(([]==false?true:false));
2020-09-04 10:58:21
114
原创 1、键盘+音乐
关键技术：元素获取；键盘、transitionend监听；类的添加、删除<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS Drum Kit</title> <link rel="stylesheet" href="style.css"></head><body> &l
2020-09-04 10:52:41
287
1
原创 Flask+uwgis+nginx 部署python后台
毕设项目，需要用到一个图片对比识别的python后台端口，需要让python代码持续运行在阿里云服务器上。之前用tomcat, 也没用过nginx, 同时Flask半吊子，百度学习了一下，机缘巧合之下5个小时搞定了。下面是我的过程：文章目录端口开放文件路径nginx的安装路径：/usr/local/nginx/它配置文件路径： /usr/local/nginx/conf/nginx.conf1...
2020-04-08 00:33:29
616
原创 阿里云端口配置
阿里云控制台开放端口服务器防火墙开放对应端口开放端口的方法：方法一：命令行方式1. 开放端口命令： /sbin/iptables -I INPUT -p tcp --dport 8080 -j ACCEPT2.保存：/etc/rc.d/init.d/iptables save3.重启服务：/etc/init.d/iptables restart4.查看端口是否开放：/sbin/ipt...
2020-04-08 00:10:44
672
原创 visual studio code js模板
JavaScript 在 vscode代码模板设置文章目录JavaScript 在 vscode代码模板设置一、配置1、vscode2、模板3、在js文件试用:二、Snippets语法简介一、配置1、vscode选择“文件”-“首选项”-“用户代码片段”，在弹出框选择对应的配置文件。(此处是javascript.json)2、模板写如下模板，保存。prefix是命令关键字，在js...
2020-03-18 22:14:59
1964
原创 http请求和响应的一些总结
HTTP请求报文解剖：由3部分组成（请求行+请求头+请求体）：实际的请求报文：①是请求方法，GET和POST是最常见的HTTP方法，除此以外还包括DELETE、HEAD、OPTIONS、PUT、TRACE。不过，当前的大多数浏览器只支持GET和POST，Spring 3.0提供了一个HiddenHttpMethodFilter，允许你通过“_method”的表单参数指定这些特殊的HTTP方法...
2019-11-07 10:28:10
1001
转载 https解析
本文主要是对HTTPS做一个总结，主要讲解HTTPS的实质、HTTPS加密原理、HTTPS的通信过程等。1、HTTP存在问题:由于HTTP协议过于简单：通信使用明文（不加密），内容可能会被窃听。不验证通信方的身份，因此可能遭遇伪装。无法验证报文的完整性，所以有可能已遭篡改。2、HTTPS的实质。HTTP加上加密处理、认证机制、以及完整性保护后的就是HTTPS。需要知道的是，HT...
2019-11-07 09:39:10
417
原创 vue 的简介 MVVM和虚拟DOM
1、渐进式框架VueVue是构建用户界面的渐进式框架，只关注视图层（view）；2、vue中两个核心点响应的数据绑定(双向绑定):当数据发生改变，自动更新视图。内部利用Object.definedProperty中的setter/getter代理数据，监控对数据的操作。由于Object.definedProperty不兼容IE8浏览器，所以Vue不兼容IE8及以下浏览器。组合的视图组件：...
2019-10-13 09:03:22
1366
原创 cookie使用
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookiehttps://www.cnblogs.com/darren_code/archive/2011/11/24/cookie.htmlhttps://www.runoob.com/js/js-cookies.html
2019-10-13 08:12:02
591
转载 vue数据双向绑定原理
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的数据劫持vue初始化数据上的对象：var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); }})...
2019-10-09 17:38:21
290
原创 JavaScript技术总结-node.js的区别
Javascript是一种web前端语言，主要用于web开发中，由浏览器解析执行Node.js是一个可以快速构建网络服务及应用的平台，是用Javascript语言构建的服务平台，可用于后端建立服务器他们都用的是js语法，前者主要应用前端后者主要应用与后端node.js和javascript区别还是挺大的，1个平台，1个是编程语言；javascript是客户端编程语言，需要浏览器...
2019-10-09 15:04:38
385
工科数学分析第三版下册课后答案
2018-09-04
数据库系统概念_第六版_答案
2018-09-04
操作系统题目与答案
2018-09-04
计算机网络试卷
2018-09-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人