본문 바로가기

js

 (59)
js 2022. 10. 24. 15:35
[js]chart.js 차트 스크립트 See the Pen chart.js by sangmok-ye (@sangmok-ye) on CodePen. https://www.chartjs.org/docs/latest/ const custom = new Image(); custom.src = "https://cdn-icons-png.flaticon.com/128/4160/4160132.png"; // pointStyle: custom 으로 할경우 해당 url의 이미지로 변경됨 const x_val = ["1월","2월","3월","4월","5월","6월","7월"] const data = { labels: x_val, datasets:[{ label:"데이타셋", data:[10,100,25,80,50,85,15], pointStyle:"circl..
js 2022. 10. 21. 10:41
[js]숫자를 한글로 바꾸기 See the Pen 숫자를 한글로 by sangmok-ye (@sangmok-ye) on CodePen.
js 2022. 10. 11. 13:08
[js]e.stopPropagation()과 e.preventDefault() 레어어팝업 클릭 e.preventDefault()→ a링크 등과 같은 클릭이벤트를 강제로 무시하게 하는 스크립트e.stopPropagation()→ 버블링 무시하는 스크립트→ 레이어팝업에서 비지를 따로 설정하지않은 상태에서 활용가능 버블링이란,div>p>span 일 경우 각 태그에 얼럿이 걸려있을 경우, span을 클릭하면 span,p,div순으로 모든 온클릭이 실행되는 것을 의미함※ 버블링의 반대는 캡쳐링 : 제이쿼리로 캡쳐링은 불가능 onclick="event.stopPropagation()" ※ 온클릭 사용 시 button, input 등과 같이 클릭이벤트가 발생하는 태그 혹은 클릭이벤트가 있는 상태여야 버블링이 막힘See the Pen 레이어팝업 닫기 by sangmok-ye (@sangmok-ye) on C..
js 2022. 8. 29. 11:22
[js]숫자 카운트 카운팅 숫자 올라가는 제이쿼리 See the Pen Untitled by sangmok-ye (@sangmok-ye) on CodePen. 동시에 끝나는 카운팅 라이브러리 http://bfintal.github.io/Counter-Up/demo/demo.html Counter Up Demo Counter-Up jQuery Plugin (Scroll down) jQuery(document).ready(function($) { $('.counter').counterUp({ delay: 10, time: 1000 }); }); bfintal.github.io
js 2022. 8. 25. 09:56
[js] select 유지 시키기 See the Pen select 유지 by sangmok-ye (@sangmok-ye) on CodePen. text가 입력되어 있을 경우, 셀렉박스 변경 가능 text가 비어 있을 경우, 셀렉박스를 변경해도 변경 불가 option:selected에서 변경 불가 // $(".right_box").load(location.href+' .right_box select') 특정 영역만 새로고침도 가능
js 2022. 8. 8. 09:52
[js]마우스 휠 감지 See the Pen 마우스 휠 감지 by sangmok-ye (@sangmok-ye) on CodePen. on메서드를 쓰는 이유 : 파이어폭스 호환 올릴 경우 120, 내릴 경우 -120
js 2022. 7. 21. 15:24
[js]ajax 기초 공부 ↓ ajax 기존버전(구버전) $(".click").click(function(){ $.ajax({ url:"sub.html", success:function(data){ $("#container").html($(data).find("li")) } }); }) // 여기서 data는 url링크와 동일하게 인식됨 async : ture or false (defalut : ture) // ture 비동기 , flase 동기 timeout : 밀리세컨드 // timeout 설정으로 해당 시간동안 통신이 되지않을 경우 통신 에러발생 콜백 동작 순서 →성공 success > complete > done > always →실패 error > complete > fail > always 참고 https://api.j..
js 2022. 7. 12. 09:54
[js]디바운싱과 쓰로틀 debounce Throttle 쓰로틀링 참고 https://webclub.tistory.com/607 // 디바운스 function Event(){ // 스크롤 이벤트 실행 함수 코드 } let timer; $(window).scroll(function () { if(timer){ clearTimeout(timer) } timer = setTimeout(()=>{ Event() },500) }) //쓰로틀 function Event(){ 실행될 함수 코드 } let timer; $(window).scroll(function(){ if(!timer){ timer = setTimeout(function(){ timer = null; Event() },1000) } }) ex) 스크롤 이벤트 setTimeout 10초 설정 디바운싱 → 모든 스크롤..
top

티스토리툴바