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"/>