根据文本生成颜色作为头像或者背景

最新推荐文章于 2022-11-11 10:32:17 发布

置顶划水为生的前端

最新推荐文章于 2022-11-11 10:32:17 发布

阅读量926

点赞数 1

分类专栏：自写功能文章标签：前端 css javascript

本文链接：https://blog.csdn.net/m0_47587616/article/details/106029632

版权

自写功能专栏收录该内容

14 篇文章 0 订阅

订阅专栏

根据文本生成颜色

用途
原理
实现

用途

之所以会写这个东西的原因是因为之前工作的时候有产品经理提了一个需求“我觉得我们现在这种用户头像都是默认的一个小人太单调了，一点都不能显示我们的逼格，能不能给做一个功能，要求根据用户的用户名生成一个带有随机颜色背景的以用户名第一个字作为显示的头像。”
别说啊，这个需求讲道理还是挺合理的，至少我很喜欢（毕竟这需求不是让我做）。
不过，既然感兴趣了，不妨就做他一做。

原理

既然要做了，那就要分析一下它的原理了，首先，我们经常在css中使用的颜色都是什么样子#555555这种纯数字间或带着点字母的、又分三位或者六位的，或者是rgb(255,255,255)这种格式的。
本文中采用的方式是#555555这种格式的。
那么，我们要怎样把文字转化为数字或者字母形式而且还比较适合作为颜色的值呢？
我个人采取的是通过charCodeAt(）方法先将文字转为其对应的unicode 值，然后再将获取到的unicode 值通过toString() 方法转化为对应的16进制数字，再截取其中六位或者三位作为颜色值，到此颜色就成功的生成啦。

实现

话不多说，上才艺。啊，不是，是上代码

<style type="text/css">
	#circle {
		width: 50px;
		height: 50px;
		border-radius: 25px;
		border: 1px solid black;
		text-align: center;
		line-height: 50px;
		font-size: 20px;
		color: white;
	}
</style>

<body>
	<input type="text" id="ipt" />
	<input type="button" onclick="changeCircleColor()" value="确定" />
	<div id="circle"></div>
</body>
<script>
	var ipt = document.getElementById('ipt')
	var cir = document.getElementById('circle')
	function changeCircleColor(){
		var val = ipt.value
		var tmp = ""
		// 将获取到的字符串先转成unicode码再转成16位数字
		for(var i = 0; i < val.length; i++){
			tmp += val[i].charCodeAt().toString(16)
		}
		// 判断转化为16位后字符串长度
		if(tmp.length > 6){
			// 长度大于6时取后6位作为颜色值
			tmp = tmp.substr(-6)
		}else if(tmp.length > 3){
			// 长度小于6大于3时取后3位作为颜色值
			tmp = tmp.substr(-3)
		}else{
			// 若长度小于三则设置默认色
			tmp = 'aquamarine'
		}
		cir.style.backgroundColor = '#'+tmp
		cir.innerHTML = val[0]
		console.log(tmp)
	}
</script>