티스토리, 연차 이미지 (블로그 나이)를 넣어보자~

 

 

    

 

 

2017 티스토리 결산 뱃지 이미지를 랜덤하게~

 

 

 

 

[Demo] 연차 이미지 넣기 feat. TISTORY 2017 Badge

 

 

 

 

 

 

Code

 

 

<div id="badge2017">
	<div class="years"></div>
</div>

 

 

#badge2017 {
      display:flex;
      justify-content:center;
      align-items:center;
      width:352px;
      height:352px;
      padding:0px;
      background:#000;
      background-size:contain;
      background-repeat:no-repeat;
      background-position:center }

  #badge2017 .years {
      width:fit-content;
      height:fit-content;
      padding:0px !important;
      font-family:'Arial';
      font-weight:bolder;
      text-align:center }

 

 

let yearsT = 9; // 연차
let badgeLink = [];
badgeLink = [ // 뱃지 이미지 링크
    'https://.../img.png',
    'https://.../img.png',
    'https://.../img.png',
    'https://.../img.png',
    'https://.../img.png',
    'https://.../img.png',
    'https://.../img.png',
    'https://.../img.png'
];

let badgeT = badgeLink[Math.round(Math.random() * (badgeLink.length - 1))];
document.querySelector('#badge2017').style.backgroundImage = 'url(' + badgeT + ')';
let bYears = document.querySelector('#badge2017 .years');
bYears.innerText = yearsT;

switch (badgeLink.indexOf(badgeT)) {
    case 0: // Badge #1
    bYears.style.fontSize = '50px';
    bYears.style.color = '#fff';
    bYears.style.marginTop = '55px';
    bYears.style.marginLeft = '-43px';
    break;

    case 1: // Badge #2
    bYears.style.fontSize = '48px';
    bYears.style.color = '#000';
    bYears.style.marginTop = '-153px';
    bYears.style.marginLeft = '-170px';
    break;

    case 2: // Badge #3
    bYears.style.fontSize = '46px';
    bYears.style.color = '#422b2c';
    bYears.style.marginTop = '88px';
    bYears.style.marginLeft = '-70px';
    break;

    case 3: // Badge #4
    bYears.style.fontSize = '60px';
    bYears.style.color = '#000';
    bYears.style.marginTop = '62px';
    break;

    case 4: // Badge #5
    bYears.style.fontSize = '50px';
    bYears.style.color = '#000';
    bYears.style.marginTop = '-90px';
    break;

    case 5: // Badge #6
    bYears.style.fontSize = '30px';
    bYears.style.color = '#fff';
    bYears.style.marginTop = '202px';
    break;

    case 6: // Badge #7
    bYears.style.fontSize = '60px';
    bYears.style.color = '#000';
    bYears.style.marginTop = '-14px';
    break;

    case 7: // Badge #8
    bYears.style.fontSize = '60px';
    bYears.style.color = '#fff';
    bYears.style.marginTop = '-14px';
    break;
}

 

 

Tistory_Badge_2017.zip

419.1 kB