根據文字生成顏色作為頭像或者背景

2021-10-05 22:35:22 字數 1560 閱讀 1274

之所以會寫這個東西的原因是因為之前工作的時候有產品經理提了乙個需求「我覺得我們現在這種使用者頭像都是預設的乙個小人太單調了,一點都不能顯示我們的逼格,能不能給做乙個功能,要求根據使用者的使用者名稱生成乙個帶有隨機顏色背景的以使用者名稱第乙個字作為顯示的頭像。」

別說啊,這個需求講道理還是挺合理的,至少我很喜歡(畢竟這需求不是讓我做)。

不過,既然感興趣了,不妨就做他一做。

既然要做了,那就要分析一下它的原理了,首先,我們經常在css中使用的顏色都是什麼樣子#555555這種純數字間或帶著點字母的、又分三位或者六位的,或者是rgb(255,255,255)這種格式的。

本文中採用的方式是#555555這種格式的。

那麼,我們要怎樣把文字轉化為數字或者字母形式而且還比較適合作為顏色的值呢?

我個人採取的是通過charcodeat() 方法先將文字轉為其對應的unicode值,然後再將獲取到的unicode值通過tostring() 方法轉化為對應的16進製制數字,再擷取其中六位或者三位作為顏色值,到此顏色就成功的生成啦。

話不多說,上才藝。啊,不是,是上**

type

="text/css"

>

#circle

style

>

>

type

="text"

id="ipt"

/>

type

="button"

onclick

="changecirclecolor()"

value

="確定"

/>

"circle"

>

div>

body

>

>

var ipt = document.

getelementbyid

('ipt'

)var cir = document.

getelementbyid

('circle'

)function

changecirclecolor()

// 判斷轉化為16位後字串長度

if(tmp.length >6)

else

if(tmp.length >3)

else

cir.style.backgroundcolor =

'#'+tmp

cir.innerhtml = val[0]

console.

log(tmp)

}script

>

效果如下

再附乙個最近在做的純前端記賬小玩具的截圖,其中的顏色都是通過這個方法生成的

個人感覺通過這個方法生成的顏色還挺和諧的,沒有純黑、純白、純紅那麼刻意。

好啦,關於根據文字生成顏色的方法就介紹到這裡啦。

程式設計實現根據指定文字生成電子印章

在材料demo中有如下改動 1.通過hedit可以看到示例程式生成的的長寬引數都是00 00 00 80也就是8 16 128 在檔案頭的地方將長寬修改為128 2.因為要輸入三個引數 且順序為程式 點陣檔案txt 新建bmp檔案 因而將argc 2改為argc 3 那麼對應的點陣檔案路徑就是在ar...

文字生成器

給出 n 個單詞和文字長度 m 求有多少文字滿足其內至少包含乙個單詞,答案對 10007 取餘。直接求滿足的文字比較困難,我們考慮求答案的補集,也就是不包含任何乙個單詞的文字串的數量。對於這個答案我可以用 dp 求解,但考慮對單詞的查詢我們需要用 a c自動機解,因此題目就比較明顯了,ac 自動機上...

文字生成相關演算法總結

2014年google brain團隊提出基於深度學習的seq2seq模型。如圖1所示,該模型在結構上主要分為兩部分 編碼器encoder 解碼器decoder。encoder部分使用某一深度學習神經網路讀取輸入關鍵字或句子,將關鍵字或句子壓縮到乙個固定的維度 decoder部分的深度學習網路則讀取...