자바스크립트를 이용한 나이계산기 ( 소스코드 )
7949 단어 programmingwebdevjavascripthtml
블로그를 즐기시기 바라며 나이 계산기 자바스크립트의 기본 HTML 구조부터 시작하겠습니다.
연령 계산기용 HTML 코드
HTML 문서의 본문 태그에서 요소를 사용하여 계산기용 컨테이너를 만들고 class 속성 class = "container"를 추가합니다.
<body>
<div class="container">
<form>
<div class="base">
<div class="enter"><h4>Age Calculator</h4></div>
<div class="block">
<p class="title">Date</p>
<input
type="text"
name="date"
id="date"
placeholder="dd"
required="required"
minlength="1"
maxlength="2"
/>
</div>
<div class="block">
<p class="title">Month</p>
<input
type="text"
name="month"
id="month"
placeholder="mm"
required="required"
minlength="1"
maxlength="2"
/>
</div>
<div class="block">
<p class="title">Year</p>
<input
type="text"
name="year"
id="year"
placeholder="yyyy"
required="required"
minlength="4"
maxlength="4"
/>
</div>
</div>
<div class="base">
<div class="enter">
<input
type="button"
name="submit"
value="Submit"
onclick="age()"
/>
</div>
</div>
<div id="age"></div>
</form>
</div>
</body>
연령 계산기 프로젝트에 대한 모든 HTML 코드가 있습니다. 이제 CSS 및 JAVASCRIPT 없이 출력을 볼 수 있습니다. 그런 다음 나이 계산기용 CSS를 작성하고 나이 계산기용 자바스크립트 코드를 작성합니다.
연령 계산기용 HTML 코드 출력
연령 계산기용 CSS 코드
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #2782e3;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
width: 520px;
height: auto;
margin: 100px auto;
background-color: #eee;
border-radius: 25px;
}
.base {
width: 100%;
margin: 0;
overflow: hidden;
display: block;
float: none;
}
.block {
width: 135px;
padding: 5px 20px;
margin-left: 20px;
display: inline-block;
float: left;
}
.base h4 {
font-size: 26px;
text-align: center;
font-family: sans-serif;
font-weight: normal;
margin-top: 0px;
box-shadow: 0px 2px #bababa;
background: white;
font-size: 34px;
color: navy;
}
.title {
font-size: 20px;
text-align: left;
font-family: sans-serif;
font-weight: normal;
line-height: 0.5;
letter-spacing: 0.5px;
word-spacing: 2.7px;
color: #1073d0;
}
input[type="text"] {
width: 140px;
margin: auto;
outline: none;
min-height: 50px;
border: 2px solid #1073d0;
padding: 12px;
background-color: #f7f7f7;
border-radius: 2px;
color: #1073d0;
font-size: 17px;
}
input[type="text"]:focus {
background-color: #ffffff;
border: 2px solid orange;
outline: none;
}
input[type="button"] {
width: 150px;
margin-left: 35%;
margin-top: 40px;
outline: none;
border: none;
border-radius: 2px;
background-color: #0761b6;
color: #ffffff;
padding: 14px 16px;
text-align: center;
font-size: 16px;
}
input[type="button"]:hover {
background-color: #003669;
}
#age {
display: block;
margin: 10px;
margin-top: 35px;
padding: 10px;
padding-bottom: 20px;
overflow: hidden;
font-family: verdana;
font-size: 23px;
font-weight: normal;
line-height: 1.5;
word-spacing: 2.7px;
color: navy;
}
연령 계산기용 Html CSS 섹션 코딩을 완료했으므로 업데이트된 출력 CSS는 다음과 같습니다.
출력 연령 계산기
이제 나이 계산기에 자바스크립트를 추가하세요. 우리는 함수 age를 생성하고 javascript에서 모든 html 요소를 가져와서 사용자가 입력한 내용을 얻습니다. 그런 다음 사용자가 나이를 입력하면 javascript가 2개의 값을 계산하고 나이 계산기에 출력을 표시할 수 있도록 오늘 날짜, 월, 연도를 가져오는 새로운 코드를 정의합니다.
* 나이 계산기를 위한 자바스크립트 코드 *
function age() {
var d1 = document.getElementById("date").value;
var m1 = document.getElementById("month").value;
var y1 = document.getElementById("year").value;
var date = new Date();
var d2 = date.getDate();
var m2 = 1 + date.getMonth();
var y2 = date.getFullYear();
var month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (d1 > d2) {
d2 = d2 + month[m2 - 1];
m2 = m2 - 1;
}
if (m1 > m2) {
m2 = m2 + 12;
y2 = y2 - 1;
}
var d = d2 - d1;
var m = m2 - m1;
var y = y2 - y1;
document.getElementById("age").innerHTML =
"Your Age is " + y + " Years " + m + " Months " + d + " Days";
}
최종 출력 Javascript 연령 계산기
연령 계산기용 html, css 및 javascript 코드를 완성했으므로 다음은 javascript로 업데이트된 출력입니다.
결론
자바스크립트의 나이 계산기가 마음에 드셨으면 좋겠습니다. 출력 비디오와 프로젝트 스크린샷을 볼 수 있습니다. 다른 블로그를 참조하고 프런트 엔드 개발에 대한 지식을 얻으십시오. 고맙습니다
이번 포스팅에서는 간단한 HTML & CSS와 자바스크립트를 이용하여 나이 계산기 자바스크립트를 만드는 방법에 대해 알아봅니다. 저희가 실수를 했거나 혼동을 드린 경우 댓글을 달아 답장을 보내거나 쉽게 배울 수 있도록 도와주세요.
작성자 – Random/Anki를 사용한 코드
일부 관련 주제 -
dinogame-dino-game-using-html-css-javascript-chrome-dinogame
number-guessing-game-javascript-number-guess-game-javascript-game
chat-ui-design-using-html-and-css-chatbot-ui-template-html-free
notes-app-using-html-css-javascript-
category/project
Reference
이 문제에 관하여(자바스크립트를 이용한 나이계산기 ( 소스코드 )), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codingtitan6/age-calculator-using-javascript-source-code--2d8m텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
