技术
文章平均质量分 87
一笑程序猴
工欲善其事,必先利其器
展开
-
Chrome插件 - 基于chrome API + RecorderRTC.js实现chrome浏览器右键菜单屏幕录制并保存下载功能
主要技术点chrome 插件(扩展)开发。关于chrome插件开发可参考另一篇文章:chrome扩展-打造个性化的web页面chrome API相关功能,主要用到添加右键菜单功能RecordRTC.js插件缺点无法录制声音由于编码格式,一些播放器无法播放,可以在网页中或者腾讯视频中播放chrome插件在任意位置新建一个文件夹,文件夹名称可以任意命名,如:screencapture进入到该文件夹中并新增3/4个文件,一个html文件,一个json配置文件,一或两个js文件原创 2021-07-26 16:52:33 · 4642 阅读 · 1 评论 -
2020-10-19前端学习笔记 - CSS3的新特性
CSS3的新特性属性选择器属性选择器可以根据元素特定属性来选择元素,这样就可以不用借助于类或者id选择器了选择符简介E[attr]选择具有attr属性的E元素E[attr=‘val’]选择具有attr属性且属性值等于val的E元素E[attr^=‘val’]匹配具有attr属性且属性值以val开头的E元素E[attr$=‘val’]匹配具有attr的属性且属性值以val结尾的E元素E[attr*=‘val’]匹配具有attr属性且属性值中包含v原创 2020-10-23 00:44:01 · 5554 阅读 · 0 评论 -
HTML+CSS flex弹性布局
flex布局原理flex是flexible box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。当我们为父盒子设置为flex布局后,子元素的float,clear,和vertical-align属性将失效 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局采用flex布局的元素,称为flex容器(flex container),简称“容器”。它的所有子元素自动称为容器成员,称为flex项目(flex item),简称“项目原创 2020-10-19 22:28:27 · 5805 阅读 · 1 评论 -
一线大厂前端经典面试题JavaScript部分
BAT笔试题中几道关于堆栈内存和闭包作用域的问题let a = {}, b = '0', c = 0;a[b] = 'JavaScript';a[c] = 'HTML+CSS';console.log(a[b]); //HTML+CSS//原因:对象中属性名不能重复,一般都为字符串属性,字符串属性名跟数字属性名是一样的let a = {}, b = Symbol('1'), c = Symbol('1');a[b] = 'JavaScript';a[c] = 'HTML+CSS'原创 2020-10-10 11:07:04 · 6316 阅读 · 1 评论 -
一线大厂前端经典面试题HTML+CSS部分
大前端时代需要掌握的技术栈HTML5 https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5 语义化标签 音视频处理 canvas/webGL history API requestAnimationFrame 地理位置 web socket ... CSS3 常规 动画 盒子模型 响应式布局 ... JavaScript ECMAScript 3/4/5/6/7/8/9原创 2020-09-25 11:27:59 · 5883 阅读 · 0 评论 -
JavaScript 数据类型总结及相关面试题
JavaScript数据类型基本数据类型numberstringbooleannullundefinedsymbolbigint引用数据类型object普通对象数组对象正则对象日期对象Math数学函数对象…function数据类型检测typeof 检测数据类型的逻辑运算符instanceof 检测是否为类的实例constructor 检测构造函数Object.prototype.toString.call 检测数据类型typeof [原创 2020-09-22 17:21:43 · 6742 阅读 · 3 评论 -
HTML+CSS 元素的显示模式
什么是元素显示模式在了解元素显示模式前,我们先来举个不恰当的例子:比如在世界上的人有成万上亿,那么归根结底只有两种人就是男人和女人,偶尔还有可能有第三种人-人妖。无论是男人还是女人甚至人妖,虽然都是人但是不同的人也有着不同的特点或者说不同的分工。其实在HTML中也跟我们人类相似,html中同样也有多种多样的元素标签,但归根结底可以分为两大类:块元素和行内元素。而不同的元素又有着不同的特点和作用,了解了它们的特点我们就可以很好的对网页进行布局。谈到了网页的布局其实就涉及到了元素的显示模式。html原创 2020-09-21 20:14:37 · 5605 阅读 · 0 评论 -
HTML+CSS中的3D转换translate/rotate 旋转木马/翻转盒子/3D导航栏
前面我们已经介绍过了2D转换,那么我们即将学习的3D转换又是什么呢,它跟2D转换有什么不同呢?在我们日常生活的环境就是3D的,我们多看到的物体也都是3D的,而我们拍的照片就是3D物体在2D平面中呈现的样子 。3D的特点近大远小(离我们眼睛越近看上去越大,而离眼睛越远则看上去越小) 物体后面遮挡不可见根据这些特点我们就可以在网页上模拟构建出3D效果。三维坐标系我们前面讲过的2D是一个平面坐标系,而3D则是三维坐标系。三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。x轴.原创 2020-09-21 15:02:57 · 10350 阅读 · 0 评论 -
JavaScript 闭包and变量作用域
变量作用域在讲闭包之前我们先来简单介绍一下JavaScript中的变量作用域。在ES6之前变量(用var关键字声明的变量)根据作用域的不同分为两种:全局变量和局部变量在ES6中还新增了块级作用于变量(用let声明的变量),用let声明的变量也分为全局变量和局部变量,只不过是用let声明的局部变量是块级作用域的,作用域的范围比更加精细了。比如我们在一对大括号{}里用let声明的变量则作用域范围仅限于当前的大括号内部。全局变量:一般情况下只要是在函数外声明变量都是全局变量局部变量:在函数内部原创 2020-09-11 11:10:24 · 5584 阅读 · 0 评论 -
JavaScript DOM事件流事件捕获事件冒泡
事件在讲事件流之前,我们先来了解一下事件。JavaScript与HTML之间的交互是通过事件来实现的。事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间。我们可以使用侦听器(或事件处理程序)来预订事件,以便事件发生时执行相应的代码。说白了,就是当我们对页面上的某些元素进行某些操作(比如鼠标单击)时产生一些特定的行为。比如鼠标单击一个按钮然后弹出一个对话框。这里就涉及到了按钮的click事件,产生的行为就是弹出了一个对话框。事件最早是在IE3和Netscape Navigator2 中出现的,当原创 2020-09-08 09:31:17 · 7669 阅读 · 4 评论 -
HTML+CSS动画波纹效果和奔跑的大熊
动画概念动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来控制一个或一组动画。常用来实现复杂的动画效果。相比过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。动画的使用定义动画:使用@keyframes定义动画语法:@keyframes 动画名称{ %0{ } 100%{ }}动画序列0%是动画的开始,100%是动画的完成,这样的规则就是动画序列 在@keyframes中规定某项css样式,就能原创 2020-09-07 23:59:34 · 6138 阅读 · 1 评论 -
HTML+CSS实现鼠标滑过tab页切换
实现效果:当鼠标滑过tab标签时,实现对应标签的内容切换<!DOCTYPE html><html> <head> <title>demo</title> <style> div{ psoition: relative; width: 1550px; height: 900px; padding: 0原创 2020-09-04 15:26:58 · 7993 阅读 · 2 评论 -
HTML+CSS中的2D转换之translate rotate scale
2D移动translate2D移动是2D转换中的一种功能,可以改变元素在页面中的位置,类似定位。语法{transform: translate(x, y); /*x,y分别表示x轴和y轴移动的距离*/}/*或者分开写*/{ transform: translateX(n); transform: translateY(n);}特点定义2D转换中的移动,沿着X和Y轴移动元素 translate最大优点:不会影响其他元素的位置 translate中的百分比单位原创 2020-09-03 00:20:01 · 5711 阅读 · 0 评论 -
HTML+CSS实现鼠标滑过分页按钮时放大效果
利用html+css实现当鼠标滑过分页按钮时,按钮自动放大的效果<!DOCTYPE html><html><head> <title>demo</title> <style> li { float: left; width: 30px; height: 30px; line-height: 30px原创 2020-09-03 00:00:06 · 6071 阅读 · 0 评论 -
JavaScript数据类型 - Array类型
创建数组一在JavaScript中,Array类型也是相当常用的一种类型。而且JavaScript中的数组与其他语言中的数组有着很大的区别。虽然js中的数组与其它语言中的数组都是有序列表,但与其它语言不同的是,js中的数组的每一项都可以保存任何类型的数据。也就是说数组的第一个值可以是字符串,第二个值可以是数值,第三个值可以是布尔值、对象等等。并且js数组可以动态调整大小。创建数组的基本方式有两种。第一种是使用Array构造函数,如下所示:var colors = new Array();如原创 2020-09-02 11:33:49 · 6793 阅读 · 0 评论 -
JavaScript数据类型 - Object类型
ECMAScript中的对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。而创建Object类型的实例并为其添加属性和方法,就可以创建自定义对象,如下所示:var o = new Object();这个语法与Java中创建对象的语法相似,但在JavaScript中,如果不给构造函数传递参数,则可以省略后面的那一对圆括号。也就是说在像前面这个示例一样不传递参数的情况下,完全可以省略那对圆括号(但并不推荐这种做法)var o = new Objec原创 2020-09-01 10:20:25 · 6305 阅读 · 1 评论 -
JavaScript数据类型 - String类型
String类型String类型用于表示由0或多个16位Unicode字符组成的字符序列,即字符串。字符串可以由双引号"或单引号'表示,因此以下两种字符串写法都是正确的:var str1 = 'Alvin';var str2 = "Alvin";虽然在JavaScript中单引号和双引号都可以用来表示字符串,但是单引号或双引号必须成对出现,不能单双混用。比如:var name = "Alvin';var name1 = 'Alvin";上面这两种写法都是错误的。字符字面量.原创 2020-08-31 20:13:55 · 5384 阅读 · 0 评论 -
JavaScript数据类型 - Number类型
Number类型Number类型应该是ECMAScript中最令人关注的数据类型了,这种类型使用IEEE754格式来表示整数和浮点数值。为支持各种数值类型,ECMA262定义了不同的数值字面量表示格式。我们平时用的最多的也是最基本的数值字面量格式是十进制整数,十进制整数可以像下面这样直接写在代码中:var intNum = 68;//整数除了以十进制表示外,整数还可以通过八进制(以8为基数)或十六禁止(以16为基数)的字面值来表示。其中八进制字面值的第一位必须是0,然后是八进制数字序列(0原创 2020-08-31 15:41:33 · 5061 阅读 · 0 评论 -
JavaScript根据选择器字符串判断当前元素是否与选择器匹配
编写一个 match 函数。它接受两个参数,第一个参数是一个选择器字符串性质,第二个是一个 HTML 元素。这个元素你可以认为它一定会在一棵 DOM 树里面。通过选择器和 DOM 元素来判断,当前的元素是否能够匹配到我们的选择器。(不能使用任何内置的浏览器的函数,仅通过 DOM 的 parent 和 children 这些 API,来判断一个元素是否能够跟一个选择器相匹配。)以下是一个调用的例子。<div id="id1" class="class1"> <div id='id2原创 2020-08-29 17:50:23 · 5330 阅读 · 0 评论 -
JavaScript数据类型 - Boolean类型
Boolean类型Boolean类型是JavaScript中使用的最多的一种类型,该类型只有两个字面值:true和false。这两个值与数字值不是一回事,因此true不一定等于1,而false也不一定等于0。以下是为变量赋值Boolean类型值的例子:var found = true;var lost = false;需要注意的是Boolean类型的字面值true和false是区分大小写的。也就是说True和False(或者其它混合大小写形式)都不是Boolean类型的值,只是标识符。虽原创 2020-08-28 14:45:24 · 7950 阅读 · 0 评论 -
JavaScript数据类型 - Null类型
Null类型Null 类型是第二个只有一个值的数据类型,这个特殊的值就是null。从逻辑角度来看,null值表示一个空对象指针,而这也正是使用typeof检测null值时返回object的原因,如下所示:var car = null;console.log(typeof car);// object如果定义的变量准备在将来用于保存对象,那么最好将该变量初始化为null而不是其它值。这样一来,只要直接检查null值就可以知道相应的变量是否已经保存了一个对象的引用。比如下面的例子:if(c原创 2020-08-28 11:50:17 · 6900 阅读 · 0 评论 -
JavaScript数据类型 - Undefined类型
Undefined 类型Undefined类型只有一个值,即特殊的undefined。在使用var声明变量但未对其进行初始化时,这个变量的值就是undefined,例如:var message;console.log(message); //undefinedvar message = undefined;console.log(message); //undefined在这个例子的第一段中,只声明了变量message,但未对其进行初始化。所以在控制台输出时会得到一个undefined原创 2020-08-28 10:10:05 · 5989 阅读 · 0 评论 -
浏览器 - 是谁触发了浏览器的重绘和回流
重绘和回流是在页面渲染过程中的非常重要的两个概念。页面生成后,页面操作、样式表变更以及用户操作都可能出发重绘和回流。回流回流reflow,有时候也叫重排relayout回流是指窗口尺寸被修改,发生滚动操作,或者是元素的尺寸或位置相关属性被更新时会出发布局过程,在布局过程中需要重新计算所有元素的位置信息。由于HTML元素使用的流式布局,如果页面中一个元素位置或尺寸发生了变化,则后面的元素的位置都要跟着发生变化,也就是重新进行流式布局的过程,所以被称为回流。回流发生在页面的渲染过程中。一般如下操原创 2020-08-27 17:16:59 · 4997 阅读 · 0 评论 -
浏览器工作原理 - 从url到页面展示浏览器都做了哪些不为人知的事(内附流程图)
浏览器相信做web开发的对浏览器并不陌生。简单来说浏览器就是一个由地址栏、菜单栏、选项卡、页面窗口、和状态栏组成的应用程序,但这仅仅是我们从表面上看到的。那么实际来讲远远不止这些,在浏览器的背后还有更多更复杂的逻辑和组件,比如浏览器引擎,渲染引擎,js解释器,网络,数据存储等等。浏览器内核浏览器内核分为:渲染引擎和js引擎两部分,由于js引擎越来越独立,内核也就倾向于只指渲染引擎了,主要负责将网络请求回来的资源加以解析排版然后呈现给用户。不同浏览器有着不同的内核。在五大主流浏览器中就包含了四原创 2020-08-27 14:46:49 · 4857 阅读 · 0 评论 -
javascript 的七种继承方式(七)类的继承
前言前面我们已经介绍了javascript中6种继承方式,这6中继承方式都是基于es5的,那么接下来我们要讲的是es6中新增的一种继承方式—— 类的继承类在es6中新引进了类的概念,作为对象的模板。类是对现实生活中一类具有相同特征的事物的抽象。相信学过后端语言的同学对类并不陌生,类的实质是一种引用数据类型,类似于byte,short,int,long,float,double等基本数据类型,但不同的是它是一种复杂的数据类型。因为它的本质是数据类型,而不是具体的数据所以不存在于内存中,不能直接被操原创 2020-08-25 15:53:25 · 4717 阅读 · 0 评论 -
javascript 的七种继承方式(六)寄生组合式继承
组合继承回顾前面的文章已经提到过,组合继承是JavaScript中最常用的继承模式。但是他也有自己的不足。组合继承最大的问题就是不管在什么情况下,都会调用两次父类型的构造函数:一次是在创建子类型原型的时候,另一次是在子类型内部。子类型最终会包含父类型对象的全部实例属性,但我们不得不在调用子类型构造函数时重写这些属性。下面再来看一下组合继承的例子:function Father(name){ this.name = name; this.friends = ['Yannis','Lu原创 2020-08-21 10:43:06 · 4868 阅读 · 0 评论 -
javascript 的七种继承方式(五)寄生式继承
寄生式继承是与原型式继承紧密相关的一种思路。寄生式继承的思路与寄生构造函数和工程模式类似,即创建一个仅用于封装继承过程的函数,该函数的内部以某种方式来增强对象,最后再像真的是它做了所有工作一样返回对象。下面的代码示范了寄生式继承的模式function object(o){ function F(){} F.prototype = o; return new F();}function createAnother(original){ var clone = obj原创 2020-08-20 17:14:49 · 5114 阅读 · 0 评论 -
javascript 的七种继承方式(四)原型式继承
前言.前面我们已经介绍了JavaScript的三种继承方式:原型链,借用构造函数已经二者的组合继承。其中第三种组合继承最为常用。因为我们知道它结融合了原型链和借用构造函数的有点,隐藏了自己各自的缺点,最终实现了相对比较完美的继承方式。接下来我们要介绍js中的第四中继承方式——原型式继承。原型式继承曾经有人提出了另一种实现继承的方法,这种方法并没有使用严格意义上的构造函数,而是借助原型可以基于已有的对象来创建一个新对象, 同时还不必因此创建自定义类型。下面我们来看一段代码function o原创 2020-08-20 11:58:45 · 4697 阅读 · 0 评论 -
javascript 的七种继承方式(三)组合继承
组合继承前面两篇我们了解到:原型链继承存在着引用类型问题,而借用构造函数又无法实现函数复用和原型方法继承的问题。那么能不能把两者结合一下,取其精华,弃其糟粕?答案是肯定的。那就是接下来我们要介绍的组合继承。组合继承有时候也叫做伪经典继承,指的是将原型链和借用构造函数的技术组合到一起,从而发挥二者之长的一种继承模式。其思路就是使用原型链实现对原型属性和方法的继承。而通过借用构造函数来实现对实例属性的继承。这样既通过在原型上定义方法实现函数复用,又能保证每个实例都有它自己的属性。下面来看一个例子f原创 2020-08-19 18:51:01 · 4514 阅读 · 0 评论 -
javascript 的七种继承方式(二)借用构造函数
调用构造函数在上一篇中我们提到,原型继承中由于原型属性和方法都是共享的,所以对于引用类型的属性就会存在一些问题。为了解决这个问题,开发人员开始使用一种叫做借用构造函数的技术。这种技术思想很简单,就是在子类型的构造函数内部调用父类型的构造函数。我们可以通过使用apply()或call()方法在新创建的对象上执行构造函数,如下所示:function Father(){ this.colors= ['red','pink', 'green']}function Son(){ //继原创 2020-08-19 15:55:00 · 4728 阅读 · 0 评论 -
javascript 的七种继承方式(一)原型链
原型链的概念ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简述一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,反过来原型对象又都包含一个指向构造函数的指针,而实例又都包含一个指向原型对象的内部指针。如下图所示。那么,如果我们让原型对象等于另一个类型的实例,结果会怎样呢,显然,此时的原型对象将包含一个指向另一个原型的指针,相应的另一个原型对象也包含着指向另一个构造函数的指针。假如另一个原型原创 2020-08-19 10:57:59 · 24564 阅读 · 17 评论 -
ubuntu下的Nginx+FastDFS的安装和配置
Fastdfs+Nginx的安装和配置一、安装fastdfs 的依赖包libfastcommon-mastet.zip先安装fastdfs的依赖包libfastcommon-master.zip 解压缩libfastcommon-master.zip 进入到libfastcommon-master.zip 执行./make.sh 执行sudo ./make.sh install...原创 2020-04-29 22:04:31 · 4598 阅读 · 0 评论 -
完美解决pyinstaller 打包报错找不到依赖pypiwin32 或pywin32-ctypes的错误
报错信息最近闲来无事,用python的tkinter库开发了一款带日程提醒的万年历桌面程序。在程序开发结束开始打包时,却发现一直报错PyInstaller cannot check for assembly dependencies.Please install PyWin32 or pywin32-ctypes.pip install pypiwin32但是运行pip inst...原创 2020-01-14 16:09:30 · 30162 阅读 · 18 评论 -
ubuntu中使用pip安装第三方库timeout超时问题解决
1、首先 用sudo打开如下文件sudo vi ~/.pip/pip.config #如果该文件不存在则手动创建该文件2、在该配置文件中添加如下内容这里使用的是国内的douban的镜像,速度会快很多[global]timeout = 6000index-url = http://pypi.douban.com/simpletrusted-host = pypi.douba...原创 2020-01-07 00:17:25 · 5138 阅读 · 1 评论 -
ubuntu+uwsgi+nginx部署django项目
一、配置django项目1、修改配置文件settings.pyDEBUG = FalseALLOW_HOSTS=['*']#配置静态文件所存放的路径STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')2、收集静态文件python manager.py collectstatic3、收集所需依赖库#收集项目开发...原创 2020-01-07 00:12:09 · 4624 阅读 · 0 评论 -
django + python上传文件的两种方式
突然心血来潮,研究了下django+python上传文件的两种方式。第一:直接采用文件读写的方式上传1. settings.py文件中设置文件的存放路径和文件读取路径MEDIA_ROOT = os.path.join(BASE_DIR, 'media')MEDIA_URL = '/media/'2. html模板文件:<form method="post" enct...原创 2019-11-13 17:47:22 · 4633 阅读 · 0 评论 -
python网络编程--创建简单的UPD套接字实现两个进程间互相通信
Socket什么是socketSocket通常又称“套接字”,应用程序通常会通过“套接字”实现向网络发出请求或者相应网络请求,从而实现不同计算机之间或同一计算机的不同进程之间的相互通信socket()函数在python中,通过socket()函数来创建套接字,语法格式如下:socket.socket(family,type,proto)family:套接字的家族,一般分为A...原创 2019-05-30 19:54:30 · 4555 阅读 · 0 评论 -
python打造简单学员信息管理系统并将数据保存到文件中
准备开发环境:Windows 7开发工具:pycharm开发语言:python3.7思路及功能分析创建一个学生类Student,并定义初始化__init__方法,学生信息包含姓名,年龄,性别,数学成绩,python成绩,学号属性 定义一个初始化学员信息的方法init_student,即默认添加一些测试数据。 定义一个读取文件的方法,用于将文件中的学员信息读取出来并保存的类的...原创 2019-06-05 16:14:17 · 11162 阅读 · 5 评论 -
python爬虫抓取头条街拍美女图片
开发环境:windows 7开发工具:pycharmpython版本:python 3.7用到的库:os,urllib,requests,hashlib关键步骤:通过浏览器分析找到请求接口 分析接口返回的内容及数据格式 提取出图片链接 将图片保存到本地实现代码:# coding = utf-8# author: Alvinimport osimport r...原创 2019-05-31 16:39:26 · 4195 阅读 · 1 评论 -
Django实例教程之创建一个简单的投票系统(一)
前言本文将基于django官方案例(投票系统)进行一个简单的学习和讲解开发环境:windows 7开发工具:pycharmpython版本:3.7django版本:2.2简介通过本案例教程,我们最终将完成一个简单的投票系统的创建,该系统包含两部分:大家都可以参与投票和查看票数的公共网站 用于添加,修改,删除投票的管理后台首先确保django已经安装,可用如下命令...原创 2019-05-28 20:23:02 · 6824 阅读 · 0 评论