SOURCE

var gIpt1 = document.getElementsByTagName('input')[0];
var gIpt2 = document.getElementsByTagName('input')[1];
var gDiv = document.getElementsByTagName('div')[0];
var gBtn = document.getElementById('btn');
var gOpr = document.getElementById('operation');

gBtn.onclick = function () {
    var ind = gOpr.selectedIndex;
    switch (ind) {
        case 0:
            if (isNaN(Number(gIpt1.value)) || isNaN(Number(gIpt2.value))) {
                gDiv.innerHTML = '请输入数字！';
                gDiv.style.color = 'red';
            } else {
                gDiv.style.color = 'black';
                gDiv.innerHTML = Number(gIpt1.value) + Number(gIpt2.value)
            };
            break;
        case 1:
            if (isNaN(Number(gIpt1.value)) || isNaN(Number(gIpt2.value))) {
                gDiv.innerHTML = '请输入数字！';
                gDiv.style.color = 'red';
            } else {
                gDiv.style.color = 'black';
                gDiv.innerHTML = gIpt1.value - gIpt2.value
            };
            break;
        case 2:
            if (isNaN(Number(gIpt1.value)) || isNaN(Number(gIpt2.value))) {
                gDiv.innerHTML = '请输入数字！';
                gDiv.style.color = 'red';
            } else {
                gDiv.style.color = 'black';
                gDiv.innerHTML = gIpt1.value * gIpt2.value
            };
            break;
        case 3:
            if (isNaN(Number(gIpt1.value)) || isNaN(Number(gIpt2.value))) {
                gDiv.innerHTML = '请输入数字！';
                gDiv.style.color = 'red';
            } else {
                gDiv.style.color = 'black';
                gDiv.innerHTML = gIpt1.value / gIpt2.value
            };
            break;
        case 4:
            if (isNaN(Number(gIpt1.value)) || isNaN(Number(gIpt2.value))) {
                gDiv.innerHTML = '请输入数字！';
                gDiv.style.color = 'red';
            } else {
                gDiv.style.color = 'black';
                gDiv.innerHTML = gIpt1.value % gIpt2.value
            };

    }
}

<input type="text">
    <select name="" id="operation">
        <option data-index="0" value="+">+</option>
        <option data-index="1" value="-">-</option>
        <option data-index="2" value="*">×</option>
        <option data-index="3" value="/">÷</option>
        <option data-index="4" value="%">%</option>
    </select>
    <input type="text">
    <button id="btn">=</button>
    <div></div>
    <p>简易计算器</p>

input{
            border: 0;
            outline: none;
            background: #ececec;
            width: 84px;
            height: 50px;
            font-size: 40px;
            border-radius: 10px;
            padding: 1px 10px;
            text-align: center;
        }
        select{
            border: 0;
            outline: none;
            background: #ececec;
            width: 100px;
            height: 52px;
            font-size: 20px;
            padding: 2px 20px;
            vertical-align: 6.5px;
            border-radius: 10px;

        }
        button{
            border: 0;
            outline: none;
            color: #ffffff;
            background: #ffbb00;
            width: 100px;
            height: 52px;
            font-size: 40px;
            border-radius: 10px;
        }
        div{
            width: 392px;
            height: 70px;
            background: #ececec;
            border-radius: 10px;
            margin-top: 4px;
            padding: 30px 15px;
            font-size: 50px;
            overflow: hidden;
        }
        p{
            font-size: 12px;
            color: #c2c2c2;
            margin-left: 347px;
            margin-top: -25px;
        }