JSFiddle - React, Tailwind, and code Playground

by dtdxrk

HTML

<table>
      <tr>
          <th>距离(km)</td>
          <th>%</td>
          <th>时间</td>
          <th>=</td>
          <th>速度(km/h)</td>
      </tr>
      <tr>
          <td><input type="text" class="text" id="Distance" /></td>
          <td>%</td>
          <td><input type="text" class="text" id="Hour" />小时 <input type="text" class="text" id="Minute" />分</td>
          <td><input type="button" value="计算速度" id="Calculator" /></td>
          <td><strong id="Result">结果</strong></td>
      </tr>
  </table>

CSS

* {margin:0;padding:0; font-family: Arial, Helvetica, sans-serif;}
  
  table { width:600px; margin:100px auto;font-size:12px; text-align:center;}
  table th{ padding:10px;font-size:14px; font-weight:bold;background-color:#e9eef2;}
  table td{ padding:10px;}
  table, table th, table td{ border-collapse:collapse; border:1px solid #ccc;}
  
  input.text{ width:30px; font-size:14px; padding:1px 2px;}
  input#Calculator{ padding:5px; }
  strong#Result{ font-size:14px; color:red;}

JavaScript

var Calculator = document.getElementById("Calculator"),
      Distance = document.getElementById("Distance"),
      Hour = document.getElementById("Hour"),
      Minute = document.getElementById("Minute"),
      Result = document.getElementById("Result");
  
  function noNumbers(e){    //只能键入数字
      var keynum,
          keychar,
          numcheck;
  
      if(window.event){ // IE
           keynum = e.keyCode
        } else if(e.which){// Netscape/Firefox/Opera
           keynum = e.which
       }
      
      keychar = String.fromCharCode(keynum);
      numcheck = /[^\d]/;
      return !numcheck.test(keychar);
  }
 
  Distance.onkeypress = function(){
      return noNumbers(event)
  }
  Hour.onkeypress = function(){
      return noNumbers(event)
  }
  Minute.onkeypress = function(){
      return noNumbers(event)
  } 
 
 //onpaste "return false" 的目的是禁用鼠标右键的“粘贴”菜单，可以防止鼠标右键或者Ctrl + V粘贴不合法的数据。
  Distance.onpaste = function(){
      return false;
  }
  Hour.onpaste = function(){
      return false;
  }
  Minute.onpaste = function(){
      return false;
  }
  
  Calculator.onclick = function(){
      var Time = Number(Hour.value) + Number(parseInt(Minute.value/60)+(Minute.value%60/60)),    //转换时间
          Speed = (Distance.value/Time).toFixed(2);    //只取到小数点后两位
          
      if (Distance.value == "" || Hour.value == "" && Minute.value == ""){
          Result.innerHTML = "结果";
          alert ("距离和时间不能为空！");
      } else if(Speed == "NaN") {
          alert ("距离或时间格式不正确!");
      } else {
          Result.innerHTML = Speed + " km/h";
      }
  }