liyaodong
1/10/2015 - 3:56 AM

一个简单的物料计算器

一个简单的物料计算器

gistfile1.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>网页算料器</title>
  <style type="text/css">
    body {
      margin: 0; padding: 0;
    }
    .wrap {
      width: 60%;
      margin: 80px auto;
      padding: 20px;
      background-color: #C0FFC3;
    }

  </style>
</head>
<body>
  <div class="wrap">
    <div class="tip">
      请输入您家窗户的宽和高：
    </div>
    <form id="calcform">
      <div class="tip">单位（米）</div>
      <label for="height">高:</label>
      <input id="height" type="text" size="3" maxlength="3" name="height">
      <label for="width">宽:</label>
      <input id="width" type="text" size="3" maxlength="3" name="width">
      <button id="calcbtn">计算</button>
      <button id="clearbtn">清空</button>
      <div id="result"></div>
    </form>
  </div>
  <script>
    window.onload = function () {
      var calcbtn  = getById('calcbtn'),
          result   = getById('result'),
          clearbtn = getById('clearbtn'),
          calcform = getById('calcform');

      calcbtn.addEventListener('click', function(event) {
        event.preventDefault();
        var height = Number(getValue('height')),
            width  = Number(getValue('width'));
        result.innerHTML = (height * width);
      });

      clearbtn.addEventListener('click', function(event) {
        event.preventDefault();
        calcform.reset();
        result.innerHTML = '';
      });

      function getValue (domid) {
        return getById(domid).value;
      }

      function getById (domid) {
        return document.getElementById(domid);
      }

    };

  </script>
</body>
</html>