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互动主动法中前端技术亮点