-
랜덤한 알파벳과 숫자가 나오는 HEX CODE 작성하기TodayILearned/javascript 2021. 1. 29. 23:34
2021/01/25 - [TodayILearned/javascript] - Random HEX COLOR CODE 만들기
Random HEX COLOR CODE 만들기
book.vanillacoding.co/starter-kit/step-4/mini-web-projects/background-changer Background Changer 기간: 최대 3일 book.vanillacoding.co 를 참고하여 작성한 코드임을 밝힙니다. Random HEXCOLOR CODE COD..
tuigun.tistory.com
의 코드를 수정했다.
수정내용
기존에 여섯자리의 숫자만 나오는 hex code를 작성했는데,
tostring() 과 substring()를 이용해 숫자와 알파벳이 랜덤하게 나오는 hex code를 작성했다.
hex code는 16진법을 사용하므로 tostring(16)을 적용하여 사용했다.
또 기존에는 Math.random()으로 생성되는 숫자를 float()을 이용해 실수로 만들었는데
문자열을 추출하는 방식으로 사용하니 굳이 수식이 들어갈 필요가 없어졌다.
코드
const CODE = document.querySelector(".js_code"), INPUT = document.querySelector("input"), BODY = document.body; function getRandom(min,max){ return Math.random().toString(16).substr(2,8); } function handleClick(){ const HEXCODE = [ CODE.innerText = `#` + getRandom(100000,999999) ] BODY.style.backgroundColor = `${HEXCODE}` } function getCode(event){ INPUT.addEventListener("click",handleClick); } function init(){ getCode(); } init();
참고
substr()
developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/substring
String.prototype.substring() - JavaScript | MDN
substring()메소드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환합니다. The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the
developer.mozilla.org
tostring()
developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/toString
Number.prototype.toString() - JavaScript | MDN
toString() 메서드는 특정한 Number 객체를 나타내는 문자열을 반환합니다. radix Optional 수의 값을 나타내기 위해 사용되기 위한 기준을 정하는 2와 36사이의 정수. (진수를 나타내는 기수의 값.) Num
developer.mozilla.org
hex code
ko.wikipedia.org/wiki/%EC%9B%B9_%EC%83%89%EC%83%81
웹 색상 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. 둘러보기로 가기 검색하러 가기 웹 사이트를 만들 때, 여러 방법으로 색을 지정할 수 있다. 십육진법 표기[편집] 웹에서 십육진수쌍으로 색을 표현하는 방법은
ko.wikipedia.org
'TodayILearned > javascript' 카테고리의 다른 글
The Complete JavaScript Course 2021(2) (0) 2021.06.23 The Complete JavaScript Course 2021(1) (0) 2021.06.22 airbnb JavaScript Style Guide 적용하여 코드 수정하기 (0) 2021.01.27 Random HEX COLOR CODE 만들기 (2) 2021.01.25 노마드 코딩 Momentum clone coding(1) (0) 2021.01.08