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

4번째 줄: 4번째 줄:
<source lang='html'>
<source lang='html'>
<style>
<style>
  .lavatar {
    .lavatar {
    width: 48px;
        width: 48px;
    height: 48px;
        height: 48px;
    line-height: 48px;
        line-height: 48px;
    font-size: 24px;
        font-size: 24px;
    text-align: center;
        text-align: center;
    color: #fff;
        color: #fff;
    float: left;
        float: left;
  }
    }
</style>
</style>


<script src='//cdn.rawgit.com/zenozeng/color-hash/master/dist/color-hash.js'></script>
<script src='//cdn.rawgit.com/zenozeng/color-hash/master/dist/color-hash.js'></script>
<script>
<script>
  function showLavatar(username) {
     var colorHash = new ColorHash({
     var colorHash = new ColorHash({
      lightness: 0.5,
        lightness: 0.5,
      saturation: 0.7
        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");
    function showLavatar(username) {
  showLavatar("Bob");
        var color = colorHash.hex(username);
  showLavatar("Carol");
        var initial = username.charAt(0);
  showLavatar("한놈");
        document.write("<div class='lavatar' style='background:" + color + "'>" + initial + "</div>");
  showLavatar("두시기");
    }
  showLavatar("석삼");
 
    showLavatar("Alice");
    showLavatar("Bob");
    showLavatar("Carol");
    showLavatar("한놈");
    showLavatar("두시기");
    showLavatar("석삼");
</script>
</script>
</source>
</source>
<jsfiddle>gpvtxwoh</jsfiddle>
<jsfiddle>gpvtxwoh</jsfiddle>

2016년 10월 7일 (금) 13:09 판

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