2018-12-09週記-工作小總結

jkCaptain發表於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 屬性的運用

有時候我們需要做一個有序列表，按序號顯示內容，如百度的搜尋熱點

2018-12-09週記-工作小總結

這個時候就可以利用這個屬性了。主要是加了註釋的那幾行，其他都可忽略。

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>
複製程式碼

效果如圖：

2018-12-09週記-工作小總結

強大的 background-image

background-image 可以寫多個。同理 background-position等其他的對應屬性也可以多個

如淘寶雙11的按鈕

2018-12-09週記-工作小總結

首先要了解這幾個屬性 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互動主動法中前端技術亮點

相關文章