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

(새 문서: ==개요== ;JavaScript 문자 아바타 구현 <source lang='html'> <style> .lavatar { width: 48px; height: 48px; line-height: 48px; font-size: 24px; text-align...)
 
22번째 줄: 22번째 줄:
       saturation: 0.7
       saturation: 0.7
     });
     });
     color = colorHash.hex(username);
     var color = colorHash.hex(username);
     var initial = username.charAt(0);
     var initial = username.charAt(0);
     document.write("<div class='lavatar' style='background:" + color + "'>" + initial + "</div>");
     document.write("<div class='lavatar' style='background:" + color + "'>" + initial + "</div>");

2016년 10월 7일 (금) 11:46 판

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>
  function showLavatar(username) {
    var colorHash = new ColorHash({
      lightness: 0.5,
      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");
  showLavatar("Bob");
  showLavatar("Carol");
  showLavatar("한놈");
  showLavatar("두시기");
  showLavatar("석삼");
</script>

2 같이 보기