JavaScript 練習 - BMI 計算器

2019-08-06 PV:

Demo

JavaScript 練習 - BMI 計算器 - Demo

Introduction 介紹

這個 BMI 練習透過 HTML 中的 web storage 物件，使用 localstroage 儲存在瀏覽器的儲存空間裡面，如此一來，本來存入程式碼當中的資料，就不會因重新整理頁面或者關閉瀏覽器而消失。放在 localStorage 的資料會永久保存，直到被使用者清除。透過這個練習認識 web storage。

讀取、更新 Storage
可顯示健康狀態提示文字
搭配 localstorage 的存取

功能

web storage 種類

window.sessionStorage: sessionStorage 的資料會在頁面(頁籤)關閉時清空。
window.localStorage : 放在 localStorage 的資料會永久保存，直到被使用者清除。

基本使用方法

讀取 Storage

透過在 setItem() 方法中指定物件屬性的 key 以及 value ，我們可以在 storage 物件中加入屬性或修改原本的屬性內容。
Storage.setItem(‘key’, ‘value’)

更新 Storage

透過在 setItem() 方法中指定物件屬性的 key 以及 value ，可以在 storage 物件中加入屬性或修改原本的屬性內容。
Storage.setItem(‘key’, ‘value’)

將資料轉為 JSON 格式

透過 Storage 方法方便將資料儲存在本地端，可是有時候我們使用 setItem() 時將值指定為一個物件，再使用 getItem() 來取得資料時，會回傳一個奇怪的 [object object]字串出來，項這樣：

let string = "testword";
let number = 12345;
let array = ["asd", 123, true];
let object = {
  test: 321
};

localStorage.setItem("item", string);
localStorage.setItem("item2", number);
localStorage.setItem("item3", array);
localStorage.setItem("item4", object);

console.log(localStorage.getItem("item"));
console.log(localStorage.getItem("item2"));
console.log(localStorage.getItem("item3"));
console.log(localStorage.getItem("item4"));

這是因為對 object 使用 toString()方法的時候，預設情況下 toString() 方法被每個 object 對象繼承。如果此方法在自定義對象中未被被覆蓋，toString() 將會回傳 [object type]，其中 type 是定義對象的類型。

所以我們這裡使用到 JSON 這種資料格式避免這種問題。

JSON.stringify()：將資料轉為 JSON 格式的字串。
JSON.parse(myJSON)：將資料由 JSON 格式字串轉回原本的資料內容及型別。

計算、儲存資料

先計算出 BMI 質量，並用得出的數字比對判斷式，再將結果依序存入陣列當中，最後將數據轉為 JSON 格式並儲存

function addData(e) {
  e.preventDefault();
  var Height = document.querySelector(".howHeight").value;
  var Weight = document.querySelector(".howWeight").value;
  var BMI = Weight / ((Height / 100) * (Height / 100));

  BMI = BMI.toFixed(1);
  var color = "";
  var situation = "";
  var date = new Date();
  var nowDate = date.toDateString();

  if (BMI < 18.5) {
    situation = "小瘦瘦";
    color = "LightBlue";
  } else if (18.5 <= BMI && BMI < 24) {
    situation = "理想";
    color = "green";
  } else if (24 <= BMI && BMI < 27) {
    situation = "微胖胖";
    color = "orange";
  } else if (27 <= BMI && BMI < 30) {
    situation = "有些肥胖";
    color = "yellow";
  } else if (30 <= BMI) {
    situation = "你是胖子";
    color = "red";
  } else if ((NaN = BMI)) {
    situation = "請輸入數據";
    color = "black";
  }

  var health = {
    content: [color, situation, BMI, Weight, Height, nowDate]
  };
  data.push(health);
  // 更新網頁內容
  updateList(data);
  // 更新localstorage,要存入要轉成string
  localStorage.setItem("listData", JSON.stringify(data));
}

取得資料

1	var data = JSON.parse(localStorage.getItem("listData")) \|\| [];

更新畫面

updateList(data);
function updateList(items) {
  var str = "";
  var len = items.length;
  for (var i = 0; i < len; i++) {
    str +=
      '<li style="border-left: 5px solid ' +
      items[i].content[0] +
      ';"><span style = "width:100px;margin-left:20px;font-size:20px;font-weight:bold;" > ' +
      items[i].content[1] +
      '</span><span style="width:100px;margin-left:30px;">BMI' +
      items[i].content[2] +
      '</span><span style = "width:100px;margin-left:20px;" > 體重 ' +
      items[i].content[3] +
      'kg</span><span style = "width:100px;margin-left:30px;" > 身高' +
      items[i].content[4] +
      'cm</span> <span style="width:200px;margin-left:80px;">' +
      items[i].content[5] +
      "</span>    </li>";
  }

  list.innerHTML = str;
}