在旅梦学习前端有段时间了，想着总得写个笔记持续更新学了些什么，只靠印象还是不够用，所以写个类似目录的东西
以下都是前端相关，有多为html,css,js还有算法，移动端开发注意的些东西
头一次记不清学这些的时间顺序了，就不按时间顺序记录了，以后会按时间顺序来记录的，尽量一周一记录
- 算法
-
红包算法
这星期学的红包算法是一个非常简易的一个算法
parseFloat((Math.random()*(((restAmout/restNum)*2)-0))).toFixed(2)
restAmout 是剩余的总额
restNum 是剩余的总人数
用上面的算法分红包时，它的数学期望每次都是平均数(restAmout/restNum)，可以说是很公平了。
于是我又在这基础上加了保底
parseFloat((Math.random()*(((restAmout/restNum)*2)-2*N))+N).toFixed(2)
加了保底后每次的数学期望也还是平均数，只是保底有N元，上限也砍了N元
这个算法还有个要注意的点，它的数学期望是会按着次数来浮动的，要是前一次分红包分的比前一次的期望值低，那么下一次分的期望值就会提升，一开始我并没有注意到这点。
- QQ号加密
631758924 是加密过后的
解密规则:
- 第一个数删除取数，
- 将第二个数移到末尾
- 将第三个数字删除取数
- 将第四个数字移到末尾
- 直至最后一个删除了取完为止
结果：
631758924 6
17589243 1
5892437 5
924378 9
43782 4
7823 7
238 2
83 8
3 3
用数组和两个指针，一个head指向第一个数，另一个tail指向最后一个，删除就是把 head 头指针指向后一个数，移向末尾也可以通过 tail 来实现
let enc_qq = [1,2,3,4,5,6,7,8,9],
qq=[],
head = 0,
tail = 9;
while(head < tail){
qq.push(enc_qq[head]);
head++;
enc_qq[tail]=enc_qq[head];
tail++;
head++;
}
用指针和数组可以简单实现栈，队列，列表等结构。此处还有关于数组常用的函数要注意。
enc_qq.push(0);插入最后一个
enc_qq.pop();移除最后一个
enc_qq.unshift(0);插入第一个
enc_qq.shift();移除第一个
- CSS
- 阿里支付-健康块仿写
使用Swiper达成横向滑块效果以及从Iconfont在线链接获取图标使用（视情况使用box-sizing）
content-box 标准盒模型 -> 计算宽高只有content
border-box IE盒模型 -> 计算宽高会算边框以内 - animation-fill-mode
animation-fill-mode: forwards;动画后停留在动画的最后一帧
animation-fill-mode: backwards;动画前停留在动画的第一帧
animation-fill-mode: both;两个效果都应用
仿写了JD校招页面练习，用Swiper套一层Swiper达到先滑竖屏再滑横屏，其中有一个数字转轮的效果用odometer框架和Swiper的添加事件监听实现 - 百度外卖熊仿写
动画效果加过渡，用setInterval()“重复调用函数”做进度条效果，以及点击换屏 - 百度外卖熊-生活页面
绕Z轴旋转特效 - 大白动画
环形的颜色渐变，背景大小扩大，再设定动画移动 - BFC
BFC 的概念
Block Formatting Context(块级格式化上下文)
BFC 的渲染规则
- BFC在页面上是一个独立的容器，最显著的效果是建立一个隔绝的空间，外面的元素不会影响BFC里面的元素，反之，里面的元素也不会影响外面的元素。
- BFC的区域不会与浮动元素的box重叠
- 垂直方向的外边距会发生边距重叠(包括父子元素，兄弟元素)，水平方向的外边距不存在边距折叠
BFC 的创建条件
- overflow的值不为visible
- float的值不为none
- 行内块inline-block
- 表格单元display: table-cell;
- 绝对定位 (absolute,fixed)
学习 BFC (Block Formatting Context)
正常的html页面是会吃间距的，BFC可避免
- BootStrap
初识BootStrap框架，对于动态分布的网站很好用，还有提交表单但不刷新页面，dom操作 - 豆瓣仿写
页面图片的缩放处理、弹性布局占比和继承兄弟高度、多行超出省略、盒内背景图片处理->用另外一个盒子padding-top:100%撑起 - 掘金小册页面
/* 调用性能->文本抗锯齿 */
text-rendering: optimizeLegibility;
/* 滚动更顺滑 */
-webkit-overflow-scrolling: touch;
最简单的跨终端自适应 - 网易云音乐年度歌单仿写
Swiper滑屏和背景音乐还有扣动画 - 自适应
媒体查询做到兼容多终端 - 星战简单的动画
- Swiper实例
Swiper框架3D效果、分页器、导航的运用，具体的去看文档 - WEUI
为微信小程序使用的前端框架
- Float
圣杯布局、双飞翼布局和清除浮动的五个方法
- 在父元素底部加上一行代码<div style="clear: left;"></div> 也可用both
- 在父元素的CSS上加一个div.content{float:left;}
- 在父元素的CSS上加一个伪元素after 同样 clear:left; 并加上 display:block
- 利用BFC简称 (块级格式化上下文) 的效果来弥补父容器的高度塌陷
.clearFix {
padding: 0 200px;
overflow: hidden;auto;scroll;
}- 尼古拉斯大师 方法, 把父容器的display设置为table，可以创建一个匿名表格单元，直接触发BFC效果======>不推荐
.clearFix {
display:table;
}
- JS
- Jquery
使用Jquery写JS - 玩家
JS里函数也是对象，可以用函数代替类的作用
new Player() 作为构造函数constructor被运行，会有一个返回新对象->实例 - table
利用dom制成动态表
- stylus
stylus可以定义变量、函数以及嵌套
flex-shrink缩进的动态
flex-grow剩余的动态
动态分布的对齐、换行、超出隐藏
值得注意的是对齐属性加在父元素，换行和超出隐藏都加在子元素 - SVG
- animation
利用SVG的x,y拖动图形，控制音量
SVG的移动和变形动画，其中的移动动画还可以利用SVG画的路径 - icon-path
SVG在<defs>里提供组合<g>和模版<symbol>
不同的是组合除了位置外不用定义大小尺寸，模版需要，因此模版可以随意放大缩小 - 霓虹灯
利用stroke-dasharray和stroke-dashoffset属性镂空文本，并描边以此做了霓虹灯动画。
- 手机的微信支付页面
动态分布布局、监听器改变样式
