前端开发札记

最近的一些开发过程遇到的东西或者看到的觉得需要记下来的关于javascript的技巧/代码。后期将对本文内容进行归类总结,并且汇编为专辑文章。

一、开发手记

js解析有不定项子集的json数组

function jsonToHtml(json){
var res;
for(var key in json){
if(typeof json[key] == "object"){
data = jsonToHtml(json[key]);
res += data;
}else{
res += json[key];
}
}
return res;
}

常用时间戳timestamp格式化

const timeFormat = (t,format='Y-M-D-hm') => {
if (!t || t == '') return t;
let n = new Date();
n.setTime(t);
let y = n.getFullYear(); //year
let m = n.getMonth() + 1; //month
let d = n.getDate(); //day
let h = n.getHours(); //hour
let min = n.getMinutes(); //minutes
if (m < 10) m = '0' + m;
if (d < 10) d = '0' + d;
if (h < 10) h = '0' + h;
if (min < 10) min = '0' + min;
let res = '';
switch(format) {
case "Y-M-D-hm":
res = y + '年' + m + '月' + d + '日' + ' ' + h + ':' + min;
break;
case "y/m/d-hm":
res = y + '/' + m + '/' + d + ' ' + h + ':' + min;
break;
case "y/m/d":
res = y + '/' + m + '/' + d;
break;
default:
break;
}
return res;
}

常用货币格式化

(eg: 123,123,123,121.55)

var n = parseFloat(45412345678.55); /*转化为浮点型*/
var l = n.toString().split('.')[0]; /*整数部分*/
var s = n.toString().split('.')[1] || '00'; /*小数部分*/
var r,x = '';
var w = Math.floor(parseInt(l.length/3)); /*取商*/
var y = parseInt(l.length%3); /*取余*/
if (y == 0) {w = w-1;}
for (var i = 0; i < w; i++) {
r = ',' + l.substring(l.length-3,l.length);
l = l.substring(0,l.length-3);
x = r + x; /*拼接*/
}
x = l + x + '.' + s;

更优雅的做法应该是这样的:

const currency = (num) => {
/* 格式化为:123,456,789 */
if (!num || isNaN(num)) {
return ''
}
const str = num.toString()
let l = Math.ceil(str.length/3), n = []
for (let i = 0; i < l; i++) {
let end = str.length-3*i,start = Math.max(str.length-3*(i+1),0)
n.unshift(str.substring(start,end))
}
return n.join(',')
}

演示:

密码类型输入处理

<input type="password" onkeyup="value=value.replace(/[\W]/g,'')">
<!-- 过滤密码中非数字、英文字母外的字符 -->
<!-- 实际上,减号还是可以输入的 -->

演示:

移除HTML5 input type=number 的上下小箭头

<!-- 针对chrome -->
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
<!-- 针对Firefox -->
input[type="number"]{-moz-appearance:textfield;}

修复input[type=file]在EDGE下无限弹出的问题

修复input[type=file]在EDGE下无限弹出的问题

修复弹出层用animate动画,导致内层文字抖动

backface-visibility: hidden;
transform-style: preserve-3d;

二、新手起手式

移动端WEBAPP开发

为了模仿顶部通栏和底部工具按钮,常用到 position: absolute; 来进行顶部和底部栏的定位,例如设置底部工具栏,则web结构如下:

<div class="topbar">我是顶部栏</div>
<div class="mainbody">我是主要内容content</div>
<div class="foobar">我是底部栏</div>

主要样式:

.topbar{
height: 30px;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.mainbody{
margin-top: 30px;
margin-bottom: 45px;
position: relative;
}
.foobar{
height: 45px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}

H5兼容低版本浏览器

为了兼容低版本浏览器下的H5渲染,常需要在head加入这样一段代码:

<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

同时可能引入normalize.css进行全局样式的初始化。

文件下载解决方法

【设置H5属性download=XXX】

<a href="path" download="file.name">Download</a>
<!-- 此处的path必须与站点处于同个IP或域名下,否则执行浏览器默认行为,而不是下载行为。 -->
<!-- file.name只需填写文件名称,不需要添加后缀。 -->

兼容IE的单行文字两端对齐

非flex布局下,在编写HTML文字对齐样式时,兼容IE是个难题,以下是其中一个解决单行文字两端对齐的样式:

justify-block {
text-align-last: justify; /* webkit 内核 */
-moz-text-align-last: justify; /* Firefox */
-ms-text-align-last: justify;/* IE 8+ 支持 */
text-justify: inter-ideograph;/* IE 私有属性 */
}

JS运算符优先级序列表(从高到低)

运算符 描述
.[]() 字段访问、数组下标、函数调用以及表达式分组
++---~!delete new typeof void 一元运算符、返回数据类型、对象创建、未定义值
* / % 乘法、除法、取模
+ - + 加法、减法、字符串连接
<< >> >>> 移位
< <= > >= instanceof 小于、小于等于、大于、大于等于、instanceof
== != === !== 等于、不等于、严格相等、非严格相等
& 按位与
^ 按位异或
| 按位或
&& 逻辑与
|| 逻辑或
?: 条件
= oP= 赋值、运算赋值
, 多重求值
hongbao.png
NOOLDEY

本文作者:NOOLDEY

做一个诗情画意的码农,皮皮猪,我们走!

原文链接: http://zhuweisheng.com.cn/html/html-diary/

本站文章如无特殊声明均为原创,创作不易,转载请注明来源,谢谢!