小程序利用 safe-area-inset-* 兼容 iPhoneX

小程序在适配iPhoneX的过程中碰到了坑,查了很多资料说的都模凌两可。很多都是经验只谈,当然这篇文章也是从实践中总结出来的。所以想出一篇文章,只要能看懂文字就能看懂该文章。 分别创建屏幕上边框,右边框,下边框,左边框安全距离: safe-area-inset-top,safe-area-inset-right,safe-area-inset-bottom,safe-area-inset-left ...

分类至 JS/CSS
0条评论

js Date.parse() 格式问题

早上在调 ViewUI 的 DatePicker 组件参数,需要设置为某个日期之前不可选择。由于这个日期是服务端传过来的,所以就用Date.parse() 转换成毫秒时间戳再比较。 第1个问题: 服务端传过来的是 2021-05-18,用Date.parse() 转换后多了8小时: 于是想到在日期末尾添加 00:00:00...

分类至 JS/CSS
0条评论

自己写 highlight.js 行号插件

前端代码高亮插件 highlight.js,默认是不带行号显示功能的。如果要显示行号,我们得自己实现,或是使用第三方插件。下面就来介绍几种实现方式,并分析优缺点。

1、第一种,使用 <li></li> 标签实现行号

2、第二种,使用 highlightjs-line-numbers.js 插件显示行号

3、第三种,我自己的实现方式

分类至 JS/CSS
0条评论

JS 逗号操作符

逗号操作符  对它的每个操作数求值(从左到右),并返回最后一个操作数的值。

示例代码:

var x = 1;

x = (x++, x);

console.log(x);
// 输出: 2

x = (2, 3);

console.log(x);
// 输出: 3

另一种用法:

var obj = {
  fun: function () {
    console.log(this === window, this === obj);
  }	
};

obj.fun();
// 输出: false true

(0, obj.fun)();
// 输出: true false

var test = obj.fun;
test();
// 输出: true false

上面的代码中,(0, obj.fun)();等同于var test = obj.fun; test();,前者可以少引入一个临时变量。

参考资料:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Comma_Operator

分类至 JS/CSS
0条评论

解决 SheetJS 日期时间类型显示多出43秒的问题

最近在优化后台数据导出功能,把原先后台生成 Excel 的功能(PhpExcel太吃内存),改用 ajax 加载每页数据然后前端 JS 生成 Excel。

找到一个前端生成 Excel 的类库 SheetJS:https://github.com/SheetJS/js-xlsx,以及一篇使用介绍的博文:https://www.cnblogs.com/liuxianan/p/js-excel.html

在导出日期时间的数据列时,想当然的使用了 Date 类型,然后设置显示格式为 yyyy-mm-dd hh:mm:ss。可是最终结果却显示有偏差,莫名比原来的值多了43秒。

分类至 JS/CSS
0条评论

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条评论

CSS calc() 函数

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

分类至 JS/CSS
0条评论

ES6 简化对象写法

es5常规的写法:

var name = 'kobe';
var age = 39;
var obj = {
    name: name,
    age: age,
    getName: function () {
        return this.name;
    }
};
console.log(obj);
console.log(obj.getName());

 

es6简化对象的写法:

同名的属性可以省略,函数可以省略关键字function

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

 

分类至 JS/CSS
0条评论

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

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

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

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

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

分类至 JS/CSS
0条评论