(→개요) |
(→개요) |
||
16번째 줄: | 16번째 줄: | ||
<script type="module"> | <script type="module"> | ||
import | (async () => { | ||
var colorHash = new ColorHash({ | const { default: ColorHash } = await import('https://cdnjs.cloudflare.com/ajax/libs/color-hash/2.0.1/color-hash.min.js'); | ||
var colorHash = new ColorHash({lightness: 0.5, saturation: 0.7}); | |||
function showLavatar(username) { | function showLavatar(username) { | ||
34번째 줄: | 33번째 줄: | ||
showLavatar("두시기"); | showLavatar("두시기"); | ||
showLavatar("석삼"); | showLavatar("석삼"); | ||
})() | |||
</script> | </script> | ||
</syntaxhighlight> | </syntaxhighlight> |
2021년 9월 15일 (수) 02:11 판
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 type="module">
(async () => {
const { default: ColorHash } = await import('https://cdnjs.cloudflare.com/ajax/libs/color-hash/2.0.1/color-hash.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자바스크립트 웹페이지 읽기 ― …