HTML5 FormData 方法介绍以及实现文件上传

XMLHttpRequest 是一个浏览器接口,通过它,我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月,XMLHttpRequest Level 2 草案提出来了,相对于上一代,它有一些新的特性,其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。下面就具体介绍一下如何利用 FormData 来上传文件。

分类至 JS/CSS
0条评论

理解和使用Promise.all和Promise.race

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。
Promse.race就是赛跑的意思,意思就是说,Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。

分类至 JS/CSS
0条评论

微信小程序实现遮罩及阻止遮罩层下的页面滚动

实现遮罩效果

Html:
<view class="mask-view">
...
</view>

CSS:
.mask-view {
width: 100%;
height: 100%;
position: fixed;
overflow: hidden;
background-color: #ffffff;
z-index: 999;
top: 0;
left: 0;
}

阻止遮罩层下的页面滚动
只需要在遮罩层上加上catchtouchmove="ture"
需要注意的是:因模拟器无touch事件,需在真机上测试

<view class="mask-view" catchtouchmove="ture">
...
</view>

分类至 JS/CSS
0条评论

解决微信小程序inline-block不对齐的方法

解决方法:添加上 vertical-align:top后就会对其。应该是由于默认的 display:inline-block是基于 vertical-align:baseline 对齐的,改变一下 vertical-align 的类型就好了。

<view>
<view style="width:20%; display:inline-block; vertical-align:top;">
<image src="{{item.img}}"></image>
</view>
<view style="width:80%; display:inline-block; vertical-align:top;">
<text>...</text>
</view>
</view>

分类至 JS/CSS
0条评论

CSS calc() 函数

calc() 函数用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 +, -, *, / 运算;
calc()函数使用标准的数学运算优先级规则;

分类至 JS/CSS
0条评论

ES6 简化对象写法

es6简化对象的写法:
同名的属性可以省略,函数可以省略关键字function
var name = 'kobe';
var age = 39;
var obj={
name, //同名的属性可以省略
age,
getName() { //函数可以省略关键字function
return this.name;
}
};

分类至 JS/CSS
0条评论

=> js 中箭头函数使用总结

箭头函数是在 es6 中添加的一种规范

x => x * x 相当于 function(x){return x*x}

箭头函数相当于 匿名函数,简化了函数的定义。语言的发展都是倾向于简洁对人类友好的,减轻工作量的。 就相当于我最钟情的python,有很多类似之处,在关于 promise 文章中我会和 Python 框架中的 tornado 中的异步进行对比的,很相似。

箭头函数有两种格式:一种只包含一个表达式,没有 { } 和 return ;一种包含多条语句,这个时候 { } return 就不能省略。

分类至 JS/CSS
0条评论

rem、em、px的区别

px:像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
pt:是一个物理长度单位,指的是72分之一英寸。9pt=12px,可以依次换算。
em:相对长度单位,相对于当前对象内文本的字体尺寸。任意浏览器的默认字体高都是16px,所以未经调整的浏览器都符合: 1em=16px。
rem:是CSS3新增的一个相对单位,可以理解为"root em",相对于根节点html的字体大小来计算的,chrome/firefox/IE9+支持。任意浏览器的默认字体高都是16px,所以未经调整的浏览器都符合: 1rem=16px。

分类至 JS/CSS
0条评论

禁止iPhone横屏时页面字体自动放大

也是在写博客程序的时候,用iPhone真机预览前端页面效果,发现横屏时,页面上某些标签的字体比竖屏时明显大好多,布局都有点乱了。
思考了一下,不对啊,我字体设置的是em单位,放大的话,应该所有元素都是等比例放大,偏偏正文特别大(p标签)。
不懂就要问,去搜索引擎上找答案。
最终在CSS里添加代码,问题得以解决:html { -webkit-text-size-adjust:100%; }
iPhone和Android的浏览器纵向和橫向模式皆有自动调整字体大小的功能,用CSS属性-webkit-text-size-adjust可以控制。

分类至 JS/CSS
2条评论

移动端H5页面屏蔽双击放大的功能

我写这套博客程序的时候,在iPhone手机safari上预览,快速双击页面任意位置,页面会被放大。被放大的程度,是刚好抵消主div框架设置的左右两边的margin。而我,不想要这样的功能!
在网上搜索,iPhone禁止页面双击放大,得到的答案大多是设置meta标签viewport:
content="width=device-width,initial-scale=1,user-scalable=no"
早几年前,上面这行代码还挺好用。而现在,随着iOS系统的更新升级,此方法已经不管用了。

分类至 JS/CSS
0条评论