33岁转职者的前端笔记-DAY 21 英寸转公分单位转换器练习笔记

基本语法笔记

四舍五入：

Math.round();

无条件进位：

Math.ceil();

无条件舍去：

Math.floor();

英寸转公分单位转换器

范例图如下：

语法如下：

// 英寸转公分功能实作


// 取得公分与英寸的输入框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 = "请输入数字";    
  }
});