Coding/Java Script
[나이계산프로그램만들기]
by 찡콩찡
2022. 6. 15.
<!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>age</title>
<link rel="stylesheet" href="css/age.css">
</head>
<body>
<button class="btn" onclick="calc()">나이계산</button>
<div id="result" class="show">(결과값 표기)</div>
<script>
function calc() {
//올해 년도를 저장을 변수 currenYear에 저장함
var currentYear = 2022;
//사용자로부터 입력을 받은 값으로 birthYear에 저장함
var birthYear = prompt("태어난 년도를 입력하세요", "YYYY");
//변수 age를 0으로 초기화
var age = 0;
//실제 나이를 구하기 위한 코드
age = currentYear - birthYear +1;
//document는 현재 웹브라우저의 페이지를 의미하고 querySelector()는
//id가 result인 웹요소(div)를 의미한다. innerHTML은 대입한 값으로
//html문서에 대체하라는 의미
document.querySelector("#result").innerHTML = "당신의 나이는" + age + "세입니다";
}
</script>
</body>
</html>
body{
text-align: center;
}
.btn{
margin-top: 50px;
font-weight: 400;
color: #fff;
background-color: #007bff;
text-align: center;
vertical-align: center; /*수직*/
border: 1px solid blue;
padding: 5px;
}
.btn:hover {
color: #fff;
background-color:aquamarine;
border-color: aquamarine;
}
.show{
margin-top: 50px;
padding: 20px 30px;
border-top: 1px solid #ccc;
border-bottom:1px solid #ccc ;
}
초기 화면
hover 실행 시
