고정 헤더 영역
상세 컨텐츠
본문
태그의 속성으로 선택하기
const idinput = document.querySelector("input[name='id']");
화면, 해상도 출력하게하는거
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
</style>
</head>
<body>
<script>
// 사용자 os 정보 받아오기
const info = navigator.userAgent.toLocaleLowerCase();
if(info.indexOf('windows')>=0){
alert("윈도우");
}
else if(info.indexOf('macintosh')>=0){
alert("mac");
}
else if(info.indexOf('android')>=0){
alert("윈도우");
}
//모니터의 가로길이, 세로길이 (해상도 px단위로 가져옴)
const scr = screen;
const scrwidth = scr.width;
const scrheight = scr.height;
console.log(`모니터의 가로길이 : ${scrwidth}`);
console.log(`모니터의 세로길이 : ${scrheight}`);
document.write(scr)
document.write(scr.width)
document.write(scr.height)
</script>
</body>
</html>
인터벌로 상자 옮기기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setInterval</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
left: 0;
top: 0;
}
button {
position: absolute;
top: 120px;
}
#stopBtn {
left: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
<button type="button" id="startBtn" onclick="startInterval()">인터벌시작</button>
<button type="button" id="stopBtn" onclick="clearInterval(interval)">인터벌종료</button>
<script>
//1초마다 box를 왼쪽으로 20px씩 이동
let left = 0;
let interval;
const startInterval = () => {
interval = setInterval(() => {
left += 20;
const box = document.getElementsByClassName('box')[0];
box.style.left = `${left}px`;
}, 1000);
}
</script>
</body>
</html>
테이블에 글자 누르면 바뀌는거
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
</style>
</head>
<body>
<table id="outside">
<tr><td id="t1">one</td></tr>
<tr><td id="t2">two</td></tr>
</table>
</body>
<script>
// t2의 콘텐츠를 바꾸는 함수
function modifyText(new_text) {
const t2 = document.getElementById("t2");
t2.firstChild.nodeValue = new_text;
}
// 화살표 함수를 사용한 이벤트 수신기를 표에 추가
const el = document.getElementById("outside");
el.addEventListener("click", () => { modifyText("four"); }, false);
</script>
</html>
인터벌로 시간 출력하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
</style>
</head>
<body>
<div class="time"></div>
<button type="button" onclick="clearInterval(interval)">인터벌 중료</button>
<script>
let hour = 0;
let minute = 0;
let second = 0;
let interval = setInterval(()=>{
second++;
if(second>=60){
second=0;
minute++;
}
if(minute>=60){
minute=0;
hour++;
}
let hourtxt = "";
let minutetxt = "";
let secondtxt = "";
if(hour < 10) hourtxt="0"+hour;
else{
hourtxt=hour;
}
if(minute < 10) minutetxt="0"+minute;
else{
minutetxt=minute;
}
if(second < 10) secondtxt="0"+second;
else{
secondtxt=second;
}
const timeTag = document.getElementsByClassName("time")[0];
timeTag.innerText = `${hourtxt}:${minutetxt}:${secondtxt}`
},1000);
</script>
</body>
</html>
openpop window 오픈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
</style>
</head>
<body>
<button type="button" onclick="openpop()">hher</button>
<script>
const openpop = () => {
//팝업에서 띄울 페이지 주소, 팝업창 이름
window.open('http://www.naver.com','네이버', 'width = 400px, height = 500px, left = 50, top = 10' );
}
</script>
</body>
</html>
textarea에 다른 요소 텍스트 뽑아서 채워넣기
<html lang="en">
<body>
<span class="orange fruit">Orange Fruit</span>
<span class="orange juice">Orange Juice</span>
<span class="apple juice">Apple Juice</span>
<span class="foo bar">Something Random</span>
<textarea id="resultArea" style="width:98%;height:7em"></textarea>
<script>
// getElementsByClassName only selects elements that have both given classes
const allOrangeJuiceByClass = document.getElementsByClassName("orange juice");
let result = "document.getElementsByClassName('orange juice')";
for (let i = 0; i < allOrangeJuiceByClass.length; i++) {
result += `\n ${allOrangeJuiceByClass[i].textContent}`;
}
// querySelector only selects full complete matches
const allOrangeJuiceQuery = document.querySelectorAll(".orange.juice");
result += "\n\ndocument.querySelectorAll('.orange.juice')";
for (let i = 0; i < allOrangeJuiceQuery.length; i++) {
result += `\n ${allOrangeJuiceQuery[i].textContent}`;
}
document.getElementById("resultArea").value = result;
</script>
</body>
</html>
댓글 영역