liyaodong/gist:dda1c7fcd3ada30ae3fd

## gistfile1.html
<!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>
	<!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>