博客列表 >js计算器——2018年9月16日

js计算器——2018年9月16日

图图的博客
图图的博客原创
2018年09月16日 19:46:40553浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">
    <h2>计算器</h2>
    <form action="">
        <table>
            <tr>
                <td><input type="text" name="opt1"></td>
                <td>
                    <select name="option" id="">
                        <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"></td>
                <td><button type="button">计算</button></td>
            </tr>
            <tr>
                <td style="text-align: right" colspan="2">结果:</td>
                <td style="text-align: left"><h3 id="res" style="color: orangered"></h3></td>
            </tr>
        </table>
    </form>
</div>
<script>
    //获取操作数、按钮、结果
    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 res = document.getElementById('res');

    //给按钮添加事件,进行计算
    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('第一个数不是数字');
            opt1.focus();
            return false;
        }else if(opt2.value.length === 0){
            alert('第二个数不能为空');
            opt1.focus();
            return false;
        }else if(isNaN(opt2.value)){
            alert('第二个数不是数字');
            opt1.focus();
            return false;
        }else{
            data1 = parseFloat(opt1.value);
            data2 = parseFloat(opt2.value);
        }

        let option = opt.value;
        let tmp = 0;
        let flag = '';

        switch (option) {
            case 'null':
                alert('请选择操作类型');
                opt.focus();
                return false;
            case 'add':
                flag = '+';
                tmp = data1 + data2;
                break;
            case 'sub':
                flag = '-';
                tmp = data1 - data2;
                break;
            case 'mul':
                flag = '*';
                tmp = data1 * data2;
                break;
            case 'div':
                flag = '÷';
                if(data2 === 0){
                    alert('除数不能为0');
                    opt2.focus();
                    return false;
                }else {
                    tmp = data1 / data2;
                    tmp = Math.round(tmp * 100)/100
                }
                break;
        }

        res.innerHTML = tmp ;
    }
</script>

<style>
    .box{
        text-align: center;
        background-color: lightgrey;
        border: black 1px solid;
        width: 600px;
        height: 200px;
        overflow:hidden;
        margin: 30px auto;
        border-radius: 15px;
    }
    table{
        margin: auto;
    }
    
    button{
        width: 50px;
        text-align: center;
        background: cornflowerblue;
        border: none;
        color: white;
    }
    button:hover{
        cursor: pointer;
        background:orange;
    }
</style>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议