我常用的前端短代码记录
2018-02-28 本文已影响179人
春风本是人间客
1. 检查边距
*{ background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important; }
a7b789a9gy1fow4hu8khhj206203qwea.jpg
2. 保留小数点后两位
parseFloat((a).toFixed(2));//toFixed只能针对数字类型才能使用
3.Vue过滤器
filters: {
returnBill: function(value) {
var bills = ["否", "是"];
return bills[value];
}
}
4.高和宽
<li> 网页可见区域宽： document.body.clientWidth </li>
<li> 网页可见区域高： document.body.clientHeight </li>
<li> 网页可见区域宽： document.body.offsetWidth (包括边线的宽)</li>
<li> 网页可见区域高： document.body.offsetHeight (包括边线的高) </li>
<li> 网页正文全文宽： document.body.scrollWidth </li>
<li> 网页正文全文高： document.body.scrollHeight </li>
<li> 网页被卷去的高： document.body.scrollTop </li>
<li> 网页被卷去的左： document.body.scrollLeft </li>
<li> 网页正文部分上： window.screenTop </li>
<li> 网页正文部分左： window.screenLeft </li>
<li> 屏幕分辨率的高： window.screen.height</li>
<li> 屏幕分辨率的宽： window.screen.width </li>
<li> 屏幕可用工作区高度： window.screen.availHeight</li>
<li> 屏幕可用工作区宽度： window.screen.availWidth </li>
直接获取标签高或宽
.offsetHeight
5.新建一个react项目
1.安装
npm install -g create-react-app
2.创建
create-react-app my-app
3.安装UI
npm install material-ui
4.安装点击插件
npm install react-tap-event-plugin
5.安装fetch插件
npm install whatwg-fetch
6.安装react-router
npm install --save-dev react-router
npm install --S react-router-dom
打包
npm run-script build
6.限定N行
display: -webkit-box;
overflow: hidden;
white-space: normal!important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
单行
.table tbody > tr > td.name{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
7.fetch使用（POST）
fetch("http://119.23.225.18/getmsg", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
mode: "cors",
body: JSON.stringify({
page : 1,
rows : 10
})
}).then(function(res) {
if (res.status === 200) {
return res.json()
} else {
return Promise.reject(res.json())
}
}).then(function(data) {
console.log(data);
self.appentDomlist(data.data);
}).catch(function(err) {
console.log(err);
});
8.新版本上线（指导蒙版）
position: absolute;
box-shadow: rgba(0, 0, 0, 0.75) 10px 1px 1px 99px;
z-index: 100;
width: 367px;
height: 143px;
left: 40px;
top: 12px;
Image.png
9.把时间戳转为时间
var time = new Date(Number(value));
var Y = time.getFullYear();
var m = time.getMonth() + 1;
var d = time.getDate();
var H = time.getHours();
var mi = time.getMinutes();
var s = time.getSeconds();
if(m < 10) {
m = '0' + m;
}
if(d < 10) {
d = '0' + d;
}
if(H < 10) {
H = "0" + H;
}
if(mi < 10) {
mi = '0' + mi;
}
if(s < 10) {
s = "0" + s;
}
return (Y + "-" + m + "-" + d + " " + H + ":" + mi + ":" + s);
10.获取当前时间戳
var timestamp=new Date().getTime()；
11.两个时间戳相减所距时间
var now = new Date().getTime();
var nTime = now-value;
var day = Math.floor(nTime/1000/60/60/24);
var hour = Math.floor(nTime%1000/60/60);
var minute = Math.floor(nTime/1000/60);
var sec = Math.floor(nTime/1000);
console.log(day+"==="+hour+"==="+minute+"==="+sec);
12.网络请求发送参数格式转换
const formartJson2prams = (obj)=>{
var result = [];
for(const item in obj){
result.push(item+"="+obj[item])
}
return result.join("&");
}
13.引用模块的两种不同写法
//ES6 模块
import MyModule from './MyModule.js';
//CommonJS
var MyModule = require('./MyModule.js');
14.babel的坑
新版babel要安装两个，然后还有一大坨附属的，还要在webpack.config.js里面更改
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
15.判断对象{}是否为空
if(Object.keys(obj).length === 0){...}
16.CSS做三角形
width: 0;
height: 0;
border-color: #f60 transparent transparent transparent;
border-style: solid;
border-width: 10px;
17.width 100% 自适应
width: -webkit-fill-available;
18.雪碧图
background: url(xxx) no-repeat;
width: 64px;
height: 64px;
background-position: 0 -64px;
19.html自适应手机
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
20.最后一个li不显示border（类推）
方法一：
li{border-top:1px solid #000;}
li:first-child{border-top:none;}
方法二：
li+li{
border-top: 1px dashed #999;
}
方法三：
li:not(:last-child)...
21.禁用左键
$(document).ready(function(){
$(document).bind('contextmenu', function(e){
return false;
})
})
22.文字换行
word-wrap:break-word;
23.forEach跳出循环
var BreakException= {};
try {
[1,2,3].forEach(function(i) {
if(i === 2) throw BreakException;
console.log(i);
});
} catch(e) {
if (e!==BreakException) throw e;
}
//forEach是函数，不是语法，因此没有直接break的语法。如果要中止，可使用 Array.every 或 Array.some。
24.jquery input change事件
$("#input_id").on('input',function(e){
alert('Changed!')
});
25.随机整数
Math.floor(Math.random()*page.otherParams.userIds.length)
26.改变控制台面样式
console.log("%c来自:console","color:red;font-size:50px");
Image.png
27.电话正则
if(!(/^1[34578]\d{9}$/.test(responsibleTel.val()))){
return toastr.info("请输入正确的电话号码","提示！");
}
28.
29.
30.最简单的闭包
;(function(){
alert(1);
})();
31.vue循环时怎么绑定图片地址及href跳转地址
<li v-for="v in sites">
<a :href="v.herf">
<img v-bind:src="v.url"/>
<span>{{ v.text }}</span>
</a>
</li>
重点:
<a :href="v.herf">
和
<img v-bind:src="v.url"/>
