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互動主動法中前端技術亮點