前端冷知识
Html
- 控制台输入下面代码，可以编辑整个网页。
document.body.contentEditable='true'
- 处理 url 字符串是比较麻烦的，可以使用 a 标签自动解析 url，下面是一个比较完善的处理方法。
function urlParse(url, key) {
var a = document.createElement('a')
a.href = url
var result = {
href: url,
protocol: a.protocol.replace(':', ''),
port: a.port,
query: a.search,
params: (function(){
var ret = {}, centArr,
seg = a.search.replace(/^\?/, '').replace(/^\?/,'').split('&')
for (i = 0, len = seg.length; i < len; i ++) {
if (!seg[i]) { continue }
centArr = seg[i].split('=')
ret[centArr[0]] = centArr[1]
}
return ret
}()),
hash: a.hash,
file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
path: a.pathname.replace(/^([^\/])/, '/$1'),
relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
segments: a.pathname.replace(/^\//, '').split('/')
}
a = null
return key ? result[key] : result
}
// H5 有新的 API URL 也可以快速的处理一个链接
var url = new URL('https://www.baidu.com/')
url.hash
...
- 带有 Id 属性的元素，会创建全局变量
// html
<div id="test">div>
// js
console.log(test)
// => - 设置 script 标签 type=’text’，然后使用 script 标签存储数据，可以轻松的取到文本
// html
// js
var text = document.getElementById('text').innerHTML
// text => hello world !
// 空格换行等缩进也会被获取- 在 body 标签中加入可见可编辑的 style 标签可以做一个实时编写样式的输入框
<body>
<style style="display:block; position: fixed;" contentEditable>
body { background: red; }
style>
body>CSS
- 文字模糊效果
color: transparent;
text-shadow: #111 0 0 5px;
- 纯 CSS 实现长宽成比例且自适应屏幕的元素
// html
<div class="wrap">
<div calss="content">内容div>
div>
// css
.wrap {
position: relative;
width: 50%;
padding: 0 0 50% 0; }
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }- 彩色图片加黑白滤镜效果
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);- 优化文本的显示效果
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}JavaScript
- 生成随机字符串
function generateRandomAlphaNum(len) {
var rdmString = "";
for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}- 浮点数快速取整
(12.4 / 4.13) | 0
// => 3
~~(12.4 / 4.13)
// => 3- 两个变量值的交换
var a=1, b=2
a=[b, b=a][0]原文链接：http://blog.csdn.net/qq_25243451/article/details/79269281