20180330作业

实例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>迷你计算器</title>
  <style type="text/css">
  .box{
    width:500px;
    height:200px;
    background-color:#efefef;
    border:1px solid lightgray;
    text-align:center;
    margin:20px auto;
    color:#636363;
    border-radius:15px;
    box-shadow:8px 8px 8px #999;
  }
  table{
    margin:auto;
    border:1px solid blue;/*这框看得清楚*/
  }
  td{
    width:100px;
    height:30px;
    padding:5px 0px;
    border:1px solid red;/*这红框看得老清楚了,代码写到这儿计算按钮出去了，调了个参数*/
  }
  input.select{
    width:100%;
    height:100%;
    border:none;
    text-align:center;
    background-color:cyan;
  }
  button{
    width:100%;
    height:100%;
    border:none;
    background-color:skyblue;
    color:white;
  }
  button:hover{
    cursor:pointer;
    background-color: coral;
    width:105%;
    height:105%;
  }
  </style>
</head>
<body>
  <div class="box">
    <h2>迷你计算器</h2>
    <form>
      <table>
        <tr>
          <td><input type="text" name="opt1" placeholder="操作数1"></td>
          <td>
            <select name="option">
              <option value="null">请选择操作</option>
              <option value="add">+</option>
              <option value="sub">-</option>
              <option value="mul">*</option>
              <option value="div">/</option>
            </select>
          </td>
          <td><input type="text" name="opt2" placeholder="操作数2"></td>
          <td><button type="button">计算</button></td>
        </tr>
        <tr>
          <td colspan="2" align="right"><h3>结果：</h3></td>
          <td colspan="2" align="left"><h3 id="placeholder"></h3></td>
        </tr>
      </table>
    </form>
  </div>
  <script>
    //1.获取操作数，按钮与结果占位符
    var opt1=document.getElementsByName('opt1')[0]
    var opt2=document.getElementsByName('opt2')[0]
    var opt=document.getElementsByName('option')[0]
    var btn=document.getElementsByTagName('button')[0]
    var placeholder=document.getElementById('placeholder')
    //2.已获取界面提交参数，执行计算操作
    btn.onclick=function(){
      var data1=parseFloat(opt1.value)
      var data2=parseFloat(opt2.value)
      if(opt1.value.length==0){
        alert('第一个操作数不能为空')
        opt1.focus()
        return false
      }else if (isNaN(opt1.value)) {
        alert('第一个操作数必须为数字')
        opt1.focus()
        return false
      }else if(opt2.value.length==0){
        alert('第二个操作数不能为空')
        opt2.focus()
        return false
      }else if(isNaN(opt2.value)){
        alert('第二个操作数必须为数字')
        opt2.focus()
        return false
      }else{
        var data1=parseFloat(opt1.value)
        var data2=parseFloat(opt2.value)
      }
      var option=opt.value
      var temp=0
      var flag=''
      var result = ''
			switch (option){
				case 'null':
					alert("请选择操作类型")
					opt.focus()
					return false
				case 'add':
					flag = '+'
					temp = data1 + data2
					break
				case 'sub':
					flag = '-'
					temp = data1 - data2
					break
				case 'mul':
					flag = '*'
					temp = data1 * data2
					break
				case 'div':
					flag = '/'
					if (data2 == 0) {
						alert('除数不能为0,请重新输入')
						opt2.focus()
						return false
					} else {
						temp = data1 / data2
					}
					break
			}
			var str = '<span style="color:coral">'
			str += data1+' '+flag+' '+data2 + ' = ' + temp
			str += '</span>'
			placeholder.innerHTML = str
		}
  </script>

</body>
</html>

运行实例 »
点击 "运行实例" 按钮查看在线实例
相关文章
