9.12 js计算器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>
 .box{
            width: 500px;
 height: 500px;
 background-color: lightgrey;
 border:1px solid lightgrey;
 text-align:center;
 margin: 20px auto;
 border-radius:10px;
 box-shadow: 2px 2px 2px #999;
 }
        table{
            margin:auto;
 border: 1px solid red;
 }
        td{
            width: 100px;
 height: 30px;
 padding: 5px;
 }
    </style>
</head>
<body>
    <div class="box">
        <h2>计算器</h2>
        <form action="">
            <table>
                <tr>
                    <td><input type="text" name="opt1" placeholder="操作数1"></td>
                    <td>
                        <select  id="" 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><h3>结果:</h3></td>
                    <td><h3 id="result"></h3></td>
                </tr>
            </table>
        </form>
    </div>

    <script>
 //1.获取操作数,按钮,结果占位符
 let opt1 = document.getElementsByName('opt1')[0];
 let opt2 = document.getElementsByName('opt2')[0];
 let opt = document.getElementsByName('option')[0];
 let btn = document.getElementsByTagName('button')[0];
 let result = document.getElementById('result');
 //2.按钮添加事件
 btn.onclick = function(){
            //操作数初始化
 let data1 = 0;
 let data2 = 0;
 //
 if (opt1.value.length ===0){  //第一个操作数不能为空
 alert('第一个操作数不能为空');
 opt1.focus();
 return false;
 }else if(isNaN(opt1.value)){  //第一个操作数必须为数字
 alert('第一个操作数必须为数字');
 }else  if (opt2.value.length ===0){
                alert('第二个操作数不能为空');
 opt1.focus();
 return false;
 }else if(isNaN(opt2.value)){
                alert('第二个操作数必须为数字');
 }else {
                data1 = parseFloat(opt1.value);  //parseFloat  可以把字符串转为数字,确保值是数字
 data2 = parseFloat(opt2.value);
 }

            //对操作符进行处理
 let option = opt.value;  //拿到了用户选择的操作
 let temp = 0;
 let flag = '';

 switch(option){
                case 'null':
                    alert('请选择操作类型');
 opt.focus();
 break;
 case 'add':
                    flag = '+';
 temp = data1 + data2;
 break;
 case 'sub':
                    flag = '-';
 temp = data1 - data2;
 break;
 case 'mul':
                    flag = '*';
 temp = data1 * data2;
 break;
 case 'div':
                    flag = '/';
 //除数不能为0 的判断和处理
 if(data2===0){
                        alert('除数不能为零');
 opt2.value = '';
 opt2.focus();
 return false;
 }else{
                        temp = data1 / data2;
 //四舍五入,仅保留两位小数
 temp = Math.round(temp*100) / 100;  //
 }
                    break;
 }
            let str = '<span style="color:red">';
 str += data1 + flag + data2 + '='  +temp;
 str += '</span>';
 result.innerHTML=str;
 }
    </script>
</body>
</html>
相关文章
