모솔 몇일차인지 구하기....
웹/javascript2018. 1. 3. 01:17
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>날짜계산기</title>
<script>
var today = new Date().getTime();
var soloday = function(){
var birth = document.getElementsByTagName("input")[0].value;
var year = birth.split("-")[0];
var month = birth.split("-")[1];
var day = birth.split("-")[2];
var birthDay = new Date( year, month-1, day).getTime()
var time = today-birthDay
var sDay = Math.ceil(time/(1000*60*60*24));
document.getElementsByClassName("text")[0].innerHTML = "모솔" + "<span>"+sDay+"</span>" + "일차..."
}
</script>
<style>
#box{margin:0 auto;width:300px;height:200px;}
#box input{width:100px;height:30px;font-size:16px;}
#box .text{font-size:18px;}
#box span{font-style:bold;color:#f00}
</style>
</head>
<body>
<div id="box">
<input type="text" value="1996-12-10" /> <button class="btn" onclick="soloday()">입력</button>
<p class="text"></p>
</div>
</body>
</html>
'웹 > javascript' 카테고리의 다른 글
| 띠 구하기 (0) | 2018.01.03 |
|---|---|
| 노드를 클릭할때마다 클래스를 토글시키는법 (0) | 2017.12.11 |
| 2017.11.29 (0) | 2017.11.29 |
띠 구하기
웹/javascript2018. 1. 3. 01:17
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>띠계산기</title>
<script>
var MySign = function(){
var birth_Y = document.getElementsByTagName("input")[0].value;
var SignArray = ["닭","개","돼지","쥐","소","범","토끼","용","뱀","말","양","원숭이"]
var remainder = birth_Y % 12;
alert.log("당신은 " + SignArray[remainder-1] + "띠 입니다.")
}
</script>
<style>
#box{margin:0 auto;width:300px;height:200px;}
#box input{width:100px;height:30px;font-size:16px;}
#box .text{font-size:18px;}
#box span{font-style:bold;color:#f00}
</style>
</head>
<body>
<div id="box">
<input type="text" value="1996" maxlength="4"/> <button class="btn" onclick="MySign()">입력</button>
<p class="text"></p>
</div>
</body>
</html>
이렇게 했다가 줄엿다...
if (birth_Y%12 == 1){
console.log("당신은 닭띠 입니다.")
}else if(birth_Y%12 == 2){
console.log("당신은 개띠 입니다.")
}else if(birth_Y%12 == 3){
console.log("당신은 돼지띠 입니다.")
}else if(birth_Y%12 == 4){
console.log("당신은 쥐띠 입니다.")
}else if(birth_Y%12 == 5){
console.log("당신은 소띠 입니다.")
}else if(birth_Y%12 == 6){
console.log("당신은 범띠 입니다.")
}else if(birth_Y%12 == 7){
console.log("당신은 토끼띠 입니다.")
}else if(birth_Y%12 == 8){
console.log("당신은 용띠 입니다.")
}else if(birth_Y%12 == 9){
console.log("당신은 뱀띠 입니다.")
}else if(birth_Y%12 == 10){
console.log("당신은 말띠 입니다.")
}else if(birth_Y%12 == 11){
console.log("당신은 양띠 입니다.")
}else if(birth_Y%12 == 0){
console.log("당신은 원숭이띠 입니다.")
최종
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>띠계산기</title>
<script>
function MySign() {
var birth_Y = document.getElementsByTagName("input")[0].value;
if (birth_Y === "") {
return alert("숫자를 입력해주세요.");
}
var SignArray = [
"원숭이",
"닭",
"개",
"돼지",
"쥐",
"소",
"범",
"토끼",
"용",
"뱀",
"말",
"양"
];
var color = ["하얀", "검은", "파란", "붉은", "황금"];
var twelve = ["신", "유", "술", "해", "자", "축", "인", "묘", "진", "사", "오", "미"];
var stems = ["경", "신", "임", "계", "갑", "을", "병", "정", "무", "기"];
var remainder_a = birth_Y % 12;
var remainder_b = birth_Y % 10;
var colorNum = Math.floor(remainder_b / 2);
alert(
"당신은 " +
stems[remainder_b] +
twelve[remainder_a] +
"년에 태어났습니다." +
"\n" +
color[colorNum] +
SignArray[remainder_a] +
"띠"
);
}
</script>
<style>
#box{margin:0 auto;width:300px;height:200px;}
#box input{width:100px;height:30px;font-size:16px;}
#box .text{font-size:18px;}
#box span{font-style:bold;color:#f00}
</style>
</head>
<body>
<div id="box">
<input type="text" value="" minlength="4" maxlength="4" onkeypress="javascript:if(event.keyCode == 13){MySign()}"/> <button class="btn" onclick="MySign()">입력</button>
<p class="text"></p>
</div>
</body>
</html>
'웹 > javascript' 카테고리의 다른 글
| 모솔 몇일차인지 구하기.... (0) | 2018.01.03 |
|---|---|
| 노드를 클릭할때마다 클래스를 토글시키는법 (0) | 2017.12.11 |
| 2017.11.29 (0) | 2017.11.29 |
노드를 클릭할때마다 클래스를 토글시키는법
웹/javascript2017. 12. 11. 20:17
div.onclick = function(){
if ( this.getAttribute("class").indexOf("image-selected") == -1){
this.setAttribute("class","image image-selected")
}else{
this.removeAttribute("class","image image-selected")
}
// 위의 if문은 아래 .toggle() 로 줄일 수 있다
this.classList.toggle("image-selected")
}
'웹 > javascript' 카테고리의 다른 글
| 모솔 몇일차인지 구하기.... (0) | 2018.01.03 |
|---|---|
| 띠 구하기 (0) | 2018.01.03 |
| 2017.11.29 (0) | 2017.11.29 |
2017.11.29
웹/javascript2017. 11. 29. 00:50
document.querySelector : 제일 앞에 있는 엘리먼트 1개만 반환
document.querySelectorAll : 조건을 만족하는 엘리먼트를 배열로 반환
setTimeout( function, time ) : 지정한 time이 지난후 function함수를 콜백
clearTimeout (timerId) : setTimeout 취소
setInterval( function, time ) :지정한 time이 지날때 마다 function함수를 콜백
clearInterval (timerId) : setInterval을 중지시킴
Event
- click : HTML element를 마우스로 클릭한 경우 발생
- change :form 엘리먼트의 내용이 추가, 삭제 되었을때 발생
- keydown : key가 눌린 경우 발생
'웹 > javascript' 카테고리의 다른 글
| 모솔 몇일차인지 구하기.... (0) | 2018.01.03 |
|---|---|
| 띠 구하기 (0) | 2018.01.03 |
| 노드를 클릭할때마다 클래스를 토글시키는법 (0) | 2017.12.11 |
