2020年06月_小鸟哗啦啦

原创 2020-06-29 html的禁止打印 + css的BFC与IFC + JS浮点运算的精度问题 + 项目复盘

2020-06-29 题目来源：http://www.h-camel.com/index.html[html] 能否做到禁止打印页面？如果可以那要怎么做？禁止打印实现困难，可以设置当用户打印页面时得到的页面内容为空。<style> @media print { body { display: none; } }</style>效果差强人意。[css] BFC与IFC有什么区别？BFC（Block Formatting Context）叫做“块级格

2020-06-30 16:54:01 197

原创 2020-06-28 html的实现页面锁屏 + css的BFC与float + js的立即执行函数写法 + 颜色搭配

2020-06-28 题目来源：http://www.h-camel.com/index.html[html] 实现一个页面锁屏的功能锁屏的最终效果就是退出登录，思路是点击锁屏按钮等操作时使token cookie过期或失效，跳转到锁屏页面或者登陆页面。百度经验里面的利用vue实现web页面的锁屏效果 https://jingyan.baidu.com/article/ff42efa94db46c819f220243.html html页面的锁屏简单实现 https://www

2020-06-30 10:14:18 399

原创 2020-06-27 html的判断用户正在操作页面 + css的如何形成BFC + js的ajax请求地址 + TCP包的有序传输

2020-06-27 题目来源：http://www.h-camel.com/index.html[html] 如何判断用户正在操作页面？当页面一个小时没有操作时跳转到指定页面如何做？html5在页面可见性窗口中提供了一个方法，使用visibilitychange页面事件来判断当前页面可见性的状态，并针对性的执行某些任务。同时还有 document.title 可以改变页面title。document.hidden 判断用户是否在当前观看的页面，true表示页面最小化或页面后台运行或被t

2020-06-30 09:34:09 212

原创 2020-06-26 html的页面添加右键菜单 + css的float父级元素塌陷 + js的微信小程序的轨迹回放 + TCP的状态

2020-06-26 题目来源：http://www.h-camel.com/index.html[html] 如何给页面添加追加右键菜单（原右键菜单功能保持不变）js + css 实现页面右键菜单 https://www.cnblogs.com/elleniou/archive/2013/05/15/3079018.html// 禁用整个页面的所有浏览器默认右击事件document.oncontextmenu = function(){ return false;}// 点击此

2020-06-28 16:52:10 241

原创 2020-06-25 html的canvas所占内存 + css的逐帧动画 + js的promise失败后自动重试 + 脚本语言的理解

2020-06-25 题目来源：http://www.h-camel.com/index.html[html] 请问60*80的canvas占多少内存？你是怎么计算的？Canvas提供了前端像素级别的控制能力，较之传统DOM，更多的灵活度和复杂度。首先思考，1*1的Canvas占用多大内存呢？在前端设置颜色时，一般用RGBA或者十六进制。解释一下RGBA的存储，A 取值0-1的小数，步长0.01，100个数字，7bit；RGB 0-255 RGB的存储空间应为 8*3=24Bit， 3B

2020-06-28 16:17:26 427

原创 2020-06-24 html的获取页面元素位置 + css的关键帧动画 + js的for in 与for of + 上线后的回滚

2020-06-24 题目来源：http://www.h-camel.com/index.html[html] 精确获取页面元素位置的方式有哪些？1. var px = document.getElementById("im").getBoundingClientRect().top;2. 累加元素offsetParent的offsetLeft和offsetTop一直到DOM的顶层。 //取得元素x坐标 function pageX(elem) { retu...

2020-06-24 09:37:11 221

原创 2020-06-23 html的跨标签页通信方式 + css的下拉橡皮筋效果 + js的异步请求重试策略 + LF和CRLF

2020-06-23 题目来源：http://www.h-camel.com/index.html[html] 跨标签页的通讯方式有哪些1. websocket：全双工通信协议，可以实现多标签的通信；2. localstorage：浏览器多个标签共用的存储空间，注意如果不手动删除，是永久不会失效的；3. sharedworker： html5 浏览器的新特性，可以被多个winodw共同使用，但需要这些标签页都是同源的 // sharedWorker所要用到的js文件，不必打包到项目

2020-06-24 09:07:17 475

原创 2020-06-22 html的webscoket与http2 + css的取消页面选中文字 + js的数组元素相同判断 + 移动端开发调试

2020-06-21 题目来源：http://www.h-camel.com/index.html[html] websocket和http2有什么区别？http2能取代websocket吗？why？1.何为http/2：goole提出的开源协议，意在提高网络传输效率二进制协议采用多路复用解决 HOL Blocking 较慢的请求阻塞其他请求的问题通过压缩http头提高效率支持全双工，所以可以使用 Server Push 推送到客户端2.问题是：HTTP/2 Serve

2020-06-23 08:27:48 265

原创 2020-06-21 html的webscoket如何区分客户端 + css的伪类的content不能被选中 + js的防止重复发送ajax请求的方法 + 前端项目质量

2020-06-21 题目来源：http://www.h-camel.com/index.html[html] websocket如何区分不同的客户端？websocket区分不同客户端，有两种方法：1. HttpSession 当我们在完成用户登陆时，用户登录成功就将当前用户放入HttpSession中。2. 可以在建立连接时，附带上用户信息参考博文：https://blog.csdn.net/qq_33171970/article/details/55001587[css]

2020-06-22 11:14:20 163

原创 2020-06-20 html的webscoket可以携带cookie + css的white-space + js的双向链表 + 逻辑像素与物理像素

2020-06-20 题目来源：http://www.h-camel.com/index.html[html] websocket可以携带cookie吗？为什么？如果可以，怎样做到呢？websocket可以携带cookie，因为websocket在握手的时候是http请求，浏览器可以携带客户端的cookie向服务器传输。可以在进行websocket连接建立前，也就是在握手阶段，利用cookie进行身份校验。[css] 举例说说你对white-space属性的理解white-space

2020-06-22 10:46:43 1845

原创 2020-06-19 html的webscoket的握手成功返回状态 + css的fitst-letter + js的多张图片合成一张 + 设计稿-首页

2020-06-19 题目来源：http://www.h-camel.com/index.html[html] websocket握手成功会返回一个干什么状态吗？是200吗？WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。在握手阶段借用http协议传输，建立连接后采用TCP协议传输。101状态码：切换协议请求者已要求服务器切换协议，服务器已确认并准备切换从下图可以看出，握手阶段websocket利用http进行传

2020-06-19 10:25:46 320

原创 2020-06-18 html的webscoket的握手阶段 + css的饼图效果 + js的ajax接收后台传输的图片+ 办公软件技巧

2020-06-18 题目来源：http://www.h-camel.com/index.html[html] websocket握手阶段是通过什么协议传输的？websocket与socket：1. socket是应用层与TCP/IP协议之间的中间抽象软件层，位于七层模型中的第五层--会话层。2. websocket是一个应用层协议，基于TCP协议进行数据传输，是对TCP协议的封装，与socket除了名字以外没什么关系。websocket在握手阶段是通过http协议进行传输的，建立连接之后

2020-06-18 09:52:20 159

原创 CSS实现饼图和环图的绘制

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>CSS实现饼图和环图</title> <style> .pie { width: 300px; height: 300px; margin: auto; border.

2020-06-18 09:35:45 508

原创 script标签的知识

script标签的知识script标签的执行顺序script 是按照它们出现的顺序被执行的，执行时会阻塞程序运行，建议页面实现类的js放到body之前，动作、交互、事件驱动、对于dom属性的访问操作可以放在body的dom之后尾标签之前。这样会加快网页的加载速度。script标签的async和defer属性HTML5 添加了两个工具来控制脚本的执行。async 表示“不用马上执行它”。更具体地它表示：我不介意你在整个网页加载完成之后执行这个脚本，把它放在其他脚本执行之后。这对于统计

2020-06-17 15:55:43 1241

原创 javascript程序员必备的5个debug技巧

http://berzniz.com/post/78260747646/5-javascript-debugging-tips-youll-start-using-today 使用debugger, 在代码中添加一个断点效果；如果是有条件的断点，可以和if一起使用；设置在DOM node发生变化时触发断点有时候DOM可能发生一些奇怪的变化，很难找出问题在哪chrome的开发工具里有一个功能，break on，在dom节点右键就可以看到，触发条件可以选择节点被删除节点属性变化.

2020-06-17 14:34:20 227

原创 2020-06-17 html的webscoket与心跳检测、数据加密、身份验证 + css的背景虚化 + js的源代码压缩 + 用户隐私

2020-06-17 题目来源：http://www.h-camel.com/index.html[html] websocket是如何做心跳检测、数据加密、身份验证的？心跳检测：这里由于websocket是长连接，如果网络断开，服务器没有触发onclose，还是会向客户端发送多余的数据，这样会造成数据的丢失。心跳机制，可以检测当网络连接断开时，采取重连等措施。关于实现可以参考 https://blog.csdn.net/mayuan2011/arti

2020-06-17 13:41:04 504

原创 CSS中的filter 滤镜的使用

<!DOCTYPE html><html><head><style>img { width: 33%; height: auto; float: left; }.blur {-webkit-filter: blur(4px);filter: blur(4px);}.brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}.contr.

2020-06-17 09:24:55 226

原创 2020-06-16 html的webscoket与http的端口问题 + css的background新属性值 + js的实现加法 + 重构的方法论

2020-06-16 题目来源：http://www.h-camel.com/index.html[html] http和websocket能共用一个端口吗？为什么？首先，端口的概念存在于传输层，是依赖于TCP、UDP存在，那么问题就简单了，http和webSocket同属于应用层协议，都是对TCP的封装，这样来看，理论上解释了http和webScoket可以共用同一个端口。如何使用，请看这里 https://blog.csdn.net/weixin_34000916/article/det

2020-06-17 08:04:01 166

原创 CSS中的background-repate的各属性值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>b.

2020-06-16 10:07:34 743 1

原创 2020-06-15 html的webscoket与http + css的width属性 + js的dom选择器 + 前端的架构设计

2020-06-15 题目来源：http://www.h-camel.com/index.html[html]websocket和http有什么区别？相同点：1. websocket 与 http 同属于应用层协议，都是基于TCP协议进行传输数据的，都是对TCP的进一步封装。2. 都要遵循TCP协议中的三次握手和四次握手。不同点：1. websocket是双向传输，而http是单向传输的；2. websocket浏览器与服务器通过http建立连接，之后采用TCP协议进行数据传输，而ht

2020-06-16 09:07:17 128

原创 2020-06-14 html的webscoket与http + css的width属性 + js的沙箱 +规范文档

2020-06-14 题目来源：http://www.h-camel.com/index.html[html]websocket和http有什么区别？相同点：1. websocket 与 http 同属于应用层协议，都是基于TCP协议进行传输数据的，都是对TCP的进一步封装。2. 都要遵循TCP协议中的三次握手和四次握手。不同点：1. websocket是双向传输，而http是单向传输的；2. websocket浏览器与服务器通过http建立连接，之后采用TCP协议进行数据传输，而ht

2020-06-15 16:32:35 133

原创 CSS中的width属性，min-content 与 max-content 与 fil-content 与 fill-available

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><style> .box { background-color: #f0f3f9; padding: 10px; margin: 10px 0 20px; .

2020-06-15 16:14:23 1097

原创 2020-06-13 html的本地预览功能+ css的outline属性 + js的纯函数与函数式编程 + 用户体验性

2020-06-13 题目来源：http://www.h-camel.com/index.html[html]图片上传时实现本地预览功能的原理是什么？原理：input的 type = file属性和window的内置FileReader对象，利用FileReader对象的readAsDataURL方法，把图片数据转成base64字符串数据，然后把这个base64字符串数据赋值给一个图片标签的src。关于原生实现js上传文件，可以看这篇文章 https://www.jb51.net/a

2020-06-15 15:09:22 244 1

原创 2020-06-12 html的Boilplate + css的3选择器级数 + js的纯函数 +Banlance

2020-06-12 题目来源：http://www.h-camel.com/index.html[html] 你有使用过HTML5 Boilerplate吗？说说你对它的理解为web前端的最佳实践的HTML+CSS+jquery模板集合，引用知乎的评价：1. Viewport Metatag：让页面能够在各种设备上正确显示。2. Chrome Frame：对于某些老浏览器，比如：IE6,7,8,不支持的新特性，H5BP可以让你的代码能够向下兼容（我会建议用户换浏览器，浏览器又不收费）。3.

2020-06-12 14:32:28 706 1

原创 2020-06-11 html的实时预览刷新 + css的3D按钮效果 + js的图片剪裁功能 +噪声在前端中的应用

2020-06-11 题目来源：http://www.h-camel.com/index.html[html] 切页面时，每次都动手刷新看效果很麻烦，如果要让你写一个实时刷新预览的工具你该怎么写？1. 在 <meta> 标签里面设置， <meta http-equiv = "refresh" content = "20"> 每20s刷新一次2. 在script中利用定时器setTimeout()： <script type = "text/javascri

2020-06-12 13:39:22 207

原创 2020-06-10 html的MSE理解 + css的地球自转还围着太阳公转 + js的for-in语句 +登录验证的数字位数

2020-06-10 题目来源：http://www.h-camel.com/index.html[html] Media Source Extensions(MSE)的理解，它解决了什么问题呢？这里说的非常详细，https://www.jianshu.com/p/1bfe4470349b使用 <vedio> 标签，支持html5的浏览器实现无插件就可以支持播放媒体内容，但是对媒体格式有所限制，例如MP4、WEBM、OGG;视频文件通过编码来压缩文件大小，再通过封装将压缩音频、字

2020-06-12 09:19:21 968

原创 HTML5的 meta 标签使用汇总

2020-06-11 各大网站前端界面中的<meta>标签Meat对象代表HTML的一个元素，提供HTML元素的元信息，比如描述、关键字、刷新频率。对象属性：content 设置或返回元素的content属性httpEquiv 把content属性连接到一个HTTP头部name 把content属性连接到某个名称scheme 设置或返回用于解释content属性的格式百度主页阿里主页美团主页滴滴主页字节跳动淘宝主页京东主页华为主页微..

2020-06-11 13:34:41 8013 1

原创你不知道的javaScript中几个陷阱

JavaScript中的几个陷阱sort()的排序竟然出现错误？ new Date()十分好用？替换函数没有真的替换？谨慎对待比较运算数组不是基础类型* 闭包* Math.min()比Math.max()大？ *看过一些文章，加上自己的一些总结分析，欢迎讨论。1.sort()的排序竟然出现错误？JavaScript默认使用字典序(alphanumeric)来排序。因此，[1, 2, 5 , 10, 4, 11].sort()的结果是[1, 10, 11, 2, 4, 5]。

2020-06-09 16:35:54 217

原创 2020-06-09 html的浏览器离线存储资源 + css的animation-fill-mode属性 + js的获取屏幕DPI +末位淘汰

# 2020-06-09 题目来源：http://www.h-camel.com/index.html# [html] 浏览器是怎么对HTML5的离线储存资源进行管理和加载的1.在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比...

2020-06-09 09:25:24 317 1

原创 2020-06-08 html的input在各浏览器下保持ui统一 + css的flex遇到nowrap布局影响 + js的promise + 弹性工作机制

# 2020-06-08 题目来源：http://www.h-camel.com/index.html# [html] input如何在各个浏览器下保持UI统一？进行初始化样式，例如：.input-button {padding: 3px 15px;*padding: 0 15px;*height: 24px;font-size: 12px;text-ali...

2020-06-08 14:59:24 377 1

原创 2020-06-07 html的手势密码 + css的等腰三角形图标 + js的内存泄露与内存溢出 + 后台接口返回数据的可信度

# 2020-06-07 题目来源：http://www.h-camel.com/index.html# [html] 使用H5实现一个手势密码参考文章：： https://blog.csdn.net/weixin_34013044/article/details/93798067需要引入 jq插件jquery.gesture.password.min.js# [css] 用css实现一个等腰三角形的小图标各种三角形的绘制 https://www.cnblogs.com/c...

2020-06-08 11:24:49 312

原创 2020-06-06 html的table + css的蒙版效果 + js的科学计数法转为数字 + 组织架构

# 2020-06-06 题目来源：http://www.h-camel.com/index.html# [html] 如何让table的边框双线变单线？border-spacing 属性设置相邻单元格的边框间的距离（仅用于"边框分离"模式）。border-spacing: 0; /* 双线变为单线 */table{border-collapse:collapse;border-spacing:0;border-left:1pxsolid#888;border-...

2020-06-08 10:30:22 358

原创 2020-06-05 html的svg + css的手风琴效果 + js的原型式继承问题 + 研发团队支出

# 2020-06-05 题目来源：http://www.h-camel.com/index.html# [html] svg如何转为字体图标？svg 意为可缩放矢量图形。<span>意大利国旗</span><svg width="150" height="100" viewBox="0 0 3 2"><rect width="1" height="2" x="0" fill="#008d46" />...

2020-06-05 10:54:58 129

原创 2020-06-04 html的webp图片格式 + css的浮动问题 + js 输入框input的校验 + 晋升体系

# 2020-06-04 题目来源：http://www.h-camel.com/index.html# [html] webp与jpg、png比较，它有什么优劣势？如何选择？webp是一种新兴的图片格式，优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。webp的优点：1.同等质量但是图片更小...

2020-06-04 16:57:07 200

原创关于浮动及如何清除浮动的进阶理解

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浮动及清除浮动</title> <style> .container { width: 300px; background-color: skyblue; } .

2020-06-04 10:29:14 178

原创 JavaScript的代码中如果遇到未定义的变量

js在遇到未定义的变量时，会出现uncaught referenceerror：is not defined，这时js会停止解析后面的代码，跳出代码块，之前的代码不受影响，之后的代码块也不会受到影响，参照一下别人写的实例<!DOCTYPE html><html lang="en"> <head> <title> 代码中如果遇到未定义的变量，会抛出异常吗？程序还会不会继续往下走 </title> &

2020-06-04 08:09:20 1912

原创 2020-06-03 html的webp图片格式 + css 的声明块 + js的delete函数 + 工作流程混乱

# 2020-06-03题目来源：http://www.h-camel.com/index.html# [html] 你有使用过webp的图片格式吗？webp是一种新兴的图片格式，优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。webp的优点：1.同等质量但是图片更小2.压缩后质...

2020-06-03 08:55:57 281

原创 2020-06-02 html的svg使用 + css阻止hover active 等鼠标行为的触发 + js未定义的变量 + UML

# 2020-06-02 题目来源：http://www.h-camel.com/index.html# [html] html中如何使用svg？1.使用 <embed> 标签： <embed src="circle1.svg" type="image/svg+xml" />2.使用 <object> 标签： <object data="circle1.svg" type="image/svg+xml"></obj...

2020-06-02 09:18:14 692

原创 2020-06-01 html的video标签 + css块级元素响应式缩放 + JSBridge + 国内外网站风格比较

# 2020-06-01 题目来源：http://www.h-camel.com/index.html# [html] html5的video如何附带字幕？<video> 标签定义视频，比如电影片段或其他视频流。目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。<video width="320" height="240" autoplay ><source src="movie.mp4"type="vid...

2020-06-01 15:30:12 632

原创 2020-05-31 html的rt标签 + css平行四边形 + js的复制图片方法 + cookie伪造

# 2020-05-31 题目来源：http://www.h-camel.com/index.html# [html] 你有使用过html5的rt标签吗？它有什么应用场景？<ruby>标签定义为注释(中文音标或字符)。将 <rp> 标签与 <ruby> 和 <rt> 标签一起使用：<ruby>汉 <rp>(</rp><rt>Han</rt><rp&...

2020-06-01 13:40:50 356

springboot工程实例代码

空空如也