JavaScript
-
210929_select,image,radioJavaScript 2021. 9. 29. 17:44
DOCTYPE html> Insert title here body*{ font-size: 1.2em; } #img{ max-width: 300px; position: absolute; left: 500px; top: 50px; border: 10px solid orange; border-radius: 30px; } 이미지를 선택하세요 사진1 사진2 사진3 사진4 선종류를 선택하세요 Solid Dot Dashd Double Groove Inset var img=document.getElementById("img"); var food=document.getElementById("selectimg"); //사진 변경 function selectImg() { img.setAttribute("src", selec..
-
210929_jquery,canvas(그림판)JavaScript 2021. 9. 29. 17:19
DOCTYPE html> Insert title here #can{ border: 10px solid gold; cursor: crosshair; } #clr{ margin-left: 300px; } #clr div{ width: 30px; height: 30px; cursor: pointer; float: left; margin-left: 3px; } #clear,#eraser{ text-decoration: none; width: 130px; height: 40px; border: 2px solid green; border-radius: 50px; float: left; line-height: 40px; text-align: center; cursor: pointer; margin-left: 20px..
-
210929_canvasJavaScript 2021. 9. 29. 16:07
DOCTYPE html> Insert title here window.onload=function(){ //캔버스에 그림을 그리기위한 작업 var can=document.getElementById("can1"); //스윙의 graphics에 해당하는 것이 js에서는 context.. 그림을 그리는 메서드 var context=can.getContext("2d"); //선그리기 context.lineWidth=5; //선굵기 context.strokeStyle="red"; //선색상 context.lineCap="round"; //round,square //선그리기 시작 context.beginPath(); //원하는 위치로 이동..moveTo context.moveTo(10, 10); //선그리고 위치 ..
-
210929_calendarJavaScript 2021. 9. 29. 15:13
css @charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Single+Day&display=swap'); .seldate select,#calview{ font-family: 'Single Day'; font-size: 1.4em; width: 110px; } .seldate{ margin-left: 300px; } #calview{ margin-left: 250px; margin-top: 30px; } #calview table{ border-collapse: collapse; width: 800px; } #calview table tr{ height: 60px; } #calview table th{ border: 1px s..
-
210929_form,setIntervalJavaScript 2021. 9. 29. 15:09
DOCTYPE html> Insert title here table { width: 300px; border-collapse: collapse; } td,th { border: 1px solid #191970; } window.onload=function(){ //미리 찾아도 되고 나중에 찾아도 됨 var r=document.getElementById("result"); /* 출력용 div*/ var pro=document.getElementById("pro"); //프로그래스바 id //결과확인버튼이벤트..나중에 찾는 걸로 해보기 document.getElementById("btnresult").onclick=function(){ //이름 읽기 var name=document.getElementById..
-
210928_image,onkeyup(위치변경)JavaScript 2021. 9. 28. 15:50
DOCTYPE html> Insert title here #myimg{ position: absolute; } var myimg; var xpos=500; var ypos=300; window.onload=function(){ myimg=document.getElementById("myimg"); myimg.style.top=ypos+"px"; myimg.style.left=xpos+"px"; //키보드의 아스키코드값 확인 window.onkeyup=function(e){ console.log(e.keyCode); //4방향키와 엔터의 아스키코드값 //상:38 하:40 좌:37 우:39 엔터:13 switch(e.keyCode) { case 38: ypos-=10; myimg.style.top=ypos+..
-
210928_time,setInterval,setTimeout,imageJavaScript 2021. 9. 28. 15:42
DOCTYPE html> Insert title here #time{ font-size: 2em; margin-left: 100px; font-weight: bold; font-family: 'Comic Sans MS'; } #myimg{ /* 초기값 설정해줘야 setInterval 적용됨 */ position: absolute; } window.onload=function (){ //시간 function 따로 만든다음 여기서 호출 writeTime(); //1초마다 다시 시간 출력 setInterval(function() { writeTime(); }, 1000) //5초뒤에 딱 한번 이미지 위치변경 var xpos=200; var ypos=350; var myimg; myimg=document.get..
-
210928_setInterval,setTimeout,clearInterval,keyCodeJavaScript 2021. 9. 28. 15:13
DOCTYPE html> Insert title here #myimg{ position: absolute; } #btngo{ margin-left: 400px; width: 150px; font-size: 20pt; position: relative; top: 200px; } #btnstop{ margin-left: 10px; width: 150px; font-size: 20pt; position: relative; top: 200px; } var myimg; var xpos=0; var ms=100; //setinterval에서 초단위 줄때 사용 window.onload=function(){ myimg=document.getElementById("myimg"); /* 기준점 */ //버튼 go docu..