前端
NPM是什么？简单说就是代码管理工具。
npm——Node Package(包) Manager(管理器)。
把一些共享代码（比如： jQuery、BootStrap 等）集中到一个代码仓库 ，如果用户需要使用代码直接npm install ，npm 就会帮他们下载代码。
资料参考：npm 是干什么的
CSS3实现翻转卡牌效果
两牌重叠组成，上层-正面，下层-背面 (我们看不到并且本身是绕Y轴旋转过的)，这样，当鼠标移动上去后，同时让正面和背面执行旋转就可以实现翻牌效果。
参考：
CSS3实现翻转卡牌效果 纯css实现翻牌特效 codepen效果
移动端的input不能输入
问题出在：
//禁止用户进行复制.选择.
-webkit-user-select: none;
解决如下：
上述代码会产生一些问题。阻止了用户的选择内容行为，会导致一些“内容可编辑”标签无法正常使用，比如input、testarea。
{
-webkit-user-select: text;
-user-select: text;
}
css3渐变
#box{
width: 600px;
height: 600px;
background: linear-gradient(to right, rgb(229,249,253) , rgb(207,221,255));
}
行内元素不能设置宽高
.coupon-list-item{ background:url(../image/coupon.png) no-repeat; background-size:100% 100%; -moz-background-size:100% 100%; }
clip-path: inset(10px 20px 30px 40px); /* or "none" */ /* 值指的是 top, right, bottom, left 四个点 */
参考资料：CSS中的clip-path裁剪图片用法
css 文本两行显示，超出省略号表示
<style> p { width: 300px; margin-bottom: 50px; background: red; } .txt-overflow { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .multi-overflow { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } </style>
css隐藏滚动条,但是可以滚动
overflow-y: scroll; .element::-webkit-scrollbar {display:none}
文字两端对齐
用的最多的应该就是表单前面的文字对齐吧。
.child-ele text { width: 150rpx; text-align: justify; //文字对齐 } .child-ele text::after{ //伪元素 content: ''; display: inline-block; width: 100%; }
参考：https://segmentfault.com/a/1190000011336392
给图片加时间戳
上传图片修改图片后，如果图片路径名字未有改变，服务器会认为是同一个请求，会用缓存数据代替请求数据，为了保证每次都能请求最新图，这个时候可以在图片显示路径后加时间戳。
<image src='https://wx.bjyestar.com/bjapp/images/b_1.jpg?{{timeImg}}' bindtap='onToGroup'></image> //timeImg: new Date().getTime()
用css使背景图片旋转
-moz-transform:rotate(180deg); //背景图片旋转180度
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
如果希望向右旋转90度 就把上面代码中的180deg改成90deg，最后一行rotation=1
如果希望向左旋转90度 就把上面代码中的180deg改成-90deg，最后一行rotation=3
引用js或css后加?v= 版本号
1，脚本并不存在，而是服务端动态生成的，因此带了个版本号，以示区别。
2，客户端会缓存这些css或js文件，因此每次升级了js或css文件后，改变版本号，客户端浏览器就会重新下载新的js或css文件 ，刷新缓存的作用。参考
防止缓存。现在的服务器都开了缓存功能，如果想要修改这个css马上生效那就只有在css文件后面加一个 标识来区分达到目的
FTP上传代码变成一行
ftp最好用二进制模式上传，不要用ASCII
1．ASCII传输方式：假定用户正在拷贝的文件包含的简单ASCII码文本，如果在远程机器上运行的不是UNIX，当文件传输时ftp通常会自动地调整文件的内容以便于把文件解释成另外那台计算机存储文本文件的格式。
2．二进制传输模式：在二进制传输中，保存文件的位序，以便原始和拷贝的是逐位一一对应的。即使目的地机器上包含位序列的文件是没意义的。
参考：FTP传输的两种方式?
var img = []; var multImg = ['https://www.baidu.com/img/baidu_jgylogo3.gif','https://www.baidu.com/img/baidu_jgylogo3.gif']; var flag = 0; for(var i=0;i<multImg.length;i++){ img[i] = new Image(); img[i].src = multImg[i]; flag++; if(flag== multImg.length){ img[i].onload=function(){ console.log('图片加载完成'); } } }
canvas生成图片模糊的处理方案----获取当前屏幕的设备像素比，然后将 canvas 放大到该设备像素比来绘制，然后将 canvas 压缩到一倍来展示
设备像素比：
canvas 的 css 宽高与上下文宽高
要设置canvas的画布大小，使用的是 canvas.width 和 canvas.height； 要设置画布的实际渲染大小，使用的 style 属性或CSS设置的 width 和height，只是简单的对画布进行缩放。
//canvas标签中的width 和 height属性并不是css中的宽高，而是 canvas 绘图上下文（绘图区域）的宽高，当不设置 canvas 的 css 宽高时，canvas会将 width 和 height 的值作为css宽高，而css宽高是元素在页面上的可见尺寸 <canvas id="canvas" width="200" height="200" style="width:100%; height:100%"></canvas>
<canvas width="640" height="800" style="width:320px; height:400px"></canvas> canvas的实际大小的640px × 800px，但是实际渲染到页面的大小是320px × 400px，相当于缩小一倍来显示。
参考：
Canvas 绘图模糊问题解析 - 写的特别好！
其他：基于html2canvas实现网页保存为图片及图片清晰度优化 酷炫的网易云音乐
/*高倍屏下处理方案--star*/ // 屏幕的设备像素比 var devicePixelRatio = window.devicePixelRatio || 1; // 浏览器在渲染canvas之前存储画布信息的像素比 var backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1; // canvas的实际渲染倍率 var ratio = devicePixelRatio / backingStoreRatio;
口红机任务页需求，点击生成图片。
<!-- 分享朋友圈canvas -->
<canvas id="shareImg" style="width:100%; height:100%"></canvas>
<img id="saveImg" alt="" style="width:100%; height:100%">
<div class="close">X</div>
<!-- 分享朋友圈canvas end-->
// 分享朋友圈canvas
function canvas()
{
var canvas = document.getElementById('shareImg');
var ctx = canvas.getContext('2d');
/*高倍屏下处理方案--star*/
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;
var ratio = devicePixelRatio / backingStoreRatio;
canvas.width = document.documentElement.clientWidth * ratio;
canvas.height = document.documentElement.clientHeight * ratio;
var imgCode;
$.ajax(
{
url: "{:url('games/lipstickWxCode')}",
type: "post",
async: false,
success: function(res)
{
imgCode = res;
}
});
console.log(imgCode);
var img = [];
var flag = 0;
var mulitImg = ['/static/mobile/lipstick/img/share_img0.jpg',imgCode];
var imgTotal = mulitImg.length;
for (var i = 0; i < imgTotal; i++)
{
img[i] = new Image()
img[i].src = mulitImg[i]
img[i].onload = function()
{
//第i张图片加载完成
flag++;
if (flag == imgTotal)
{
//图片全部加载完成,开始画图
var wxcode = ratio == 2 ? 180 : 300;
ctx.drawImage(img[0], 0, 0, canvas.width, canvas.height);
//二维码图片：300*300
var codeX = (canvas.width - wxcode) / 2;
var codeY = canvas.height * 0.71;
ctx.drawImage(img[1], codeX, codeY, wxcode, wxcode);
// 生成图片
var saveImg = document.getElementById("saveImg");
var dataUrl = canvas.toDataURL();
saveImg.src = dataUrl;
}
}
}
}
