随笔分类 - 前端
摘要：找了好多博客实现效果都……emmm…… 应用Vue自带的过渡 《 进入/离开 & 列表过渡 》和 嵌套路由 和 fixed定位实现 其实还是挺简单的。 在子页面把整个页面做绝对定位，覆盖整个屏幕，子父页面将 router-view 用 transition 套起来，并加上过渡动画就可以啦。 代码：
阅读全文
摘要：之前在慕课网看了几集Canvas的视频，一直想着写点东西练练手。感觉贪吃蛇算是比较简单的了，当年大学的时候还写过C语言字符版的，没想到还是遇到了很多问题。 最终效果如下（图太大的话 时间太长 录制gif的软件有时限…） 首先定义游戏区域。贪吃蛇的屏幕上只有蛇身和苹果两种元素，而这两个都可以用正方形格
阅读全文
摘要：参考 https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候，不要获取数据。
阅读全文
摘要：慕课网视频《 炫丽的倒计时效果Canvas绘图与动画基础 》&《 Canvas绘图详解 》笔记 ↑老师讲的很好，不过语速很慢，二倍速刚好。 基础知识 通过 <canvas></canvas> 即可创建一个canvas。 <canvas id="canvas" style="..."></canvas
阅读全文
摘要：全文参考：https://github.com/iuap-design/blog/issues/38 、MDN clientHeight，只读 clientHeight 可以用公式 CSS height + CSS padding - 水平滚动条的高度 (如果存在) 来计算。 如图，这样一个div，
阅读全文
摘要：效果 基本是用CSS实现的，没有用图片，加一丢丢JS。完全没有考虑兼容性。 首先画一个转盘， 效果如下，配色什么的不要在意，可能比较丑。。。 然后写抽奖指针的小箭头，用CSS画三角形是一个比较常见的问题，通过设置width和height为0，然后用border实现。 如图，矩形是由四个三角形边框组成
阅读全文
摘要：https://github.com/reduxjs/redux 版本 4.0.0 先了解一下redux是怎么用的，此处摘抄自阮一峰老师的《Redux 入门教程》 // Web 应用是一个状态机，视图与状态是一一对应的 // 所有的状态，保存在一个对象里面 // store 是保存数据的地方 //
阅读全文
摘要：纯属无聊写的，可能有很多问题，欢迎批评指教。 效果图：图一是预设的一些弹幕，图二是自己发射的弹幕，效果是一样的。demo地址 首先是弹幕的位置，是要从最右滑到最左，为了防止随机高度弹幕会覆盖的问题，设置了通道。 每一个通道是从左到右的一条，高度固定，这样不同通道的弹幕不会相互覆盖。 弹幕滑动就是简单
阅读全文
摘要：最终效果 其实主要难点在于最左边的小时钟 指针的实现方式很简单，就是通过绝对定位将指针移到中间，然后以下边中间的位置为圆心旋转即可。代码如下： 效果 秒针转起来的效果也很简单，通过定时器setInterval每隔一秒更新秒针的角度。 现在就可以看到指针一跳一跳的了。但是呢，我希望指针平缓的走，那么可
阅读全文
摘要：参考教程：https://github.com/alsotang/node-lessons 1~5节 1. 通过superagent抓取页面内容 OK 这样就获得了一份HTML代码。 因为获取HTML是异步的，所以我们封装一个函数，返回一个Promise。 2. 通过cheerio筛选页面数据 总不
阅读全文
摘要：没用过裸的Ajax 也没听过jsonp，也不了解跨域问题，emmm… 参考： http://www.runoob.com/ajax/ajax-tutorial.html https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a
阅读全文
摘要：中卷有点无聊，不过也是有干货的，但是好像要背一下的样子。不过作者大大都夸我是“优秀的开发人员”了，肯定要看完呀~~ 开发人员觉得它们太晦涩，很难掌握和运用，弊(导致bug)大于利(提高代码可读性)。这种观点我不敢苟同，因为本书的读者都是优秀的开发人员，整天与算法和代码打交道，“抽象相等”对各位来说只
阅读全文
摘要：一直想知道Promise到底是怎么实现的，网上一搜几十篇文章，看的一脸蒙蔽。最后算是找到几个讲的真心很详细明了的。看了一份源码看了很久很久……最后找大佬问了几处看不懂的地方，大佬只看了十几分钟就看懂了……第一次我感受到了如此强烈绝望………… 此处推荐： 一起学习造轮子（一）：从零开始写一个符合Pro
阅读全文
摘要：第一次尝试用思维导图记笔记，感觉还不错~~~不过还是改不了我读书笔记写成抄书笔记的毛病 =。= 因为开始学JS的时候，一般浏览器就已经支持ES6了，所以比较喜欢使用ES6语法，let，=>等，文中代码不是抄书的，都用了ES6。 1. 属性描述符（ES5开始） 获取属性描述符： 设置属性描述符，被设置
阅读全文
摘要：为什么一定要使用formdata格式……很大原因是因为当时我犯蠢…… 前端肯定是JS了，具体不写了，使用Postman测试，后端语言是Java，框架Spring Boot，使用IntelliJ IDEA 一、基本类型 例: 可以看到form-data只能传递键值对形式。 简单类型直接传递就可以了。
阅读全文
摘要：全文摘抄自 https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing 专门抄一遍是因为，我想当然的以为标准盒子模型设置的宽高是包括padding的，但是实践中好像并不是这样的。 box-sizing 属性用于更改用于计算元素宽度和高度的默
阅读全文
摘要：以下转自《CSS中的浮动和清除浮动，梳理一下！》 浮动到底是什么？ 浮动核心就一句话：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。请默念3次！ 浮动最初设计的目的并没那么多事儿，就只是用来实现文字环绕效果而已，如下所示： 文字环绕效果 但是早期的前端开发者发现：浮动的元素
阅读全文
摘要：参考《Sass入门篇》《侧栏工具条开发》强烈推荐后者，良心课程。 Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点： 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同，Sass 是
阅读全文
摘要：1. static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 金黄色方块会在左上角显示，没有偏移。 2. fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "r
阅读全文
摘要：发现一个好文：《深度剖析：如何实现一个 Virtual DOM 算法》 源码 文章写得非常详细，仔细看了一遍代码，加了一些注释。其实还有有一些地方看的不是很懂（毕竟我菜qaq 先码 有时间研究下diff算法 util.js element.js diff.js patch.js
阅读全文