1.阻止input显示历史记录

如果不让浏览器保留表单输入的历史记录，只要在input标签里加入autocomplete="off "这个属性就行了：

2.一个div，在数字少的时候显示圆形，数字多就椭圆

HTML:

<span class="box">1<span>

CSS:

.box{
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    background: skyblue；
    color: white;
    //重要的样式
    padding:2px;    //只是为了不让里面的内容挨着边
    display: inline-block;
    border-radius:20px;  //20px就够了，不能设置50%哟，数字多了就成长方形，50%会很丑滴
    min-width: 18px;  //这里是行高

  }

3.为table设置1像素的边框

CSS：

table{
   border-collapse:collapse;
}
table tr td,table tr th{
   border:1px solid black;
}

4.mui真机调试查看对象属性

mui真机调试如果看不到对象具体的属性值，只是[object,object]，可以用JSON.stringify（对象）来输出看看。

5.停止另一个函数的定时器

怎样停止另一个函数的定时器呢：

1、在定时器函数里返回定时器即var time=setinterval()然后return time.

2、另外函数里调用定时器函数之后设置一个变量获取定时器函数返回值，然后clearInterval

6. 正则表达式---去所有空格

str.replace(/\s/g, "") // 去掉str字符串所有的空格

7.正则表达式---只中文

/^[\u4e00-\u9fa5]+$/ //只匹配中文的正则表达式‘

8.安卓或者ios拨号功能

<a href="tel:888,023"></a>：888转023
<a href="tel:11211211212"></a>：直接拨打手机号11211211212

9.点击空白蒙层消失

除obj对象以外的其它地方点击之后蒙层消失：点击对象是蒙层，obj是蒙层里面的有内容的子元素

1 dom.click(function(){
2     var obj=$("有内容的对象");
3     if(!obj.is(e.target) && obj.has(e.target).length === 0){
4       //隐藏蒙层
5     }
6 })
另外中方法是： 父级设置点击消失，然后子级设置阻止冒泡的js，即e.stopPropagation()

10.ie的img边框

IE中img标签有边框效果：设置img{border：none}就行了

11.padding：0

使用*{padding：0}会导致table中的cellpadding设置失效：

解决办法：设置td的padding，也能达到同样的效果

12.display:inline-block间隔解决

使用display:inline-block;会出现间隔，解决办法是：

在其父级添加：font-size:0

但是谷歌浏览器有默认最小字体限制，所以为了兼容还需加上-webkit-text-size-adjust:none 这一条

13.小程序快速创建4个文件

微信快速创建4个文件即：.wxml js json wxss包括目录一起：

在app.json的page里面直接填入要加入的页面比如：“pages/addr/addr”

然后自动就在pages目录下创建了addr目录，下面并且也有标准的4个文件。

14.vertical-align

vertical-align这个属性需要在元素是inline或者inline-block的时候才起作用，比如div这种block块元素对它是无效的；

这就是为什么有时候设置div为display:table-cell，vertical-align会起作用。可以把table-cell理解为inline-block。

15.小程序隐藏或显示

微信小程序中让某个元素隐藏或者显示，可以使用wx:if="{{判断语句}}"。如果这是后想判断当前索引值可以使用index。例如： wx:if="{{ index > 3 }}" 判断索引大于三的元素使之显示

在用wx:for="{{ }}"列表渲染时，需加上wx:key=""，可消除警告。

16.border颜色渐变

如果想border颜色有渐变的效果，可使用css3border-image属性。例如：border-image: linear-gradient( red 10%, blue 60%) 30 30; 当然，设置这个的时候，border要有宽度，为了兼容还需要加上浏览器前缀。

17.div嵌套，margin-top无效果

HTML结构：

<div class=“out”>
 //content
 <div class=“in”></div>
</div>

如果给in这个div设置margin-top，这时候in这个div并不会出现margin-top的效果，而是out这个div出现margin-top的效果。

但是如果out中有content等内容的时候，又不会出现这种问题。

如果不要content又要实现margin-top的效果，那么可以设置out这个div：overflow：hidden这个属性或者display：inline-block/table-cell

18.mui底部导航栏的a标签不能跳转的问题：

mui('body').on('tap','a',function(){
 document.location.href=this.href;
});

加上这句代码就可以了

19.fixed定位的元素相对父级而不是整个页面

设置fixed的元素默认是相对于浏览器窗口而言的，那么，怎样让它相对于指定的父级fixed定位呢。

解决方法是：给设置fixed元素的父级设置relative定位，设置fixed的改为absolute，网上说可以给父级设置transform：translate(0,0)，fixed不改变也能实现，那是因为transform影响了fixed 的 containing block

20.微信小程序，在需要在video上覆盖内容时，需要使用cover-view标签

21.如果在safari浏览器中使用display:inline-block时导致有间隙，导致平均分配的子元素并不能在一行显示的时候，可以把display:inline-block替换成display:table-cell。完美解决

22.如果想实现两端对齐的方式，可以使用下面的方法：

box{
    text-align: justify; 
}
box:after{
    display: inline-block;
    width: 100%;
    content: '';
}

或者是在box里面添加一个标签，样式和上面的after一样，也能达到效果。而且兼容性很好

23. :before/:after 与 ::before/::after的区别是前面的兼容性比后面的兼容性好，都是伪元素

24. :before这种伪元素必须要有content , 而这个content有个 attr（）函数，可以获取某元素的data-xx属性。