2018-12-09周记-工做小总结

这周工做任务较多，常常加班，住的远到家11点。周六加班，周日上午又体检，就写一下小总结吧。

pc chrome中页面的表单的缓存问题

作后台系统会用到许多表单，假如如今在a页面，有一个input，你输入了值，而后点击连接跳转到其余页面，再经过history.back() 或者 浏览器自带的返回按钮 返回到刚才的表单页，会发现input内的值依然存在，须要刷新才会重置。其实我以为这算是chrome作的一个优化。

给input设置如下属性能够解决此问题。

autocomplete="off"
复制代码

autocomplete="off"也能够用来禁止浏览器input输入框的历史内容提示。

只在chrome中测试，没有测试其余浏览器

另外，网上有说，设置meta禁用缓存有效，我设置了并无效果，不知道是否是用法不对。

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache,no-store,must-revalidate">
复制代码

由这个知识点能够衍生出 BFCache 的相关知识。

css counter-reset 和 counter-increment 属性的运用

有时候咱们须要作一个有序列表，按序号显示内容，如百度的搜索热点

这个时候就能够利用这个属性了。主要是加了注释的那几行，其余均可忽略。

ol {
    /* 初始化 变量值。默认为 0，若是须要设置，变量后面后面可跟上具体的值。这个属性不写也能够 */
    counter-reset: idx;  
}

ol>li {
    /* 设置自增变量 */
    counter-increment: idx;   
    padding: 5px 10px;
    color: -webkit-link;
    font-size: 13px;            
}

ol>li::before {
    /* 设置 content */
    content: counter(idx);   
    display: inline-block;
    margin-right: 4px;
    padding: 1px 0;
    width: 14px;
    color: #fff;
    line-height: 100%;
    font-size: 12px;
    text-align: center;
    background-color: #8eb9f5;
}
ol>li:nth-child(1)::before {
    background-color: #f54545
}
ol>li:nth-child(2)::before {
    background-color: #ff8547;
}
ol>li:nth-child(3)::before {
    background-color: #ffac38;
}
复制代码

<ol>
    <li>嘿嘿嘿</li>
    <li>哈哈哈</li>
    <li>嘻嘻嘻</li>
    <li>呵呵呵</li>
    <li>啦啦啦</li>
</ol>
复制代码

效果如图：

强大的 background-image

background-image 能够写多个。同理 background-position等其余的对应属性也能够多个

如淘宝双11的按钮

首先要了解这几个属性 background-clip background-origin

正常来讲咱们能够用两个容器写出这个效果，将红色区域覆盖在黄色区域上。 但由于 background-image 能够写多个，因此用一个容器也是ok的。

button {
    outline: none;
}

.btn {
    min-width: 290px;
    height: 90px;
    position: relative;
    border-radius: 50px;
    font-weight: 500;
    /* 给按钮设置 border, 配合 background-origin 和 background-clip */
    border: solid 5px transparent;
    color: #5e3700;
    font-size: 32px;
    margin: 20px;
}

.btn.btn-default {
    /* 按钮的阴影部分 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    /* 能够设置多个，最前面的层级最高，因此第一个确定是按钮的红色渐变，而后才是黄色渐变 */ 
    background-image: 
        linear-gradient(to right, #ff7c2d 3%, #ff016e 97%),
        linear-gradient(to bottom, #fff3b6, #e27d2c);
    /* background-origin 的默认值是 padding-box, 这样的话 border 的颜色就不可控了，*/
    /* 因此改为 border-box，相对于边框开始绘制背景色*/
    background-origin: border-box;
    /* 而后再设置红色渐变背景的绘制区域为 padding-box, 黄色渐变背景的绘制区域为 border-box*/
    /* 这样的话，黄色渐变背景就露出来啦，露出的大小恰好是border的宽度 */
    background-clip: padding-box, border-box;
}
复制代码

<button class="btn btn-default"></button>
复制代码

参考

聊聊双11互动主动法中前端技术亮点