iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

33歲轉職者的前端筆記系列 第 21

33歲轉職者的前端筆記-DAY 21 英吋轉公分單位轉換器練習筆記

基本語法筆記

四捨五入:

Math.round();

無條件進位:

Math.ceil();

無條件捨去:

Math.floor();

英吋轉公分單位轉換器

範例圖如下:

https://ithelp.ithome.com.tw/upload/images/20210920/20120789uoCxRIr5oK.jpg

語法如下:

// 英吋轉公分功能實作


// 取得公分與英吋的輸入框DOM(標籤)
const inchInput = document.getElementById("inchInput");
const cmInput = document.getElementById("cmInput");
const inchErr = document.getElementById("inchErr");
const cmErr = document.getElementById("cmErr");


// 綁定英吋輸入框的輸入變更事件
inchInput.addEventListener("input", function () {
  console.log("英吋資料被改變");
  // 清空錯誤訊息
  inchErr.innerText = "";
  // 取得英吋的值
  const inch = parseFloat (inchInput.value);
  console.log("inch", inch);
  //轉換成公分
  let cm = inch * 2.54;
  // 四捨五入到小數點第二位
  cm = Math.round(cm * 100) / 100;
  console.log("cm", cm);

  // 公分的值放到公分輸入框
  cmInput.value = cm;
  //如果英吋是NaN
  if (isNaN(inch)) {
    // 如果條件為true
    inchErr.innerText = "請輸入數字";

  }

});

公分轉英吋語法如下:

cmInput.addEventListener("input", function() {
  const cm =  parseFloat(cmInput.value);
  let inch = cm / 2.54;
  inch = Math.round(inch * 100) / 100;
  inchInput.value = inch;
  cmErr.innerText = "";
  if (isNaN(cm)) {
    cmErr.innerText = "請輸入數字";    
  }
});

上一篇
33歲轉職者的前端筆記-DAY 20 Javascript 基本知識筆記
下一篇
33歲轉職者的前端筆記-DAY 22 成績計算機練習筆記
系列文
33歲轉職者的前端筆記30

尚未有邦友留言

立即登入留言