欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純CSS實現(xiàn)取字符串的第一個字符實現(xiàn)文字圖標功能

  發(fā)布時間：2020-05-11 15:13:58   作者：鄧孟鑫   我要評論
這篇文章主要介紹了純CSS實現(xiàn)取字符串的第一個字符實現(xiàn)文字圖標功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

 如何通過CSS實現(xiàn)文字圖標

/*圖標樣式*/
.nav-icon-normal {
    width: 32px;
    height: 32px;
    line-height: 33px;
    display: inline-block;
    border-radius: 6px;
    background-color: #b3b4c5;
    vertical-align: middle;
    overflow: hidden;
    font-size: 16px;
    text-indent: 8px;
    text-align: center;
    letter-spacing: 8px;
    color: #fff;
    word-break: break-all;
}
<div class="nav-icon-normal">技術(shù)是基礎(chǔ)</div>
<div class="nav-icon-normal">能力是關(guān)鍵</div>
<div class="nav-icon-normal">溝通最重要</div>
<div class="nav-icon-normal">通用接口</div>

效果預覽

 這樣基本效果實現(xiàn)出來，但是還是差一點。怎么通過實現(xiàn)圖標背景色跟隨文字

可以看這篇Js 根據(jù)名字提取顏色值

如何實現(xiàn)看這里，下面代碼僅用于該文章的示例，真實使用需要根據(jù)實際情況做調(diào)整

var titles = ["技術(shù)是基礎(chǔ)", "能力是關(guān)鍵", "溝通最重要", "通用接口"];
var html = "";
for (let i = 0; i < titles.length; i++) {
    const title = titles[i];
    const color = extractColorByName(title);
    html += '<div class="nav-icon-normal" style="background-color:{0}">{1}</div>'.replace('{0}', color).replace('{1}', title);
}
// 輸出
document.write(html);
/**
 * 根據(jù)名字提取顏色
 * @param name 名字
 */
function extractColorByName(name) {
    var temp = [];
    temp.push("#");
    for (let index = 0; index < name.length; index++) {
        temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16));
    }
    return temp.slice(0, 5).join('').slice(0, 4);
}

實現(xiàn)后的效果如下

 最終附上案列代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /*圖標樣式*/
        .nav-icon-normal {
            width: 32px;
            height: 32px;
            line-height: 33px;
            display: inline-block;
            border-radius: 6px;
            background-color: #b3b4c5;
            vertical-align: middle;
            overflow: hidden;
            font-size: 16px;
            text-indent: 8px;
            text-align: center;
            letter-spacing: 8px;
            color: #fff;
            word-break: break-all;
        }
    </style>
</head>
 
<body>
    <script type="text/javascript">
        var titles = ["技術(shù)是基礎(chǔ)", "能力是關(guān)鍵", "溝通最重要", "通用接口"];
            var html = "";
            for (let i = 0; i < titles.length; i++) {
                const title = titles[i];
                const color = extractColorByName(title);
                html += '<div class="nav-icon-normal" style="background-color:{0}">{1}</div>'.replace('{0}', color).replace('{1}', title);
            }
            // 輸出測試HTML
            document.write(html);
            /**
             * 根據(jù)名字提取顏色
             * @param name 名字
             */
            function extractColorByName(name) {
                var temp = [];
                temp.push("#");
                for (let index = 0; index < name.length; index++) {
                    temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16));
                }
                return temp.slice(0, 5).join('').slice(0, 4);
            }
               </script>
</body>
 
</html>

總結(jié)

到此這篇關(guān)于純CSS實現(xiàn)取字符串的第一個字符實現(xiàn)文字圖標功能的文章就介紹到這了,更多相關(guān)css實現(xiàn)文字圖標內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • css圖標與文字對齊的兩種實現(xiàn)方法

    下面小編就為大家?guī)硪黄猚ss圖標與文字對齊的兩種實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給的大家做個參考。一起跟隨小編過來看看吧
    2016-06-12

  • Html+css實現(xiàn)純文字和帶圖標的按鈕

    這篇文章主要介紹了Html+css實現(xiàn)純文字和帶圖標按鈕的方法，按鈕有很多種外觀，本文介紹了純文字和帶圖標兩種按鈕，感興趣的小伙伴們可以參考一下
    2016-02-24

  • css控制文字前的小圖標具體寫法

    文字前的小圖標在一些列表展示中特別的有用，本文會介紹一些實現(xiàn)的此效果的具體方法，感興趣的你可不要錯過了哈，希望本教程對你有所幫助
    2013-03-20

最新評論