You Don't Know the Hack tech in the frontend development
You Don't Know the Hack tech in the frontend development
你所不知道的前端黑科技
css in js animation
live demo
See the Pen css in js 黑科技 by xgqfrms
(@xgqfrms) on CodePen.
js hover/over event
https://www.ifchange.com/about#done
onmouseover
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event
// 单行写一个评级组件
let rate = 1;
"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
// "★☆☆☆☆"
JavaScript 错误处理
// JavaScript Error & StackOverflow
const log = console.log;
try {
// throw new Error(`ts`);// ts
const err = {
type: "ts",
message: "ts error",
};
// throw new Error(err);
throw new Error(JSON.stringify(err));
} catch (e) {
log(e, typeof e, e.message)
// Error: {"type":"ts","message":"ts error"}
// "object" "{"type":"ts","message":"ts error"}"
const obj = JSON.parse(e.message)
log(obj)
const {
type,
message,
} = obj;
window.parent.location.href = `https://stackoverflow.com/search?q=[${type}]+${message}`;
}
// JavaScript Error & StackOverflow
const log = console.log;
try {
const err = {
type: "ts",
message: "ts error",
};
throw new Error(JSON.stringify(err));
} catch (e) {
// log(e, typeof e, e.message)
const {
type,
message,
} = JSON.parse(e.message);
window.parent.location.href = `https://stackoverflow.com/search?q=[${type}]+${message}`;
}
CSS 黑科技
UI 结构检测,加 1px 边框
// UI 结构检测,加 1px 边框
[].forEach.call($$("*"), function(a){
a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})
// OR
Array.prototype.forEach.call(document.querySelectorAll('*'), dom => dom.style.outline = `1px solid #${parseInt(Math.random() * Math.pow(2,24)).toString(16)}`);
void 0 === undefined
// true
Array(6).fill(8)
// (6) [8, 8, 8, 8, 8, 8]
// 金融数字格式化
// 1234567890 --> 1,234,567,890
// 正则实现
const test1 = '1234567890'
const format = test.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
console.log(format);
// 1,234,567,890
// 非正则实现
function formatCash(str) {
return str.split('').reverse().reduce((prev, next, index) => {
return ((index % 3) ? next : (next + ',')) + prev
})
}
console.log(formatCash('1234567890'));
// 1,234,567,890
refs
https://juejin.im/entry/5998f8396fb9a0247c6ec9cd
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
You Don't Know the Hack tech in the frontend development的更多相关文章
- (转) [it-ebooks]电子书列表
[it-ebooks]电子书列表 [2014]: Learning Objective-C by Developing iPhone Games || Leverage Xcode and Obj ...
- Frontend Development
原文链接: https://github.com/dypsilon/frontend-dev-bookmarks Frontend Development Looking for something ...
- RednaxelaFX写的文章/回答的导航帖
https://www.zhihu.com/people/rednaxelafx/answers http://hllvm.group.iteye.com/group/topic/44381#post ...
- 【转】Styling And Animating SVGs With CSS
原文转自:http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/?utm_source=CSS- ...
- Top JavaScript Frameworks, Libraries & Tools and When to Use Them
It seems almost every other week there is a new JavaScript library taking the web community by storm ...
- GitHub awesome Resource
各种Awesome技术资源的资源聚合: https://github.com/sindresorhus/awesome Contents Platforms Programming Languages ...
- frontend-tools
收集整理好用的前端开发利器(Collect good front-end development tools ) 1.w3cplus前端工具 2.jsfiddle在线JS代码调试工具 3.w3cfun ...
- 所有语言的Awesome(2)
Curated list of awesome lists https://awesomeweekly.co https://github.com/sindresorhus/awesome ✨ Pre ...
- Tech Stuff - Mobile Browser ID (User-Agent) Strings
Tech Stuff - Mobile Browser ID (User-Agent) Strings The non-mobile stuff is here (hint: you get jerk ...
随机推荐
- 为什么 Go 模块在下游服务抖动恢复后,CPU 占用无法恢复
为什么 Go 模块在下游服务抖动恢复后,CPU 占用无法恢复 https://xargin.com/cpu-idle-cannot-recover-after-peak-load/ 极端情况下收缩 G ...
- secure hashes message digests 安全哈希 消息摘要
hashlib --- 安全哈希与消息摘要 - Python 3.8.3 文档 https://docs.python.org/zh-cn/3.8/library/hashlib.html hashl ...
- CPU处理器架构和工作原理浅析
CPU处理器架构和工作原理浅析 http://c.biancheng.net/view/3456.html 汇编语言是学习计算机如何工作的很好的工具,它需要我们具备计算机硬件的工作知识. 基本微机设计 ...
- Jenkins部署web项目到Tomcat(shell脚本)
一.首先配置Publish Over SSH插件 配置地址:系统管理-->系统设置-->Publish over SSH(需要安装Publish over SSH插件) 二.jenkins ...
- Python基础(变量、字符编码、数据类型)
变量 变量名由字母.数字(不能为首字符).下划线组成,不能使用关键字 以下关键字不能声明为变量名 ['and', 'as', 'assert', 'break', 'class', 'continue ...
- 【DB宝36】使用Docker分分钟搭建漂亮的prometheus+grafana监控
目录 一.部署Prometheus+grafana环境 1.1.下载Prometheus+grafana镜像 1.2.创建镜像 1.3.浏览器访问 二.监控Linux主机 2.1.在被监控主机上部署n ...
- Java——I/O相关练习代码
File文件的相关练习 文件操作的三种方式 文件的相关方法练习 文件创建删除操作 文件练习 FileReader读取文件 读取文件逐行读取 InputStreamReader字符输出流 换行输出 Bu ...
- Spring Boot项目application.yml文件数据库配置密码加密
在Spring boot开发中,需要在application.yml文件里配置数据库的连接信息,或者在启动时传入数据库密码,如果不加密,传明文,数据库就直接暴露了,相当于"裸奔"了 ...
- 误删eth1或者 eth0
不小心把机房,eth1删除了,过2天还演示,折腾一下午.... 首先eth1存在地方是2块./etc/sysconfig/network-scripts/下 /et/sysconfig/network ...
- 提供读取excel 的方法
/** * 对外提供读取excel 的方法 * */ public static List<List<Object>> readExcel(String path) throw ...