JavaScript時代の計算機

JavaScript時代の計算は、生年月日からユーザーの現在の年齢を決定するのに役立ちます.これは非常に簡単でシンプルなデザインです.私は以前より多くのデザインを共有しています.これは単純なJavaScript時代の計算機を作って、あなたと共有したのは初めてです.
あなたはwatch the live demo このデザインがどのように機能するかを見るにはまず、webページに小さな箱を作りました.次に、以下の小さな送信ボタンです.
ここでは、入力フィールドに入力日付、月と年を入力することができます.出生のあなたの日付を入力した後、Submitボタンをクリックすると、ここであなたの現在の年齢が表示されます.
以下はどのように私は、ステップバイステップを作った上の完全な情報です.

ステップ1 :基本構造を作成する

まず最初にHTMLとCSSのコードを使ってウェブページをデザインしました.それから、その上に小さな箱を作りました.

<div class="container">

</div>

* {
 box-sizing: border-box;
}

body{
 font-family: Arial, Helvetica, sans-serif;
 background-color: #c83deb;
 font-size: 15px;
 line-height: 1.5;
 padding: 0;
 margin: 0;
}

.container{
 width:520px;
 height: auto;
 min-height:100px;
 margin: 100px auto;
 background-color: #eee;
 border-radius: 5px;
}

ステップ2：見出しまたは見出しを加える

そこでここでタイトルを作りました.この見出しを作成するには、次のHTMLとCSSコードを使用しました.

 <div class="base">
   <h4>Age Calculator</h4>
 </div>

.base{
 width: 100%;
 margin: 0;
 overflow: hidden;
 display: block;
 float: none;
}

.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;
}

ステップ3：入力する場所を作成します

あなたがデモで見たように入力する3つの入力ボックスがあります.最初の日付を入力するには、2ヶ月と3年.次のHTMLとCSSのコードを作成するために使用されている.

 <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>

.block{
 width: 135px;
 padding: 5px 20px;
 margin-left: 20px;
 display: inline-block;
 float: left;
}

.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;
}

ステップ4：提出するボタンを作成します

今、私は彼の現在の年齢が表示されますクリックすると、送信ボタンをした.次のHTMLとCSSのコードを作成し、それを設計するのに役立ちました.

<div class="base">
 <input type="button" name="submit" value="Submit" onclick="age()" />
</div>

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;
}

ステップ5 :年齢を表示するディスプレイを作成する

このボックスには、下に表示されますあなたの現在の年齢を表示する小さなディスプレイがあります.現在、それは隠れた状態です.これはJavaScriptが実行したときにのみ見ることができます.

<div id="age"></div>

#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;
}

ステップ6：年齢計算機をアクティブにする

今、私はJavaScriptコードでそれを実装している.私は非常に簡単なコードをここで使用して、一般にそれを作りました.あなたが基本的なJavaScriptを知っているならば、あなたはこの構造を理解しなければなりません.
誰でもまずdate , month , year 変数によって決まります.

  var d1 = document.getElementById('date').value;
  var m1 = document.getElementById('month').value;
  var y1 = document.getElementById('year').value;

それから、現在の日付をデバイスから受け取ったnew Date () 関数.ここでは、現在の日付を格納しているD 2、M 2、Y 2の固体を取った.ここで、私はVAR月を使っている月の数を与えました.

  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;
  }

現在の時刻から出生のユーザーの日付を減算し、D、M、Y定数でそれを格納します.

  var d = d2 - d1;
  var m = m2 - m1;
  var y = y2 - y1;

結局、私はすべての情報をHTMLページでInnerHTMLを使って配置しました.下記のHTMLコードの1行を使用していることがわかります.このコードでは、この日付、月、年がそのページでどのように見られるかを示します.

  document.getElementById('age').innerHTML = 'Your Age is '+y+' Years '+m+' Months '+d+' Days';

JavaScriptコード

  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';
}

これは非常にsimple JavaScript age calculator デザイン.このチュートリアルでは、私がこのデザインをどのように作ったかを知ることができました.閉じるこの動画はお気に入りから削除されています.私のデザインに間違いがあるならば、コメントで私に知らせてください.