ํ์ต ๋ด์ฉ
- ์๋ฐ์คํฌ๋ฆฝํธ String ํจ์
indexOf() : ๋ฌธ์์ ์์น (๋ฆฌํด๊ฐ : ์ ์)
search() : ๋ฌธ์์ด์ ์์น (๋ฆฌํด๊ฐ : ์ ์)
slice(a, b) : a๋ฒ์ง์ด์ 6๋ฒ์ง ๋ฏธ๋ง ๋ฌธ์์ด ๊ฐ์ ธ์ค๊ธฐ (๋ฆฌํด๊ฐ : ๋ฌธ์์ด)
substring(a, b) : a๋ฒ์ง์ด์ 6๋ฒ์ง ๋ฏธ๋ง ๋ฌธ์์ด ๊ฐ์ ธ์ค๊ธฐ (๋ฆฌํด๊ฐ : ๋ฌธ์์ด)
์์
<h3 id="h3">์ต๊ทผ SNS ์์ '#์ฌ์ฅ๋ํ๋ด์ธ์' ํด์ํ๊ทธ๋ฅผ ๋ฌ๊ณ ์๊ธฐ๋ก ์ง์ ์ด ๊ฐ์ ์์๋ฌธ๊ตฌ๋ฅผ ์ด ์์์ฆ ์ฌ์ง์ด ์ค์ง์ด ์ฌ๋ผ์ค๊ณ ์๋ค.</h3>
<script type="text/javascript">
let str = document.getElementById("h3").innerHTML; // 'str'์ h3ํ๊ทธ์ ๋ฌธ์์ด์ ๊ฐ์ ธ์ด
let pos = str.indexOf("ํด"); // 21
pos = str.search("์ฌ์ฅ๋"); // 12
pos = str.slice(3, 6); // SNS
pos = str.substring(3, 6); // SNS
</script>
๋ฌธ์์ด ๋น๊ต
- java์ equals()๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ์์๋ ==๋ก ์ธ ์ ์๋ค.
let str1, str2;
str1 = "hello";
str2 = "hell";
str2 = str2 + "o";
if(str1 == str2) { //java์์ ๊ฐ๋ฅํ์ง ์์ง๋ง, js์์๋ ๊ฐ๋ฅํ๋ค.
console.log("๊ฐ์ ๋ฌธ์์ด");
}
๋ฌธ์์ด ๋๋๊ธฐ
split()์ ์ด์ฉํ์ฌ ๋ฌธ์์ด์ ๋๋ ์ ์๋ค. ๋๋ ๊ฐ์์ ๋ฐ๋ผ ๋ฐฐ์ด๋ก ๋ด์์ง๊ฒ ๋๋ค.
str = 'aa,bb,cc,dd';
let arr = str.split(','); //let์ ๋ฐฐ์ด๋ ๋ด์ ์ ์๋ค.
console.log(arr[1]); // bb ์ถ๋ ฅ
10์ง์๋ฅผ 2,8,16 ์ง์๋ก ๋ณํ
toString() ์ ์ด์ฉํ์ฌ ๋ฐ๊พผ๋ค.
function func() { // 10์ง์๋ฅผ 2,8,16์ง์ ๋ณํ
let num = parseInt(document.getElementById("num").value);
//2,8,16์ง์๋ ๋ฌธ์์ด๋ก ๋ฐ์์ผ๋๊ธฐ ๋๋ฌธ์ ์ค์ง์ ์ผ๋ก string์ผ๋ก ๋ฐ๋๋ค.
let num2 = num.toString(2); //2์ง์
let num8 = num.toString(8); //8์ง์
let num16 = num.toString(16); //16์ง์
let pObj = document.getElementById("result");
let result = '2์ง์ : ' +num2+ ' 8์ง์ : ' +num8+ ' 16์ง์ : ' +num16;
pObj.innerHTML = result;
}
2,8,16์ง์๋ฅผ 10์ง์๋ก ๋ณํ
parseInt(a, b).toString(10)์ ํตํด ๋ณํํ๋ค.
a = ๋ฐ๊ฟ ์ซ์. b = ์ง์
function func2() { // 2์ง์๋ฅผ 10์ง์ ๋ณํ
let num10 = parseInt(document.getElementById("num2").value, 2).toString(10);
result2.innerHTML = num10;
}
function func8() { // 8์ง์๋ฅผ 10์ง์ ๋ณํ
let num10 = parseInt(document.getElementById("num8").value, 8).toString(10);
result3.innerHTML = num10;
}
function func16() { // 16์ง์๋ฅผ 10์ง์ ๋ณํ
let num10 = parseInt(document.getElementById("num16").value, 16).toString(10);
result4.innerHTML = num10;
}
- Class ๋ฒ์ง์๋ก ํ๊ทธ ์ ๊ทผํ๊ธฐ
๊ฐ์ class์์ ๋ฐฐ์ด ๋ฒ์ง๋ก ์ ๊ทผ์ด ๊ฐ๋ฅํ๋ค.
<h3 class="h3cls">h3 tag class h3cls</h3>
<p class="h3cls">p tag class h3cls</p> <!-- 1๋ฒ์ง์ ์๋ ์ด ํ๊ทธ๋ง ๋ณํ๊ฒ ๋๋ค --!>
<script type="text/javascript">
function btnclick() {
document.getElementsByClassName("h3cls")[1].innerHTML = 'class๋ h3cls'; //class๋ ๋ฐฐ์ด ๋ฒ์ง๋ก ์ ๊ทผ ๊ฐ๋ฅ
}
</script>- ์๋ฐ์คํฌ๋ฆฝํธ๋ก CSS ์ ๊ทผํ๊ธฐ
<div id="demo">Hello JS CSS</div>
<button type="button" onclick="func()">์ ์ฉ</button>
<script type="text/javascript">
function func() { //JS๋ก CSS ์ ๊ทผ
let obj = document.getElementById('demo');
obj.style.color = 'white';
obj.style.backgroundColor = 'green';
obj.style.textAlign = 'center';
obj.style.borderStyle = 'double';
obj.style.borderColor = 'red';
obj.style.fontFamily = 'MS PGothic';
obj.style.fontStyle = 'italic';
obj.style.fontSize = '24pt';
}
</script>- ํ์ด๋จธ ๋ง๋ค๊ธฐ
๊ธฐ๋ณธ ๊ธฐ๋ฅ ์ด์ธ์ pause๊ธฐ๋ฅ๊ณผ reset๊ธฐ๋ฅ. ์ด ๋จ์ ์ธ๋ถํ๊น์ง ๊ตฌํํด๋ณด์๋ค.
๊ฐ๊ฐ์ ๋์์ ์ ๋์์ผ๋, ํ์ด๋จธ๋ฅผ ๊ฐ๋ ๋ค์ ํ์ด๋จธ ์๊ฐ์ ๋ฐ๊พธ๊ณ ๋ค์ ํ๊ฒ ๋๋ฉด ์๊ฐ์ด ์์ผ๋ฒ๋ ธ๋ค..
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="" name="frm">
<div align="center">
<strong>๋ผ๋ฉด ํ์ด๋จธ</strong>
<br><br>
<select id="selid" name="myChoice" onchange="">
<option value="18000">์ํ๋ ์๊ฐ์ ์ ํํด ์ฃผ์ญ์์ค (๊ธฐ๋ณธ ์๊ฐ 3๋ถ)</option>
<option value="30000">5๋ถ</option>
<option value="18000">3๋ถ</option>
<option value="15000">2๋ถ 30์ด</option>
<option value="12000">2๋ถ</option>
<option value="6000">1๋ถ</option>
<option value="1000">30์ด</option>
</select>
<input type="button" value="Timer Start" onclick="noodle()">
<br><br>
<span id="countdown">time selected</span>
<br><br>
<button type="button" id="pause" onclick="stop()">pause</button>
<br><br>
<button type="button" id="reset" onclick="resetAll()">reset</button>
<br><br>
<button type="button" onclick="window.close()">close</button>
<br><br>
</div>
</form>
<script type="text/javascript">
let count = 0;
let count2 = 0;
let time = 0;
let choice = 0;
let paused = false;
function noodle() {
clearInterval(time); //ํ์ด๋จธ ์ด๊ธฐํ
choice = document.frm.myChoice.selectedIndex; // form -> select. ์
๋ ํธ์ ๋ฒ์ง์๋ฅผ ๋ํ๋ธ๋ค.
count = parseInt(document.frm.myChoice.options[choice].value); //choice๋ฒ์ง ์ต์
value ๊ฐ (์ด)
time = setInterval('myTimer()', 10);
}
function myTimer() {
count = count - 1;
count += "";
console.log(count.length);
if(count.length == 5){
document.getElementById('countdown').innerHTML = "์๋ฃ๊น์ง <b> "+count.slice(0, 3)+"."+count.slice(3)+"์ด ๋จ์์ต๋๋ค. ";}
else if(count.length == 4){
document.getElementById('countdown').innerHTML = "์๋ฃ๊น์ง <b> "+count.slice(0, 2)+"."+count.slice(2)+"์ด ๋จ์์ต๋๋ค. ";}
else if(count.length == 3){
document.getElementById('countdown').innerHTML = "์๋ฃ๊น์ง <b> "+count.slice(0, 1)+"."+count.slice(1)+"์ด ๋จ์์ต๋๋ค. ";}
else{
document.getElementById('countdown').innerHTML = "์๋ฃ๊น์ง <b> 0."+count+"์ด ๋จ์์ต๋๋ค. ";}
if(count == 0) {
clearInterval(time);
alert('์๊ฐ์ด ์๋ฃ๋์์ต๋๋ค.');
let audio = new Audio('AlarmClockBell.wav');
audio.play();
}
}
function stop() {
if(paused) {
count = count2;
console.log(count);
replay();
document.getElementById('pause').innerHTML = 'pause';
paused = false;
} else if(!paused) {
clearInterval(time);
console.log(count2);
document.getElementById('pause').innerHTML = 'play';
paused = true;
count2 = count;
}
}
function replay() {
time = setInterval('myTimer()', 10);
}
function resetAll() {
clearInterval(time);
count = 0;
count2 = 0;
time = 0;
choice = 0;
paused = false;
document.getElementById('countdown').innerHTML = "time selected";
document.getElementById('pause').innerHTML = 'pause';
}
</script>
</body>
</html>
- location.href
ํ์๊ฐ์ , ๋ก๊ทธ์ธ ๊ฐ์ ํจ์๋ก ๊ฒ์ฌ๊ฐ ํ์ํ ๋ค๋ฅธ ์์๊ฐ ์์ผ๋ฉด ์ด ํจ์๋ฅผ ์ด์ฉํด ๊ฒ์ฌ๋ฅผ ํ ํ์ ๋ค์ ํ์ด์ง๋ก ๋์ด๊ฐ๋ค.
function gopage() {
location.href = "view3.html" // ***** location.href : ํด๋น ํ์ด์ง๋ก ์ด๋
}history.back() : ์ด์ ์ฐฝ์ผ๋ก ์ด๋
location.reload() : ํ์ฌ ํ์ด์ง ์๋ก๊ณ ์นจ
history.forward() : ์ ํ๋ฉด์ผ๋ก ์ด๋
window.open() : ์์ฐฝ์ผ๋ก ์ด๊ธฐ
- โ โ โ ์ด๋ฆ, ๋์ด ๋ฑ ์ ๋ณด๋ฅผ ๋ค๋ฅธ ํ์ด์ง๋ก ์ ๋ฌํ๊ธฐ
์ค์ํ ๋ถ๋ถ์ด ๋ ๊ฒ ๊ฐ๋ค. ์ค์ ๋ก ํ์ ๊ฐ์ ์ด๋, ๊ตฌ๋งค ํ์ด์ง ๋ฑ ์ ๋ณด๋ฅผ ๋ค์ํ์ด์ง๊น์ง ๊ฐ์ ธ๊ฐ์ผ ํ ๊ฒฝ์ฐ์
์ฌ์ฉํ๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- ์ด๋ฆ, ๋์ด ๋ค๋ฅธ ํ์ด์ง๋ก ์ ๋ฌํ๊ธฐ -->
<!-- a ๋ก ๋๊ธฐ๊ธฐ -->
<a href="NewFile.jsp?name=ํ๊ธธ๋&age=24">NewFile.jsp๋ก ์ด๋</a>
<br><br>
<!-- form ์ผ๋ก ๋๊ธฐ๊ธฐ -->
<form action="NewFile.jsp">
์ด๋ฆ:<input type="text" name="name">
<br>
๋์ด:<input type="text" name="age">
<br>
<input type="submit" value="์ด๋">
</form>
<br><br>
<!-- JS๋ก ๋๊ธฐ๊ธฐ -->
์ด๋ฆ:<input type="text" id="name">
<br>
๋์ด:<input type="text" id="age">
<br>
<button type="button" onclick="btn()">์ด๋</button>
<script type="text/javascript">
function btn() {
// location.href = "NewFile.jsp?name=์ผ์ง๋งค&age=22";
let name = document.getElementById("name").value; // ์ ๋ณด๋ฅผ ๊ฒ์ฌํ๊ณ ๋๊ธธ ์ ์๋ ์ฅ์ ์ด ์๋ค.
let age = document.getElementById("age").value;
location.href = "NewFile.jsp?name=" +name+ "&age=" +age;
}
</script>
</body>
</html>
ํ๋ฉด ๊ตฌํ ๋ฌธ์ ํ์ด 1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>๋ฐฐ๊ฒฝ์์ ๋ณ๊ฒฝ</h1>
<p>โป๋ค์ ๋ฒํผ์ ํด๋ฆญํ๋ฉด ํํ์ด์ง์ ๋ฐฐ๊ฒฝ์์ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค.</p>
<button type="button" id="red" onclick="colorChange(1)">๋นจ๊ฐ</button>
<button type="button" id="green" onclick="colorChange(2)">๋
น์</button>
<button type="button" id="blue" onclick="colorChange(3)">์ฒญ์</button>
<button type="button" id="orange" onclick="colorChange(4)">์ฃผํฉ์</button>
<button type="button" id="black" onclick="colorChange(5)">๊ฒ์ ์</button>
<button type="button" id="white" onclick="colorChange(6)">ํฐ์</button>
<script type="text/javascript">
function colorChange(num) {
if(num == 1) {
document.bgColor = 'red';
} else if(num == 2) {
document.bgColor = 'green';
} else if(num == 3) {
document.bgColor = 'blue';
} else if(num == 4) {
document.bgColor = 'orange';
} else if(num == 5) {
document.bgColor = 'black';
} else if(num == 6) {
document.bgColor = 'white';
}
}
</script>
</body>
</html>
ํ๋ฉด ๊ตฌํ ๋ฌธ์ ํ์ด 2.
์๊ฐ, ๋ถ, ์ด๋ฅผ ๊ฐ๊ฐ ๊ตฌํด์ ๋์ดํ ์ ์์ง๋ง Date()๋ฅผ ์ด์ฉํด ํ์ฌ ์๊ฐ์ ๋ํ๋ด๋ ๊ฒ์ ์ด์ฉํ์ฌ
๋ฌธ์์ด๋ก ๋ฐ๊ฟ์ค ํ slice()๋ฅผ ํตํด ์, ๋ถ, ์ด๋ฅผ ๊ฐ์ ธ์๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>ํ์ํฉ๋๋ค</h1>
โปํ์ฌ ์๊ฐ์ <input type="text" id="time" size="15">์
๋๋ค.
<script type="text/javascript">
function func() {
let now = new Date();
// let hour = now.getHours();
// let minute = now.getMinutes();
// let second = now.getSeconds();
// document.getElementById("time").value = hour+ ":" +minute+ ":" +second;
now += "";
document.getElementById("time").value = now.slice(16,24);
}
setInterval(func, 1000);
</script>
</body>
</html>
ํ๋ฉด ๊ตฌํ ๋ฌธ์ ํ์ด 3.
'์ฌ๊ณผ' ์ ๋ ฅ && ์ฒดํฌ๋ฐ์ค๊ฐ ํด์ ๋ ์ํ์
'apple' ์ ๋ ฅ && ์ฒดํฌ๋ฐ์ค๊ฐ ์ฒดํฌ๋์ด ์๋ ์ํ์ ์ ๋ต์ ๋จ๊ฒ ํ์๋ค.
ํ๋ ธ์ ๊ฒฝ์ฐ์ ์ ๋ ฅ๊ฐ์ด ์ด๊ธฐํ๋๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>(๋ฌธ์ )</h2>
<p>์์ด ์๋ด์ผ๋ก "1์ผ 1๊ฐ์ฉ ๋จน์ผ๋ฉด ์์ฌ ํ์์๋ค" ๋ผ๊ณ ํ๋ ๊ณผ์ผ์ ๋ฌด์์ผ๊น์?</p>
<input type="checkbox" id="chkbox">์์ด(์๋ฌธ์)๋ก ๋ตํ๋ค
<br><br>
๋ต:<input type="text" id="answer">
<button type="button" id="result" onclick="check()">๋ต์ ์ฒดํฌ</button>
<script type="text/javascript">
function check() {
let c = document.getElementById('chkbox').checked;
let a = document.getElementById('answer');
if(a.value == "") {
alert('์ ๋ต์ ์
๋ ฅํด์ฃผ์ธ์');
} else if(a.value == "apple" && c == true) {
alert('์ ๋ต!!');
} else if(a.value == "์ฌ๊ณผ" && c != true) {
alert('์ ๋ต!!');
} else {
a.value = "";
alert('ํ๋ ธ์ต๋๋ค');
}
}
</script>
</body>
</html>
ํ๋ฉด ๊ตฌํ ๋ฌธ์ ํ์ด 4.
์๋ ์์์์ value๊ฐ์ผ๋ก ๊ฐ์ ธ์์ง๋ง, ๊ทธ๋ฅ selectedIndex๋ง์ ํ์ฉํด ์ธ๋ฑ์ค ๋ฒํธ๋ก๋ ๊ฐ๋ฅํ๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>๋ฏธ์ ๊ด ๋ฐ ๋ฐ๋ฌผ๊ด์ ๋งํฌ</h1>
<select id="linkSet" onchange="golink()">
<option>๋์์ ์ ํ</option>
<option id="seoul" value="1">์์ธ์๋ฆฝ๋ฏธ์ ๊ด</option>
<option id="mmca" value="2">๊ตญ๋ฆฝํ๋๋ฏธ์ ๊ด</option>
<option id="sac" value="3">์์ ์์ ๋น</option>
<option id="museum" value="4">๊ตญ๋ฆฝ์ค์๋ฐ๋ฌผ๊ด</option>
<option id="museumSeoul" value="5">์์ธ์ญ์ฌ๋ฐ๋ฌผ๊ด</option>
<option id="nfm" value="6">๊ตญ๋ฆฝ๋ฏผ์๋ฐ๋ฌผ๊ด</option>
</select>
<script type="text/javascript">
function golink() {
let s = document.getElementById('linkSet');
let v = s.options[s.selectedIndex].value; // ํด๋น ์ธ๋ฑ์ค - ์ต์
- value ๊ฐ์ ๊ฐ์ ธ์จ๋ค
if(v == 1) {
window.open('https://sema.seoul.go.kr/');
} else if(v == 2) {
window.open('https://mmca.go.kr/');
} else if(v == 3) {
window.open('https://www.sac.or.kr/');
} else if(v == 4) {
window.open('https://museum.go.kr/');
} else if(v == 5) {
window.open('https://museum.seoul.go.kr/');
} else if(v == 6) {
window.open('https://www.nfm.go.kr/');
}
}
</script>
</body>
</html>
ํ๋ฉด ๊ตฌํ ๋ฌธ์ ํ์ด 5.
Math.random()ํจ์์, ์ด๋ฏธ์ง ํ๊ทธ๋ค์ ๋ฐฐ์ด๋ก ๊ฐ์ ธ์ฌ ์ ์๋ค๋ ๊ฒ์ ์ฐธ๊ณ ํ์.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>2๊ฐ์ ์ฃผ์ฌ์</h1>
<p>๋ฒํผ์ ํด๋ฆญํ๋ฉด 2๊ฐ์ ์ฃผ์ฌ์๊ฐ ๋๋ค๋ฉ๋๋ค.</p>
<img alt="" src="1.PNG" id="first" width="100" height="100">
<img alt="" src="2.PNG" id="second" width="100" height="100">
<br>
<button type="button" id="roll" onclick="btn()">์ฃผ์ฌ์๋ฅผ ๊ตด๋ฆฐ๋ค</button>
<script type="text/javascript">
function btn() {
let r = (parseInt)(Math.random()*6) + 1;
let r2 = (parseInt)(Math.random()*6) + 1;
console.log(r);
console.log(r2);
document.images[0].src = r+'.PNG';
document.images[1].src = r2+'.PNG'; //์ด๋ฏธ์ง ํ๊ทธ๋ค๋ง ๋ฐฐ์ด๋ก ๊ฐ์ ธ์ฌ ์ ์๋ค.
}
</script>
</body>
</html>
ํ๋ฉด ๊ตฌํ ๋ฌธ์ ํ์ด 6.
์์ผ์ ์ ๋ ฅํ๋ฉด ๋จ์ ๋ ์ง๋ฅผ ๊ตฌํ๋๋ฐ, ์์ผ์ ๋ฐ๋ฆฌ์ด(ms)๊ฐ์ ๊ตฌํด ํ์ฌ์๊ฐ์ ๋ฐ๋ฆฌ์ด(ms)๋ฅผ ๋นผ์ฃผ์ด์ ๊ณ์ฐํ๋ค.
๋ฐ๋ฆฌ์ด๋ฅผ ๊ตฌํ๊ธฐ ๋๋ฌธ์ ์ด๋ก ํ์ฐํ๊ธฐ ์ํด /1000,
์ด๋ฅผ ๋ถ์ผ๋ก ํ์ฐํ๊ธฐ ์ํด /60,
๋ถ์ ์๊ฐ์ผ๋ก /60,
์๊ฐ์ ์ผ์๋ก /24 ์ฉ ๋๋ ์ฃผ์ด ์ผ์๋ฅผ ๊ณ์ฐํ๋ค.
์ฌ๊ธฐ์ ์์ธ๊ฐ ๋ฐ์ํ๋๋ฐ, ์ด๋ฏธ ์์ผ์ด ์ง๋ฌ๋ค๋ฉด ๋ ์์ +1์ ํ์ฌ ๊ตฌํด์ค๋ค.
์์ผ์ด ์ง๋๊ฒฝ์ฐ๋ฅผ ๋๊ฐ์ง๋ก ๊ณ์ฐํ๋ค.
1. ์์๊ฐ ํ์ฌ์์๋ณด๋ค ์์ ๊ฒฝ์ฐ
2. ์์๋ ๊ฐ๊ณ , ์ผ์๊ฐ ํ์ฌ ์ผ์๋ณด๋ค ์์ ๊ฒฝ์ฐ
๊ตฌํ ๊ฐ์ Math.ceil() ํจ์๋ฅผ ์ด์ฉํด ์ฌ๋ฆผ์ ํด์ฃผ๋๋ก ํ๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>๋ค์ ์์ผ๊น์ง ๋จ์ ์ผ์</h1>
<p>๋ค์ ๋ฒํผ์ ํด๋ฆญํ์ฌ ์์ผ์ ์
๋ ฅํ๋ฉด<br>๋ค์ ์์ผ๊น์ง ๋จ์ ์ผ์๋ฅผ ๋ณผ ์ ์์ต๋๋ค.</p>
<br>
<input type="text" id="birthMonth" size="5">์
<input type="text" id="birthDate" size="5">์ผ
<button type="button" id="btn" onclick="func()">์์ผ์ ์
๋ ฅ</button>
<br>
<p id="birth"></p>
<script type="text/javascript">
function func() {
let now = new Date;
let M = document.getElementById('birthMonth').value;
let D = document.getElementById('birthDate').value;
let Y = now.getFullYear();
/*
console.log(Y);
console.log(now); */
if(M < now.getMonth()+1) { // ์ฌํด ์์ผ์ด ์ง๋ฌ์ผ๋ฉด 1๋
์ถ๊ฐํด์ ๊ณ์ฐ
Y += 1;
}
if(M == now.getMonth()+1 && D <= now.getDate()) {
Y += 1;
}
let birth = new Date(Y, M - 1, D);
console.log(birth);
birthTime = birth.getTime();
nowTime = now.getTime();
let result = Math.ceil((birthTime - nowTime) / 1000 / 60 / 60 / 24);
document.getElementById('birth').innerHTML = "์์ผ๊น์ง <b>" +result+ "</b>์ผ ๋จ์์ต๋๋ค.";
}
</script>
</body>
</html>
'๐ป ๊ฐ๋ฐ > ๐ TIL (Today I Learned)' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| 21.03.05 TIL(D+37 jQuery) (0) | 2021.03.05 |
|---|---|
| 21.03.04 TIL(D+36 JavaScript) (0) | 2021.03.04 |
| 21.03.02 TIL(D+34 JavaScript) (0) | 2021.03.02 |
| 21.02.22 TIL(D+29 JDBC ํ์ฉ AccountBook ๋ง๋ค๊ธฐ) (0) | 2021.02.22 |
| 21.02.19 TIL(D+28 JDBC์ ํตํ DML ๊ตฌํ) (0) | 2021.02.19 |
