- 博客(35)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 文字转png图片
body中的数据格式：/** * Convert text to PNG image. * @param text * @param [options] * @param [options.font="30px sans-serif"] css style font * @param [options.textAlign="left"] text alignment (left, center, right) * @param [options.color="black"] (or op.
2020-07-19 19:53:09
984
原创 行内元素的默认的横向边距与纵向边距
行内元素在渲染是会默认添加右侧和底部边距，如果在多个图片排列时这种情况就比较明显，当我们需要在布局上完全无边距的时候就需要去除这些编剧去除方法就是// 在单元元素上添加下面对应的属性去除边距// 去除横向边距.x-noSpace { font-size: 0;}// 去除纵向边距.y-noSpace { line-height: 0;}...
2020-02-03 14:47:34
368
原创 Failed to connect to raw.githubusercontent.com port 443解决办法
在使用git远程相关的仓库的中存在的插件或者时npm包之类的，我们通过shell来安装，如果遇到了上面的报错，可以按照下面的步骤进行排查1、访问一个线上地址，检查自己当前的网络状态是否正常2、检查当前命令使用到的远程仓库中自己是否添加了自己当前电脑的密钥。如何生成sshkey，并且添加到对应的远程仓库（一般大多数情况都是这个问题）如果还是没有解决你的问题，那就我只能抱歉了。欢迎大家补充...
2020-01-13 00:35:34
10098
原创 call、callee、caller的理解解析
function test1 () { return 1;}function test2 (arg) { console.log(arg); return arg;}类型不同call属于方法call的使用是为了改变函数内部的环境变量的值，也就是this的指向，使用方式是 functionName.bind(env,arg…)注意和bind的差别，参数必须逐个列出，不...
2019-11-24 12:26:48
673
原创 遮罩层事件穿透&完全禁止底部内容滑动(touch/app/wx/www)
问题源自实践在touch和app端如果需要做一个嵌入的html页面，如果需要做弹窗的话一般需要使用一个遮罩层的，然后在遮罩层设计弹出窗的内容，一般弹出窗是active之后，底部的内容是需要完全静止的(数据更新除外哈),在遮罩上进行的操作不能渗透到底部去，这种情况一般体现在遮罩层滑动需要禁止底部内容滑动，这种情况我们一般的处理方法是在弹出事件中设置底部内容的over-flow：hidden，在关...
2019-08-18 15:24:38
3165
原创 父元素opacity属性对子元素的影响(子元素设置opacity无效)
问题来源于实践这段时间做了一个项目优化，对于原有的内容进行了重新设计实现，其中一项就是对于label标签添加hover层进行解释说明，最常用的办法及时label的容器设置relative，然后hover层作为它的子元素设置absolute，然后在使用label的hover伪类来控制hover层的显示和隐藏，这其中一个要求及时hover层必定要求能够遮住页面中其他的元素，所以最常用的办法是设置它...
2019-08-18 11:05:48
5449
2
转载 git pull与git fetch
网上有人介绍说git pull=git fetch + git merge ，可以用来将远程仓库更新到本地仓库，但是实际在git pull运行之后强制执行了一段分支合并，如果存在冲突的的话就可能看不到具体的细节，导致无法及时发现错误。在讨论这两个命令之前，需要清楚的是两个问题，本地master分支和远程仓库的master分支的区别，本地master分支可以在本地操控，但是远程仓库的master...
2019-07-11 08:44:28
109
原创 flex布局中图片元素宽度确定但高度无法自适应的问题
今天在使用flex布局中，为了不新增额外的dom元素，直接将img元素放在flex容器的下一层，作为一个flex项目，但是为了横向排列，所以给img元素设置了宽度，但是高度没有随着宽度变化而变化(保持高宽比),情况如下：/*html*/...<div class="flexBox"> <img src="image.jpg" alt="img"/> ...
2019-05-12 10:20:41
8402
2
原创 html页面中的快捷键设置
今天在开发中遇到一个需求，为了方便针对性用户的使用习惯，为页面中的一些元素添加快捷键，对于拥有使用快捷键习惯的用户友好，查找资料之后发现需要使用到的属性就是accessKey<input type="text" accessKey = "h" />/** 使用accessKey属性来定义快捷键，注意使用的方式不是简单的按对应的按键，需要：使用Alt + accessKey ...
2019-04-15 15:43:43
6430
原创 react-router主动(js控制)路由跳转
使用场景：在用户进行一系列操作之后，满足条件之后需要自动跳转到其他的路由，而不是需要用户点击跳转按键操作，最常见的场景就是在登录页面设计的是时候，用户填写信息点击登录之后，数据发送给后台验证，返回验证通过的字段之后，这时页面不需要用户再点击，自动跳转到其他页面；这个时候使用react-router提供的Link组件是不满足需求的：在网上找了一些方法：参考：https://segment...
2019-04-13 11:40:02
12645
原创 使用float属性构建侧滑框
使用float属性构建侧滑框原理：/**统一盒模型*/*{ box-sizing:border-box;}/**本行中自动（随侧边滑动框滑动）改变宽度的内容*/.content{ display:block; overflow:hidden;}/** 通过改变滑动框的宽度来实现滑动的效果 可以使用animate添加一次性的动画*/.slide{ ...
2019-04-07 21:15:12
548
4
原创 文本超出容器后省略号显示
在进行页面设计的时候文本一般是后台给的数据，无法确定它的长度，但是为了使文本的长度过长的时候不会影响容器大小，这个时候我们可能选择的方式是通过设置容器大小然后再设置它的overflow:hidden；但是这样就可能会显示滚动条，影响页面的美观，我们在网上看到的大多数方式都是通过使用省略号的形式，具体的css设置为：/*这里面有一个特别需要注意的地方，使用该效果的元素必须具有可计算的width...
2019-03-21 16:13:07
410
原创 宽度自适应布局
前端开发中宽度自适应是不可避免的问题，毕竟为了考虑到不同用户的显示终端的尺寸或者在PC端的时候用户主动改变浏览器窗口大小，所以在布局时就需要考虑到自适应宽度的问题。（如果直接冲UI提供的设计稿开始的话，不同的公司对于UI到具体代码的尺寸转换有不同的计算方式，所以这一步跳过，只考虑代码层面的自适应布局）通过的使用几个前端框架的总结：宽度自适应，底层都是使用的媒体查询，只不过不同框架或者公司会...
2019-03-14 17:05:27
7138
转载 Dplayer后端
说实话，dplayer真的是一个很漂亮的播放器插件，但是这个插件需要后端支持才能正常实现弹幕功能，不幸的是这个插件的官网上面的那个后端接口已经GG了，所以无奈可能得自己搭建后台了但是网上总是有热心网友，写了dplayer弹幕后端搭建教程之外还分享了一个线上的搭建好了的后端接口https://www.moerats.com/archives/838/可以在上面博客中找到真的十分感谢佩...
2019-02-21 17:25:58
5409
1
转载 create-react-app添加scss支持
之前使用了公司内部的框架进行开发，其中已经对于常用的一些配置已经搭建好了，目前没有在公司所以没法使用公司内网，所以只能通过create-react-app进行react开发，由于之前使用了scss开发样式，而且在使用scss比css更加方便，所以希望能够给脚手架工程添加scss支持，所以在网上找了一些回答：csdn：https://blog.csdn.net/qq_36245035/artic...
2019-02-20 15:42:53
1366
原创 react-router-dom的路径匹配 属性exact 与strict
在这里先介绍一个比较难以描述的坑在使用react-router的时候我首先就是先在react-router的官网上去看她的官方文档，然后按照上面的教程来在自己的react工程中使用react-router，但是基本应该会遇到问题，原因就是我们在使用npm安装react-router的时候基本是4.x版本，由于版本的问题有一些我们之前在其他人的项目中看见的一些属性没法使用，其实是由于官网上的教程...
2019-02-19 17:30:12
9542
原创 canvas 的行内属性width、height与css的width、height属性差别
先贴上mdn上的解释canvas具有两个行内的属性：width与height属性，同时如果使用css定义width与height属性；在解释这两类之间的差别之前先看一下作的测试：css:canvas { display: block; border: 2px solid gray; border-radius: 10px; width:800px; h...
2018-12-23 16:59:59
2510
原创 父子元素同时使用rotate的效果叠加
今天在做页面设计的时候使用到了transform：rotate（） ；突然有一个想法，如果父元素使用了rotate ，子元素也使用了rotate，效果会发生什么叠加，叠加效果又是什么样的呢？？？所以做了一个测试：首先通过布局使父子元素的X轴和Y轴重合，然后改变父子元素rotateX的值，观察效果。 /*css*/ .cover-container { ...
2018-10-07 21:08:16
1616
转载 模块的循环引用
今天在笔试的时候，碰到一个问答题，觉得很有意思。那就是模块的循环引用，比如//a.jsvar b=require("./b.js")... //b.jsvar a=require("./a.js") 这样在两个模块之间就会构成循环引用，那么会不会构成无限循环或者存在其他的问题在网上找了各种解答，还是阮神的最精辟，其中主要分为CommonJS模块格式和ES6模块模...
2018-09-09 09:50:37
1004
原创 table元素无法固定列宽，width设置无效
之前在做table的时候，因为不是用来做数据的展示的，所以对于具体的格式没有太高的要求，所以没有去深入了解，这次在做一个数据展示列表的时候使用table，因为假设每一个单元格数据是没有固定长度的，所以为了界面不会因为数据的变化格式发生大变化，所以希望table的每一列都是固定宽度。然后使用js对数据处理。但是在使用css设置时：.item_list {display: inline-b...
2018-08-05 09:10:41
10160
转载 移动端大小自适应
在寻找font-boosting问题的答案时浏览到一篇关于自适应不同屏幕的方法：rem这个是移动端是很适用的，因为在移动端，我们不能在屏幕上拖拽改变浏览窗口的大小，所以在我们需要做的就是在加载的时候根据移动端的屏幕大小给屏幕中距离（width height margin padding font-size...）设置提供一个标准，解决办法就是在js的ready中根据屏幕大小设置html中的font...
2018-06-13 22:10:09
191
转载 font-boosting问题（移动端设置相同的font-size但是显示不对应）
在移动端页面开发中，使用一个css来设置元素中的font-size，但是对于同一个class设置，在不同元素中效果却不同，而且在调试的时候该表font-size发现也有相应，说明这个class有效果，但是在不同元素中却得到不同的效果，特别当元素中含有的文本元素数量差别较大时。在网上查找资料之后发现这个是一个叫font-boosting的问题，当文本数量太多，计算机认为在屏幕上显示这么多文本会导致用...
2018-06-13 21:58:55
1758
转载 z-index无效的解决办法
今天在做移动端web页面开发的时候，由于UI方案的设计图需要部分层叠的效果，所以使用z-index，存在这种情况：使用z-index为负数实现了层叠效果，但是由于底层存在事件，但是由于z-idnex为负数，所以该块级元素处于body之下，导致事件无法触发，修改z-index为正，但是存在大小顺序之后可以触发事件，但是没有了层叠效果。查阅资料之后，发现了自己对z-index的了解存在误区。上面是在w...
2018-06-10 11:15:05
4780
1
原创 Vue.js事件修饰符理解测试
测试程序<!doctype html><html> <head> <title>事件捕获顺序测试</title> <meta charset="utf-8"> <style text="txt/css">
2018-04-22 20:07:57
118
原创 JavaScript事件触发顺序（DOM0 和DOM2）
<!doctype html><html> <head> <title>事件捕获顺序测试</title> <meta charset="utf-8"> <style text="txt/css"> div{
2018-04-22 11:54:01
1238
原创 mousedown mouseup focus click事件的触发顺序测试
<!doctype html><html> <head> <title>test</title> </head> <body> <a id="link" href="#">点击一下进行测试<
2018-04-04 00:18:23
2701
原创 JavaScript基础学习笔记（四）
JavaScript 的浏览器对象模型 （BOM Browser Object Model）1、获得浏览器窗口的尺寸对于非Explorerwidth=window.innerWidthheight=window.innerHeight对于Explorer 8 7 6 5width=document.documentElement.clientWidthheight=document.docume...
2018-03-05 21:24:21
154
原创 JavaScript基础学习笔记（三）
10、JavaScript 内置的对象 数字 Number 字符串 ： String (不可更改字符串的内容，其中内置的函数只是会返回一个新的字符串) 时间： Date 应用：显示时钟 function showTime() { var now=new Date(); var h=now.getHours(); ...
2018-03-05 21:21:23
152
原创 JavaScript基础学习笔记（二）
更新一下JavaScript基础学习笔记（一）中的内容：5、函数 5.1、普通函数定义 function name(){ js代码块 } function name(x1,x2){ x1 和x2为参数 但是不用声明参数的类型 } function name(...
2018-03-05 17:15:36
120
转载 JavaScript基础学习笔记(一)
JavaScript 常用功能：1：写入html输出 document.write("<p>xxxx</p>");2：对事件做出反应（Javascript有特定的事件响应）3:改变html内容 例如 x.innerHTML="xxxx";4:改变html图像的大小或者改变图像的src；5：改变htmlm元素的属性即样式6：验证用户的输入（正则表达式或者是判断）1、Java...
2018-03-05 09:48:46
155
原创 CSS3学习笔记（一）
css1、边框1.1边框的样式：border:width style color;1.2边框四个角的半径border-top-left-radius:(top)#px/% (left)#px/%;border-top-right-radius:border-bottom-left-radius:border-bottom-right-radius:或者直接 border-radius:1.3边框阴...
2018-03-02 11:52:47
172
原创 CSS学习笔记（二）
11、浮动11.1使用属性float:right/left/none/inherit使用浮动属性会使该元素的内容不存在与普通流当中的位置，相对与不存在，所以不会包含在块级元素中，如果块级元素要实现包含的效果，需在内部添加一个普通流元素11.2使用clear:both/left/right/none;清除浮动清除浮动需要在块级元素周围的元素添加clear属性，指明了需要清除那一边的影响12元素尺寸h...
2018-03-02 11:49:08
113
原创 CSS学习笔记（一）
css声明：颜色表示 ：关键词、 #111111、 rgb(50,40,30); 长度表示：px、 em、%...1、css的基本格式选择器{ 声明（属性:属性值; <如果属性值含有多个值时，用“”>）}2、选择器 2.1派生选择器 如 dt code{ color: red; } 表示dt中的code元素中的文本显示红色，其他的co...
2018-03-01 14:35:54
134
原创 html快速入门
1:基本结构<!doctype html><html> <head> <title>rollover</title> <script src = "rollover.js"></script> <link rel = "st
2018-02-28 11:22:13
469
空空如也
Dplayer的react组件使用官网上的弹幕API链接无效
2019-02-21
TA创建的收藏夹 TA关注的收藏夹
TA关注的人