(→개요) |
|||
(같은 사용자의 중간 판 16개는 보이지 않습니다) | |||
14번째 줄: | 14번째 줄: | ||
} | } | ||
</style> | </style> | ||
<body></body> | |||
<script | <script type="module"> | ||
import ColorHash from 'https://cdnjs.cloudflare.com/ajax/libs/color-hash/2.0.1/esm.min.js'; | |||
var colorHash = new ColorHash({ | |||
var colorHash = new ColorHash({lightness: 0.5, saturation: 0.7}); | |||
function showLavatar(username) { | function showLavatar(username) { |
2021년 9월 15일 (수) 02:27 기준 최신판
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
로그인하시면 댓글을 쓸 수 있습니다.