1 개요[ | ]
- JavaScript 문자 아바타 구현
html
Copy
<style>
.lavatar {
width: 48px;
height: 48px;
line-height: 48px;
font-size: 24px;
text-align: center;
color: #fff;
float: left;
}
</style>
<body></body>
<script type="module">
import ColorHash from 'https://cdnjs.cloudflare.com/ajax/libs/color-hash/2.0.1/esm.min.js';
var colorHash = new ColorHash({lightness: 0.5, saturation: 0.7});
function showLavatar(username) {
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자바스크립트 웹페이지 읽기 ― …