"JavaScript 문자 아바타 구현"의 두 판 사이의 차이

태그: 되돌려진 기여
태그: 되돌려진 기여
16번째 줄: 16번째 줄:


<script>
<script>
import('https://cdnjs.cloudflare.com/ajax/libs/color-hash/2.0.1/esm.min.js').then( ()=> {
import('https://cdnjs.cloudflare.com/ajax/libs/color-hash/2.0.1/esm.min.js').then( (ColorHash)=> {


     var colorHash = new ColorHash({lightness: 0.5, saturation: 0.7});
     var colorHash = new ColorHash({lightness: 0.5, saturation: 0.7});

2021년 9월 15일 (수) 02:17 판

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>
import('https://cdnjs.cloudflare.com/ajax/libs/color-hash/2.0.1/esm.min.js').then( (ColorHash)=> {

    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 같이 보기