(새 문서: ==개요== ;JavaScript 문자 아바타 구현 <source lang='html'> <style> .lavatar { width: 48px; height: 48px; line-height: 48px; font-size: 24px; text-align...) |
(→개요) |
||
22번째 줄: | 22번째 줄: | ||
saturation: 0.7 | saturation: 0.7 | ||
}); | }); | ||
color = colorHash.hex(username); | var color = colorHash.hex(username); | ||
var initial = username.charAt(0); | var initial = username.charAt(0); | ||
document.write("<div class='lavatar' style='background:" + color + "'>" + initial + "</div>"); | document.write("<div class='lavatar' style='background:" + color + "'>" + initial + "</div>"); |
2016년 10월 7일 (금) 11:46 판
1 개요
- JavaScript 문자 아바타 구현
html
Copy
<style>
.lavatar {
width: 48px;
height: 48px;
line-height: 48px;
font-size: 24px;
text-align: center;
color: #fff;
float: left;
}
</style>
<script src='//cdn.rawgit.com/zenozeng/color-hash/master/dist/color-hash.js'></script>
<script>
function showLavatar(username) {
var colorHash = new ColorHash({
lightness: 0.5,
saturation: 0.7
});
var color = colorHash.hex(username);
var initial = username.charAt(0);
document.write("<div class='lavatar' style='background:" + color + "'>" + initial + "</div>");
}
showLavatar("Alice");
showLavatar("Bob");
showLavatar("Carol");
showLavatar("한놈");
showLavatar("두시기");
showLavatar("석삼");
</script>
2 같이 보기
편집자 Jmnote
로그인하시면 댓글을 쓸 수 있습니다.
- 분류 댓글:
- JavaScript (13)
HTML textarea 자동 높이 조절 ― …JavaScript 랜덤 한글 ― JmnoteJavaScript 랜덤 한글 ― JmnoteJavaScript 랜덤 한글 ― PinkcrimsonJavaScript 랜덤 한글 ― MywikierJavaScript 변수 ― Nathan on zetawikiJavaScript 변수 ― John JeongJavaScript 변수 ― SotoZeroClipboard 사용하기 ― LilisZeroClipboard 사용하기 ― Jmnote자바스크립트 HTML 테이블 행 추가/삭제 ― Pilming자바스크립트 HTML 테이블 행 추가/삭제 ― Jmnote자바스크립트 웹페이지 읽기 ― …