본문 바로가기

JavaScript3

[JavaScript] 이미지 랜덤 출력(Math.Random() - 랜덤 함수) 게시글 작성 목록의 사용자 아이콘이 하나의 색상으로 통일되어있는게 왠지 예쁘지가 않았다. 그래서 색상만 다른 아이콘을 두개 더 집어 넣고 랜덤하게 아이콘을 출력하는 코드를 짜 보았다. (javaScript기반의 Quasar 프레임워크를 사용하고 있다.) data () { return { userImg: '' } } 우선 문자열 형식으로 변수 선언을 해주고 사용할 HTML 요소에 변수 바인딩을 해주었다. (반복문으로 게시글을 하나씩 출력하는 구조이다.) Math.Random() userRandomImg () { const randomNum = Math.floor(Math.random() * 3) if (randomNum === 0) { this.userImg = 'img:icons/chat-profile-.. 2023. 12. 22.
[javaScript]월 별 데이터의 최댓값, 최솟값 구하기(feat. split) - MAX, MIN 최댓값, 최솟값 구하기(MAX, MIN) 월별 가격 데이터를 출력한 후 스파크 그래프로 표현해서, 스파크 그래프 마우스 hover시 최댓값을 가진 월과 최솟값을 가진 월을 표시해줘야 한다. 가져온 데이터는 다음과 같다. * javaScript 기반의 Quasar 프레임워크를 사용하고 있다 fn_searchCntSpark (rowIndex, columnIndex, value, headerText, item, dataField) { const fields = dataField.split(",") let min = Number.MAX_VALUE let max = Number.MIN_VALUE for (let i = 0; i < fields.length; i++) { const v = Number(item[fi.. 2023. 12. 14.
[javaScript/jQuery/Vue.js]버튼 클릭 시 요소 숨기기/보이기 오랜만에 버튼 클릭 시 HTML요소를 숨겼다 나타냈다를 반복하는 스크립트를 작성하게 되었다. 프레임워크 덕분에 간단하게 만들었지만 예전에 jQuery를 사용해 비슷한 화면을 제작했던 것이 생각나 gitHub를 뒤져 옛날 프로젝트를 찾아냈다. 처음으로 이 코드를 썼을 때는 요소가 사라졌다가 뿅하고 다시 나타나는게 재밌어서 몇번이나 클릭했던 기억이 있다. 정리해 두고 다음에 참고하면 좋을 것 같다. jQuery를 이용한 onClick시 요소 숨기기/나타내기 기록하기 숨겼다 나타내는 부분 왼쪽의 버튼을 클릭하면 독서록을 기록할 수 있는 폼이 나타났다가 다시 버튼을 클릭하면 폼이 사라지는 형식의 페이지이다. Vue.js onClick시 요소 숨기기/나타내기 이번에는 Vue.js프레임워크를 이용해 변수를 선언 한.. 2023. 10. 30.
728x90

티스토리툴바